DatePicker数据回显（getValueProps）

Question

<Form.Item
                getValueProps={(val: string) => {
                  return { value: val ? moment(val) : undefined };
                }}
                getValueFromEvent={(date, dateString) => (date && moment(date).format('YYYY-MM-DD')) || undefined}
              >
                <DatePicker
                  inputReadOnly
                  style={{ width: '100%' }}
                  format="YYYY-MM-DD"      
                />
              </Form.Item>

我用getValueProps写了一个DatePicker的数据回显,有值传入就转成moment格式，回填到DatePicker，能成功触发。但是我再次提交表单的时候这个字段的值是字符串格式，很疑惑不应该已经被转成moment了吗？

Answer 1

引自免费微信小程序：皆我百晓生

在使用Ant Design的Form.Item和DatePicker组件时，你已经正确地设置了getValueProps来将字符串转换为moment对象以便回显到日期选择器中。然而，在表单提交时字段值仍为字符串格式，这是因为getValueProps主要用于控制表单控件自身的属性，并不直接影响表单字段的实际值。

在Ant Design的Form中，为了确保表单字段的值是期望的格式（这里是moment对象），你需要在Form.Item上设置正确的valuePropName属性。同时，你也应该在onFinish或onSubmit回调中处理数据提交前的格式转换。

<Form.Item
  name="yourDateField" // 假设这是你的表单字段名
  valuePropName="value"
  getValueProps={(val: string) => ({
    value: val ? moment(val) : undefined,
  })}
  getValueFromEvent={(date, dateString) => (date && moment(date).format('YYYY-MM-DD')) || undefined}
>
  <DatePicker inputReadOnly style={{ width: '100%' }} format="YYYY-MM-DD" />
</Form.Item>

// 在Form组件中处理表单提交逻辑
<Form onFinish={async (values) => {
  const formData = { ...values };
  formData.yourDateField = formData.yourDateField ? formData.yourDateField.format('YYYY-MM-DD') : undefined; // 将moment对象转为字符串
  // 现在formData.yourDateField是一个字符串，可以进行后续的数据提交操作
  // ...
}}>

通过这种方式，当你从表单获取字段值时，它会被自动转换为moment对象；而在提交表单时，你也可以手动将其转回字符串格式以满足服务器端或其他业务需求。