DatePicker/DatePickerPopup/DatePickerView 时间选择器 #

import {
  showToast,
  showDatePicker,
  SelectorModelValue,
  DatePickerOptionFilter,
  TaGroup,
  TaCell,
  TaDatePicker
} from '@/index'
import dayjs from 'dayjs'

const title = 'DatePicker'
const minDate = dayjs().startOf('day').subtract(4, 'year').toDate()
const maxDate = dayjs().startOf('day').add(5, 'year').toDate()
const disableValue = new Date()

export default function ExpDatePicker() {
  const filter: DatePickerOptionFilter = (number, type) => {
    if (type === 'second' && number % 5 !== 0) {
      return false
    }

    return true
  }

  function onChange(res: SelectorModelValue) {
    console.log('change', res)
    showToast(`值改为 ${res}`)
  }

  function onCallApi() {
    showDatePicker({
      title,
      success: res => {
        console.log(res)
        if (res.cancel) {
          showToast('取消了')
        } else {
          showToast(`选择了 ${res.detail.label}`)
        }
      }
    })
  }

  return (
    <>
      <TaGroup title="initialMode">
        <TaCell label="日期 date">
          <TaDatePicker initialMode="date" />
        </TaCell>
        <TaCell label="时间 time">
          <TaDatePicker initialMode="time" />
        </TaCell>
        <TaCell label="日期时间 datetime">
          <TaDatePicker initialMode="datetime" />
        </TaCell>
        <TaCell label="分秒 minute-second">
          <TaDatePicker initialMode="minute-second" />
        </TaCell>
        <TaCell label="时分 hour-minute">
          <TaDatePicker initialMode="hour-minute" />
        </TaCell>
        <TaCell label="天时 day-hour">
          <TaDatePicker initialMode="day-hour" />
        </TaCell>
        <TaCell label="月日 month-day">
          <TaDatePicker initialMode="month-day" />
        </TaCell>
        <TaCell label="月日时 month-day-hour">
          <TaDatePicker initialMode="month-day-hour" />
        </TaCell>
        <TaCell label="月日时分 month-day-hour-minute">
          <TaDatePicker initialMode="month-day-hour-minute" />
        </TaCell>
        <TaCell label="年月 year-month">
          <TaDatePicker initialMode="year-month" />
        </TaCell>
        <TaCell label="年月日时 year-month-day-hour">
          <TaDatePicker initialMode="year-month-day-hour" />
        </TaCell>
        <TaCell label="年月日时分 year-month-day-hour-minute">
          <TaDatePicker initialMode="year-month-day-hour-minute" />
        </TaCell>
      </TaGroup>
      <TaGroup title="minDate & maxDate">
        <TaCell label="-5year ~ 5year">
          <TaDatePicker
            initialMode="date"
            minDate={maxDate}
            maxDate={minDate}
          />
        </TaCell>
      </TaGroup>
      <TaGroup title="filter">
        <TaCell label="秒步进5">
          <TaDatePicker initialMode="datetime" filter={filter} />
        </TaCell>
      </TaGroup>
      <TaGroup title="formatTemplate">
        <TaCell label="YYYY年MM月DD日">
          <TaDatePicker
            initialMode="date"
            formatTemplate="YYYY年MM月DD日"
            v-model="formatValue"
          />
        </TaCell>
      </TaGroup>
      <TaGroup title="disabled">
        <TaCell label="禁用">
          <TaDatePicker initialMode="date" disabled value={disableValue} />
        </TaCell>
      </TaGroup>
      <TaGroup title="事件监听">
        <TaCell label="change">
          <TaDatePicker initialMode="datetime" onChange={onChange} />
        </TaCell>
      </TaGroup>
      <TaGroup title="API">
        <TaCell label="showDatePicker" isLink onClick={() => onCallApi()} />
      </TaGroup>
    </>
  )
}

import {
  showToast,
  SelectorModelValue,
  PickerOnConfirm,
  PopupOnVisibleStateChange,
  PopupOnCancel,
  TaCell,
  TaGroup,
  TaNoticeBar,
  TaDatePicker
} from '@/index'
import { useRef, useState } from 'react'

interface showArgs {
  visibleEvent?: boolean
  changeEvent?: boolean
  clickEvent?: boolean
}

export default function ExpDatePickerPopup() {
  const [popupValue, setPopupValue] = useState('')
  const [visible, setVisible] = useState(false)
  const clickEvent = useRef(false)
  const changeEvent = useRef(false)
  const visibleEvent = useRef(false)

  function onShow(args: showArgs = {}) {
    visibleEvent.current = !!args.visibleEvent
    changeEvent.current = !!args.changeEvent
    clickEvent.current = !!args.clickEvent

    setVisible(true)
  }

  const onVisibleStateChange: PopupOnVisibleStateChange = res => {
    if (visibleEvent.current) {
      console.log('onVisibleStateChange', res)
      showToast(`${res.state} 事件触发`)
    }

    if (res.state === 'hidden') {
      clickEvent.current = false
      visibleEvent.current = false
      changeEvent.current = false
    }
  }

  const onConfirm: PickerOnConfirm = res => {
    if (clickEvent.current) {
      console.log('onConfirm', res)
      showToast(`点击确定按钮`)
    }
  }

  function onChange(res: SelectorModelValue) {
    if (changeEvent.current) {
      console.log('onChange', res)
      showToast(`值改为 ${res}`)
    }

    setPopupValue(res as string)
  }

  const onCancel: PopupOnCancel = res => {
    if (clickEvent.current) {
      console.log('onCancel', res)

      if (res.source === 'cancelClick') {
        showToast('点击了取消按钮')
      } else if (res.source === 'maskClick') {
        showToast('点击了蒙层')
      }
    }
  }

  return (
    <>
      <TaNoticeBar
        className="top-notice-bar"
        title="基础展示参数可以参考 DatePicker"
      />
      <TaGroup title="基础用法">
        <TaCell label="默认" isLink onClick={() => onShow({})}>
          {popupValue}
        </TaCell>
      </TaGroup>
      <TaGroup title="事件监听">
        <TaCell
          label="onChange"
          isLink
          onClick={() => onShow({ changeEvent: true })}
        />
        <TaCell
          label="onConfirm/onCancel"
          isLink
          onClick={() => onShow({ clickEvent: true })}
        />
        <TaCell
          label="onVisibleStateChange"
          isLink
          onClick={() => onShow({ visibleEvent: true })}
        />
      </TaGroup>
      <TaDatePicker.Popup
        visible={visible}
        initialMode="date"
        formatTemplate="YYYY年MM月DD日"
        title="DatePickerPopup"
        value={popupValue}
        onChange={onChange}
        onConfirm={onConfirm}
        onCancel={onCancel}
        onVisibleStateChange={onVisibleStateChange}
        onUpdateVisible={v => setVisible(v)}
      />
    </>
  )
}

import {
  TaDatePicker,
  TaNoticeBar,
  TaGroup,
  showToast,
  SelectorModelValue
} from '@/index'

export default function ExpDatePickerView() {
  function onChange(e: SelectorModelValue) {
    console.log('change', e)
    showToast(`change: ${e}`)
  }

  return (
    <>
      <TaNoticeBar
        className="top-notice-bar"
        title="基础展示参数可以参考 DatePicker"
      />
      <TaGroup title="initialMode=datetime">
        <TaDatePicker.View initialMode="datetime" />
      </TaGroup>
      <TaGroup title="change 事件">
        <TaDatePicker.View initialMode="date" onChange={onChange} />
      </TaGroup>
    </>
  )
}