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>