Ant-design 日期组件字段值转换

场景

在一般业务中，对于表单中的日期字段，后端保存的类型，或者说前端提交表单时传的类型是 string ；而在日期组件编辑阶段，使用的是 Dayjs 类型。此时就需要对表单组件做处理，使得新增表单时，提交的值是 string ；重新编辑表单内容时，自动把 string 类型的值转化为 Dayjs 类型，供日期组件使用

主要用到 Form.Item 的 getValueFromEvent getValueProps 两个属性

以下为示例代码

import { Button, DatePicker, Form, FormItemProps, Space } from 'antd'
import dayjs from 'dayjs'

// 日期
const DateFormItem: React.FC<FormItemProps> = (props) => {
  return (
    <Form.Item
      {...props}
      getValueFromEvent={(date, dateStr) => {
        console.log('====> getValueFromEvent', { date, dateStr })
        return dateStr || undefined
      }}
      getValueProps={(value?: string) => {
        console.log('====> getValueProps', { value })

        return {
          value: value ? dayjs(value) : undefined,
        }
      }}
    >
      <DatePicker />
    </Form.Item>
  )
}

// 日期范围
const DateRangeFormItem: React.FC<FormItemProps> = (props) => {
  return (
    <Form.Item
      {...props}
      getValueFromEvent={(dates, dateStrings) => {
        console.log('====> getValueFromEvent', { dates, dateStrings })
        return dateStrings || undefined
      }}
      getValueProps={(values?: string[]) => {
        console.log('====> getValueProps', { values })

        return {
          value: values ? [dayjs(values[0]), dayjs(values[1])] : undefined,
        }
      }}
    >
      <DatePicker.RangePicker />
    </Form.Item>
  )
}

export default function FieldBind() {
  const [form] = Form.useForm()

  const loadInitData = async () => {
    form.setFieldsValue({
      birthDay: '2023-01-01',
      dates: ['2023-01-01', '2023-01-02'],
    })
  }

  const onSubmit = async (values?: any) => {
    console.log('====> form submit', values)
  }

  return (
    <Form layout='vertical' form={form} onFinish={onSubmit}>
      <DateFormItem name='birthDay' label='单个日期' />
      <DateRangeFormItem name='dates' label='日期范围' />

      <Form.Item>
        <Space>
          <Button htmlType='submit'>提交</Button>
          <Button onClick={loadInitData}>加载表单初始值</Button>
        </Space>
      </Form.Item>
    </Form>
  )
}