@mijadesign/nut-mcp 1.0.0-alpha.0

package/docs/docs/components/dentry/datepicker/index.md

@@ -0,0 +1,489 @@
+---
+order: 8
+demoUrl: 'https://frontend.mishudata.com/mobile/demo/#/dentry/pages/datepicker/index'
+group:
+    title: 数据录入
+    order: 5
+---
+
+# DatePicker 日期选择器 <Badge>2.0.0</Badge>
+
+
+时间选择器，支持日期、年月、时分等维度，通常与弹出层组件配合使用。
+
+## 引入
+
+```tsx
+import { DatePicker } from '@nutui/nutui-taro';
+```
+
+## 示例代码
+
+### 选择日期
+
+
+```tsx
+import { Cell, DatePicker } from '@mijadesign/mjui-react-taro'
+import { ArrowRight } from '@nutui/icons-react-taro'
+import React, { useState } from 'react'
+
+const useDatePicker = (initialDate: Date) => {
+  const year = initialDate.getFullYear()
+  const month = String(initialDate.getMonth() + 1).padStart(2, '0')
+  const day = String(initialDate.getDate()).padStart(2, '0')
+
+  const defaultDesc = `${year}年${month}月${day}日`
+  const defaultValue = `${year}-${month}-${day}`
+
+  return { defaultDesc, defaultValue }
+}
+
+const Demo1 = () => {
+  const marginLeft = { marginLeft: '4px' }
+
+  const defaultDate = new Date()
+  const { defaultDesc: defaultDesc1, defaultValue: defaultValue1 } = useDatePicker(defaultDate)
+  const { defaultValue: defaultDesc2, defaultValue: defaultValue2 } = useDatePicker(defaultDate)
+
+  const [show1, setShow1] = useState(false)
+  const [desc1, setDesc1] = useState(defaultDesc1)
+
+  const [show2, setShow2] = useState(false)
+  const [value, setValue] = useState(defaultValue2)
+
+  return (
+    <Cell.Group>
+      <Cell
+        className="nutui-cell-clickable"
+        title="日期选择"
+        onClick={() => setShow2(true)}
+        extra={
+          <>
+            {value}
+            <DatePicker
+              title="日期选择"
+              visible={show2}
+              value={new Date(value)}
+              onClose={() => setShow2(false)}
+              threeDimensional={false}
+              onConfirm={(_, values) => setValue(values.join('-'))}
+            />
+            <ArrowRight style={marginLeft} />
+          </>
+        }
+      />
+      <Cell
+        className="nutui-cell-clickable"
+        title="日期选择（显示中文）"
+        onClick={() => setShow1(true)}
+        extra={
+          <>
+            {desc1}
+            <DatePicker
+              title="日期选择"
+              visible={show1}
+              showChinese
+              defaultValue={new Date(defaultValue1)}
+              onClose={() => setShow1(false)}
+              onConfirm={(options) => setDesc1(options.map((option) => option.label).join(''))}
+            />
+            <ArrowRight style={marginLeft} />
+          </>
+        }
+      />
+    </Cell.Group>
+  )
+}
+
+export default Demo1
+
+```
+    
+### 选择月日
+
+DatetimePicker 通过 type 属性来定义需要选择的时间类型。将 type 设置为 year-month 即可选择年份和月份，设置为 month-day 即可选择月份和日期。
+
+
+```tsx
+import { Cell, DatePicker, PickerOptions, PickerValue } from '@mijadesign/mjui-react-taro'
+import { ArrowRight } from '@nutui/icons-react-taro'
+import React, { useState } from 'react'
+
+const Demo2 = () => {
+  const marginLeft = { marginLeft: '4px' }
+
+  const defaultValue = new Date()
+  const year = defaultValue.getFullYear()
+  const month = String(defaultValue.getMonth() + 1).padStart(2, '0')
+  const endMonth = String(defaultValue.getMonth() + 2).padStart(2, '0')
+  const day = String(defaultValue.getDate()).padStart(2, '0')
+
+  const [show, setShow] = useState(false)
+  const [desc, setDesc] = useState(`${month}-${day}`)
+  const confirm = (values: PickerValue[], options: PickerOptions) => {
+    setDesc(options.map((option) => option.label).join('-'))
+  }
+  return (
+    <Cell.Group>
+      <Cell
+        className="nutui-cell-clickable"
+        title="限制开始结束时间"
+        onClick={() => setShow(true)}
+        extra={
+          <>
+            {desc}
+            <DatePicker
+              title="日期选择"
+              startDate={new Date()}
+              endDate={new Date(`${year}-${endMonth}-${day}`)}
+              defaultValue={new Date(`${year}-${month}-${day}`)}
+              type="month-day"
+              visible={show}
+              onClose={() => setShow(false)}
+              onConfirm={(options, values) => confirm(values, options)}
+            />
+            <ArrowRight style={marginLeft} />
+          </>
+        }
+      />
+    </Cell.Group>
+  )
+}
+export default Demo2
+
+```
+    
+### 选择年月日时分
+
+将 type 设置为 datetime 即可选择完整的时间。
+
+
+```tsx
+import { Cell, DatePicker, PickerOptions, PickerValue } from '@mijadesign/mjui-react-taro'
+import { ArrowRight } from '@nutui/icons-react-taro'
+import React, { useState } from 'react'
+
+const Demo3 = () => {
+  const marginLeft = { marginLeft: '4px' }
+
+  const defaultValue = new Date()
+  const year = defaultValue.getFullYear()
+  const month = String(defaultValue.getMonth() + 1).padStart(2, '0')
+  const day = String(defaultValue.getDate()).padStart(2, '0')
+
+  const defaultDescription = `${year}-${month}-${day}`
+
+  const startDate = new Date(2020, 0, 1)
+  const endDate = new Date(2025, 10, 1)
+  const [show, setShow] = useState(false)
+  const [desc, setDesc] = useState(`${defaultDescription} 11:08`)
+  const confirm = (values: PickerValue[], options: PickerOptions) => {
+    const date = values.slice(0, 3).join('-')
+    const time = values.slice(3).join(':')
+    setDesc(`${date} ${time}`)
+  }
+  return (
+    <Cell.Group>
+      <Cell
+        title="选择年月日时分"
+        className="nutui-cell-clickable"
+        onClick={() => setShow(true)}
+        extra={
+          <>
+            {desc}
+            <DatePicker
+              title="日期选择"
+              startDate={startDate}
+              endDate={endDate}
+              defaultValue={new Date(`${defaultDescription}T11:08`)}
+              visible={show}
+              type="datetime"
+              onClose={() => setShow(false)}
+              onConfirm={(options, values) => confirm(values, options)}
+            />
+            <ArrowRight style={marginLeft} />
+          </>
+        }
+      />
+    </Cell.Group>
+  )
+}
+export default Demo3
+
+```
+    
+### 选择时分秒
+
+
+```tsx
+import { Cell, DatePicker, PickerOptions, PickerValue } from '@mijadesign/mjui-react-taro'
+import { ArrowRight } from '@nutui/icons-react-taro'
+import React, { useState } from 'react'
+
+const Demo4 = () => {
+  const marginLeft = { marginLeft: '4px' }
+
+  const defaultValue = new Date()
+  const year = defaultValue.getFullYear()
+  const month = String(defaultValue.getMonth() + 1).padStart(2, '0')
+  const day = String(defaultValue.getDate()).padStart(2, '0')
+
+  const defaultDescription = `${year}-${month}-${day}`
+  const startDate = new Date(2020, 0, 1)
+  const endDate = new Date(2025, 10, 1)
+  const [show, setShow] = useState(false)
+  const [desc, setDesc] = useState('10:10:00')
+  const confirm = (values: PickerValue[], options: PickerOptions) => {
+    setDesc(options.map((option) => option.label).join(':'))
+  }
+
+  const [show2, setShow2] = useState(false)
+  const [desc2, setDesc2] = useState('10:10')
+  const confirm2 = (options: PickerOptions, values: PickerValue[]) => {
+    setDesc2(options.map((option) => option.label).join(':'))
+  }
+
+  return (
+    <Cell.Group>
+      <Cell
+        title="选择时分秒"
+        className="nutui-cell-clickable"
+        onClick={() => setShow(true)}
+        extra={
+          <>
+            {desc}
+            <DatePicker
+              title="日期选择"
+              type="time"
+              defaultValue={new Date(`${defaultDescription}T${desc}`)}
+              startDate={startDate}
+              endDate={endDate}
+              visible={show}
+              onClose={() => setShow(false)}
+              onConfirm={(options, values) => confirm(values, options)}
+            />
+            <ArrowRight style={marginLeft} />
+          </>
+        }
+      />
+      <Cell
+        title="选择时分"
+        className="nutui-cell-clickable"
+        onClick={() => setShow2(true)}
+        extra={
+          <>
+            {desc2}
+            <DatePicker
+              title="日期选择"
+              type="hour-minutes"
+              defaultValue={new Date(`${defaultDescription}T${desc2}`)}
+              startDate={startDate}
+              endDate={endDate}
+              visible={show2}
+              onClose={() => setShow2(false)}
+              onConfirm={(options, values) => confirm2(options, values)}
+            />
+            <ArrowRight style={marginLeft} />
+          </>
+        }
+      />
+    </Cell.Group>
+  )
+}
+export default Demo4
+
+```
+    
+### 选择时分
+
+
+```tsx
+import { Cell, DatePicker, PickerOption, PickerOptions, PickerValue } from '@mijadesign/mjui-react-taro'
+import { ArrowRight } from '@nutui/icons-react-taro'
+import React, { useState } from 'react'
+
+const Demo5 = () => {
+  const marginLeft = { marginLeft: '4px' }
+
+  const defaultValue = new Date()
+  const year = defaultValue.getFullYear()
+  const month = String(defaultValue.getMonth() + 1).padStart(2, '0')
+  const day = String(defaultValue.getDate()).padStart(2, '0')
+
+  const defaultDescription = `${year}-${month}-${day}`
+  const [show, setShow] = useState(false)
+  const [desc, setDesc] = useState(`${defaultDescription} 10:10`)
+  const confirm = (values: PickerValue[], options: PickerOptions) => {
+    const date = options
+      .slice(1, 3)
+      .map((op) => op.label)
+      .join('')
+    const time = options
+      .slice(3)
+      .map((op) => op.value)
+      .join(':')
+    setDesc(`${options[0].label}年${date} ${time}`)
+  }
+  const formatter = (type: string, option: PickerOption) => {
+    switch (type) {
+      case 'year':
+        option.label += ''
+        break
+      case 'month':
+        option.label += '月'
+        break
+      case 'day':
+        option.label += '日'
+        break
+      case 'hour':
+        option.label += '时'
+        break
+      case 'minute':
+        option.label += '分'
+        break
+      default:
+        option.label += ''
+    }
+    return option
+  }
+
+  const startDate = new Date(2020, 0, 1)
+  const endDate = new Date(2025, 10, 1)
+  const [show2, setShow2] = useState(false)
+  const [desc2, setDesc2] = useState('10:10:00')
+  const confirm2 = (values: PickerValue[], options: PickerOptions) => {
+    setDesc2(options.map((option) => option.label).join(':'))
+  }
+
+  const defaultDescription3 = `${year}-${month}-${day}T06:00`
+  const [show3, setShow3] = useState(false)
+  const [desc3, setDesc3] = useState(`${year}年${month}月${day}日 06时`)
+  const confirm3 = (values: PickerValue[], options: PickerOptions) => {
+    setDesc3(options.map((option) => option.label).join(' '))
+  }
+  const filter3 = (type: string, options: PickerOptions) => {
+    if (type === 'hour') {
+      return options.filter((option) => Number(option.value) % 6 === 0)
+    }
+    return options
+  }
+  const formatter3 = (type: string, option: PickerOption) => {
+    switch (type) {
+      case 'year':
+        option.label += `年`
+        break
+      case 'month':
+        option.label += `月`
+        break
+      case 'day':
+        option.label += `日`
+        break
+      case 'hour':
+        option.label += `时`
+        break
+      default:
+        option.label += ''
+    }
+    return option
+  }
+
+  return (
+    <Cell.Group>
+      <Cell
+        title="格式化选项"
+        className="nutui-cell-clickable"
+        onClick={() => setShow(true)}
+        extra={
+          <>
+            {desc}
+            <DatePicker
+              title="时间选择"
+              type="datetime"
+              startDate={new Date(2023, 0, 1)}
+              endDate={new Date(2026, 10, 1)}
+              visible={show}
+              defaultValue={new Date(`${defaultDescription}T10:10`)}
+              formatter={formatter}
+              onClose={() => setShow(false)}
+              onConfirm={(options, values) => confirm(values, options)}
+            />
+            <ArrowRight style={marginLeft} />
+          </>
+        }
+      />
+      <Cell
+        title="分钟数递增步长设置"
+        className="nutui-cell-clickable"
+        onClick={() => setShow2(true)}
+        extra={
+          <>
+            {desc2}
+            <DatePicker
+              title="时间选择"
+              type="time"
+              defaultValue={new Date(`${defaultDescription}T${desc2}`)}
+              startDate={startDate}
+              endDate={endDate}
+              visible={show2}
+              minuteStep={5}
+              onClose={() => setShow2(false)}
+              onConfirm={(options, values) => confirm2(values, options)}
+            />
+            <ArrowRight style={marginLeft} />
+          </>
+        }
+      />
+      <Cell
+        title="过滤选项"
+        className="nutui-cell-clickable"
+        onClick={() => setShow3(true)}
+        extra={
+          <>
+            {desc3}
+            <DatePicker
+              title="时间选择"
+              type="datehour"
+              startDate={startDate}
+              endDate={endDate}
+              visible={show3}
+              defaultValue={new Date(`${defaultDescription3}`)}
+              formatter={formatter3}
+              minuteStep={5}
+              filter={filter3}
+              onClose={() => setShow3(false)}
+              onConfirm={(options, values) => confirm3(values, options)}
+            />
+            <ArrowRight style={marginLeft} />
+          </>
+        }
+      />
+    </Cell.Group>
+  )
+}
+export default Demo5
+
+```
+    
+## DatePicker
+
+### Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| defaultValue | 初始值 | `Date` | `null` |
+| value | 受控 | `Date` | `null` |
+| visible | 是否可见 | `boolean` | `false` |
+| type | 类时间类型，可选值 date time year-month month-day datehour datetime hour-minutes | `string` | `date` |
+| minuteStep | 分钟步进值 | `number` | `1` |
+| showChinese | 每列是否展示中文 | `boolean` | `false` |
+| title | 设置标题 | `string` | `null` |
+| startDate | 开始日期 | `Date` | `十年前` |
+| endDate | 结束日期 | `Date` | `十年后` |
+| formatter | 选项格式化函数 | `(type: string, option: PickerOption) => PickerOption` | `-` |
+| pickerProps | 透传picker属性 | `object` | `-` |
+| filter | 选项过滤函数 | `(type: string, option: PickerOption) => PickerOption[]` | `-` |
+| threeDimensional | 是否开启3D效果 | `boolean` | `true` |
+| onConfirm | 点击确定按钮时触发 | `(options, value) => void` | `-` |
+| onCancel | 点击取消按钮时触发 | `() => void` | `-` |
+| onClose | 确定和取消时，都触发 | `(options, value) => void` | `-` |
+| onChange | 选项改变时触发 | `(options, value, index) => void` | `-` |