Antd DatePicker 表单Value 转为 日期字符串格式

Antd 4.x 版本和 5.x 版本中 DatePicker value 类型分别是： moment 对象和 dayjs 对象类型，但通常提交表单时候，后端一般都要求是日期字符串格式“2022-08-09”这样； 普遍的做法是在提交表单 onFinish 方法里对表单提交参数进行 .format()转换为字符串；同时回填时候，还需要注意将后端返回 字符串日期 转换为 moment或dayjs对象格式。 如果页面在复杂一些，会导致 这种日期格式转换出现在不同地方，不利于管理维护；
 

解决方法：

这里可以Form.Item 借助 getValueFromEvent 和 getValueProps 属性对 DatePicker 组件value格式转换进行统一管理； 这样就可以直接用后端返回 日期字符串进行回填，同时提交表单时候自动会为 日期字符串 格式值，不需要在其他地方进行额外格式转换了。

// 错误使用  

<Form onFinish={handleSubmit} initialValues={{ date: "2023-04-29" }}>
      <Form.Item
        name="date"
        getValueFromEvent={(...[, dateString]) => 
           dateString;
        }
        getValueProps={(value) => ({
          value: value ? moment(value) : undefined
        })}
      >
        <DatePicker format="YYYY-MM-DD" />
      </Form.Item>
      <Button type="primary" htmlType="submit">
        提交
      </Button>
    </Form>

import dayjs from 'dayjs';


<Form.Item
    name='house_payment_time'
    label='交款时间'
    rules={[]}
    getValueFromEvent={(...[, dateString]) => dateString}
    getValueProps={(value) => ({value: value ? dayjs(value, 'YYYY-MM-DD') : undefined})}
>
    <DatePicker
        format={{
            format: 'YYYY-MM-DD',
            // type: 'mask',
        }}
    />
</Form.Item>