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

发布时间 2023-04-02 21:07:47作者: 青花雅月

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>