Ant Design－DatePicker

多練習多筆記。

基本取值

如果要在選取日期後取出值，可以用 onChange 來當作 handler。

這個 handler 會被傳入：

• moment，沒猜錯的話應該就是這個東西，所以有需要可以參考相關的 API
• dateString，像這樣的格式字串：2022-05-31

import React from 'react'
import { DatePicker, message } from 'antd'

function Main() {
  // 回傳入 moment 物件，不過這邊沒辦法指定所以才設為 any
  const handleChange = (current: any, dateString: string): void => {
    message.info(current ? `You select date is ${current.format('YYYY-MM-DD')}` : 'Not choose')
  }

  return <DatePicker onChange={handleChange} />
}

export default Main

限制範圍

假設我有兩個選項，一個是「開始日期（Start）」，一個是「結束日期（End）」。

基本上都會希望能選取的範圍是 Start 不可以「大於」End，End 不可以「小於」Start 這樣的規則，所以可以這樣寫：

import React from 'react'
import { Form, DatePicker } from 'antd'
import { useForm } from 'antd/lib/form/Form'

function Main() {
  const [form] = useForm()
  const getDisabledDateFrom = (current: moment.Moment): boolean => {
    // 如果 to 有值，把 to < from 的 disabled
    return !form.getFieldValue('dateTo')
      ? false
      : form.getFieldValue('dateTo').valueOf() - 86400000 < current.valueOf()
  }
  const getDisabledDateTo = (current: moment.Moment): boolean => {
    // 如果 from 有值，把 from > to 的 disabled
    return !form.getFieldValue('dateFrom')
      ? false
      : form.getFieldValue('dateFrom').valueOf() + 86400000 > current.valueOf()
  }

  return (
    <>
      <Form form={form} autoComplete='off' validateTrigger={['onBlur', 'onChnage']}>
        <Form.Item label='Date From' name='dateFrom'>
          <DatePicker disabledDate={getDisabledDateFrom} />
        </Form.Item>
        <Form.Item label='Date To' name='dateTo'>
          <DatePicker disabledDate={getDisabledDateTo} />
        </Form.Item>
      </Form>
    </>
  )
}

export default Main

這邊可以用 disabledDate 這個 props 來實作，裡面要傳入一個 function，並根據它的回傳值來決定是否可選。

• 回傳 true 的會被禁用
• 回傳 false 的會被啟用

簡單來說是這樣子。

至於這個 function 什麼時候會被觸發？你可以想成是點開 DataPiacker 的時候，所以你就得在這個時候來做處理，拿「開始日期」的這一段來解釋：

const getDisabledDateFrom = (current: moment.Moment): boolean => {
  // 如果 to 有值，把 to < from 的 disabled
  return !form.getFieldValue('dateTo')
    ? false
    : form.getFieldValue('dateTo').valueOf() - 86400000 < current.valueOf()
}

;<Form.Item label='Date From' name='dateFrom'>
  <DatePicker disabledDate={getDisabledDateFrom} />
</Form.Item>

我希望點開的時候做兩件事：

1. 先檢查「結束日期」有沒有值 form.getFieldValue('dateTo')
2. 如果有值，把比他早的日期都禁用掉
3. 沒有值的話，就不做任何事（retrun false）

這就是 getDisabledDateFrom 在做的事情。

裡面有用到 form 來取出欄位的值，這個是透過 useForm 來做的，有興趣可以參考 Ant Design－表單相關元件。

另外要順便提的是，DataPicker 的背其實後是透過 moment.js 來實作的，所以可以在 handler 中拿到 moment 這個物件，跟取欄位值的時候也是。總之只要利用相關的 method 來做處理，就能決定回傳 true / flase 了。

最後是個小補充，86400000 是一天的毫秒數，因為我不希望在 Start 選了 5/20 的時候 End 還可以選到 5/20（或反過來），所以才要往前 or 往後一天。