如何让AntD的DatePicker在Form中自动返回指定格式的日期数据

你之前自定义的dateFormat属性不生效的原因：Ant Design 的 DatePicker 本身没有这个 props 定义，传入自定义属性不会被组件识别处理，因此无法生效。

以下是三种可落地的实现方案： #

方法1：使用 Form.Item 的 normalize 属性（最推荐） #

normalize 是 Ant Design Form 内置的字段值转换属性，专门用于处理表单收集到的字段值格式，不会影响 DatePicker 本身的UI展示逻辑。
代码示例：

import { Form, DatePicker } from 'antd';
import moment from 'moment';

const DemoForm = () => {
  return (
    <Form>
      <Form.Item
        name="date"
        label="选择日期"
        // 核心转换逻辑：将DatePicker返回的moment对象转成指定格式字符串
        normalize={(value) => value ? moment(value).format('YYYY-MM-DD') : undefined}
      >
        {/* format属性只控制UI展示格式，和返回值格式可独立配置 */}
        <DatePicker format="YYYY-MM-DD" />
      </Form.Item>
    </Form>
  );
};

方法2：提交表单时统一转换 #

如果不想修改表单项配置，可以在表单提交回调中统一处理日期字段的格式：
代码示例：

import { Form, DatePicker } from 'antd';
import moment from 'moment';

const DemoForm = () => {
  const onFinish = (formValues) => {
    // 提交前统一转换日期格式
    const submitParams = {
      ...formValues,
      date: formValues.date ? moment(formValues.date).format('YYYY-MM-DD') : undefined
    };
    // 后续使用submitParams调用接口即可
    console.log('提交参数：', submitParams);
  };

  return (
    <Form onFinish={onFinish}>
      <Form.Item name="date" label="选择日期">
        <DatePicker format="YYYY-MM-DD" />
      </Form.Item>
      <Form.Item>
        <button type="submit">提交</button>
      </Form.Item>
    </Form>
  );
};

方法3：监听onChange手动更新表单值 #

你提到的修改onChange逻辑的方案可以实现，需要手动同步表单值和组件展示值：
代码示例：

import { Form, DatePicker } from 'antd';
import moment from 'moment';

const DemoForm = () => {
  const [form] = Form.useForm();

  const handleDateChange = (date) => {
    const formattedDate = date ? moment(date).format('YYYY-MM-DD') : undefined;
    // 手动将转换后的值写入表单
    form.setFieldsValue({ date: formattedDate });
  };

  return (
    <Form form={form}>
      <Form.Item name="date" label="选择日期">
        <DatePicker
          format="YYYY-MM-DD"
          onChange={handleDateChange}
          // 手动同步DatePicker的展示值，避免UI不更新
          value={form.getFieldValue('date') ? moment(form.getFieldValue('date'), 'YYYY-MM-DD') : undefined}
        />
      </Form.Item>
    </Form>
  );
};

该方案适合需要在日期选择时触发额外逻辑的场景，实现复杂度高于前两种方案，无特殊需求优先选择前两种。

内容的提问来源于stack exchange，提问作者Tzachi