如何在提交表单后获取格式化后的Ant Design DatePicker值

AntD的DatePicker里的format属性仅负责控制界面显示样式，表单提交时默认返回的是日期对象（AntD v4用Moment，v5用Day.js），并非你设置的格式化字符串，所以需要手动转换格式，给你两种最实用的解决方法：

方法一：在Form.Item中配置自动转换 #

直接给Form.Item添加transform属性，提交时自动将日期对象转为指定格式的字符串，修改后的代码如下：

import { Button, Form, Input, DatePicker } from 'antd';
// 注意：AntD v4需引入moment，v5需引入dayjs，根据你的版本选择
// import moment from 'moment'; 
// import dayjs from 'dayjs';

const App = () => {
  const onFinish = (value) => {
     console.log(value); // 此时start-date就是格式化后的字符串
   };
return (
  <Form name="form_item_path" layout="vertical" onFinish={onFinish}>
     <Form.Item name="firstName" label="First Name">
        <Input />
     </Form.Item>
  <Form.Item 
    name="start-date"
    // 用对应日期库的format方法，v4用moment，v5用dayjs
    transform={(value) => value ? value.format("YYYY-MM-DD HH:mm:ss") : undefined}
  >
    <DatePicker className='input w-full' format="YYYY-MM-DD HH:mm:ss"/>
  </Form.Item>
  <Button type="primary" htmlType="submit">
     Submit
  </Button>
</Form>
);
};
export default App;

方法二：在提交回调中手动处理 #

如果不想修改Form.Item的配置，也可以在onFinish回调里自行转换日期格式：

import { Button, Form, Input, DatePicker } from 'antd';
import moment from 'moment'; // v4用此库，v5替换为dayjs

const App = () => {
  const onFinish = (value) => {
     // 转换日期对象为目标格式字符串
     const formattedData = {
       ...value,
       'start-date': value['start-date'] ? value['start-date'].format("YYYY-MM-DD HH:mm:ss") : undefined
     };
     console.log(formattedData);
   };
return (
  <Form name="form_item_path" layout="vertical" onFinish={onFinish}>
     <Form.Item name="firstName" label="First Name">
        <Input />
     </Form.Item>
  <Form.Item name="start-date">
    <DatePicker className='input w-full' format="YYYY-MM-DD HH:mm:ss"/>
  </Form.Item>
  <Button type="primary" htmlType="submit">
     Submit
  </Button>
</Form>
);
};
export default App;

两种方法都能获取到格式化后的日期字符串，推荐第一种，逻辑和表单字段绑定在一起，代码结构更清晰。

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