date-picker 日期选择器

日期选择器组件（Date picker component）是一种用于在用户界面上选择日期的特定UI组件。它允许用户从一个日历或类似界面中选择日期，并将所选日期作为输入值。

Props参数

名称	类型	是否必传	默认值	描述
visible	boolean	✅	-	是否显示

示例

import { useEffect, useState } from 'react'
import { View } from '@tarojs/components'
import MMDatePicker from '~/components/date-picker'
import MMButton from '~/components/button'
import dayjs from 'dayjs'
import MMPageContainer from '../_components/page-container'
import PageDemoBlock from '../_components/page-demo-block'

export default () => {
  return (
    <MMPageContainer title="日期选择器">
      <CommonPicker />

      <TypePicker />

      <MinMaxPicker />
    </MMPageContainer>
  )
}

function CommonPicker() {
  const [visible, setVisible] = useState(false)
  const [value, setValue] = useState(dayjs().subtract(1, 'day').toDate())

  return (
    <PageDemoBlock title="基础使用">
      <MMButton onClick={() => setVisible(true)}>{dayjs(value).format('YYYY-MM-DD')}</MMButton>
      <MMDatePicker visible={visible} value={value} onChange={(va) => setValue(va)} onVisibleChange={setVisible} />
    </PageDemoBlock>
  )
}

function TypePicker() {
  const [value, setValue] = useState(dayjs().subtract(1, 'day').toDate())
  const [visible, setVisible] = useState(false)
  const [visible2, setVisible2] = useState(false)
  const [visible3, setVisible3] = useState(false)

  return (
    <View>
      <PageDemoBlock title="说明">组件支持 年、年月日、年月日时分类型</PageDemoBlock>
      <PageDemoBlock title="年">
        <MMButton onClick={() => setVisible(true)}>{dayjs(value).format('YYYY-MM-DD')}</MMButton>
        <MMDatePicker visible={visible} type="year" value={value} onChange={(va) => setValue(va)} onVisibleChange={setVisible} />
      </PageDemoBlock>

      <PageDemoBlock title="年月">
        <MMButton onClick={() => setVisible3(true)}>{dayjs(value).format('YYYY-MM')}</MMButton>
        <MMDatePicker visible={visible3} type="yearMonth" value={value} onChange={(va) => setValue(va)} onVisibleChange={setVisible3} />
      </PageDemoBlock>

      <PageDemoBlock title="年月日时分秒">
        <View>年月日时分类型 最好设置最大最小日期。 否则性能可能会有问题</View>
        <MMButton onClick={() => setVisible2(true)}>{dayjs(value).format('YYYY-MM-DD HH:mm:ss')}</MMButton>
        <MMDatePicker
          visible={visible2}
          type="dateHourMinute"
          value={value}
          maxDate={dayjs().add(1, 'year').toDate()}
          minDate={dayjs().subtract(5, 'year').toDate()}
          onChange={(va) => setValue(va)}
          onVisibleChange={setVisible2}
        />
      </PageDemoBlock>
    </View>
  )
}

function MinMaxPicker() {
  const [visible, setVisible] = useState(false)
  const [value, setValue] = useState(dayjs().toDate())

  return (
    <PageDemoBlock title="设置最大最小日期">
      <MMButton onClick={() => setVisible(true)}>{dayjs(value).format('YYYY-MM-DD')}</MMButton>

      <MMDatePicker
        visible={visible}
        value={value}
        onChange={(va) => setValue(va)}
        onVisibleChange={setVisible}
        maxDate={dayjs().add(1, 'year').toDate()}
        minDate={dayjs().subtract(5, 'year').toDate()}
      />
    </PageDemoBlock>
  )
}