Antd DatePicker自定义提交格式：setFieldsValue失效求助

阿华AIGC实验室

2026-5-14

解决Antd DatePicker自定义组件setFieldsValue不生效及提交前格式转换问题

我看了你的代码，问题主要出在自定义DatePicker组件的字段值绑定逻辑和日期值的双向转换处理上。下面给你一步步拆解问题并给出可行的解决方案：

问题根源分析

你在CustomDatePicker的onChange里手动调用setFieldsValue，这和Antd Form的getFieldDecorator自动值绑定逻辑冲突了，导致Form的状态不一致，进而setFieldsValue无法正确生效。
DatePicker默认接收moment对象作为value，但你存入Form的是时间戳，当从draft读取值并调用setFieldsValue时，时间戳无法被DatePicker识别，所以无法正确渲染。

解决方案：用Form的`normalize`做双向值转换

我们可以利用Antd Form提供的normalize函数，统一处理DatePicker显示值和Form存储值的双向转换，完全替代手动setFieldsValue的逻辑，同时解决setFieldsValue不生效的问题。

1. 修改`CustomDatePicker`组件

首先确保你已经安装了moment（Antd DatePicker依赖它）：npm install moment

import React from 'react';
import PropTypes from 'prop-types';
import { Form, DatePicker } from 'antd';
import moment from 'moment';

const CustomDatePicker = ({ form, label, src, colon, required, message }) => {
  const { getFieldDecorator } = form;

  // 核心：双向转换日期值
  const normalize = (value) => {
    if (!value) return null;
    
    // 当DatePicker选择日期时：把moment对象转成时间戳存入Form
    if (moment.isMoment(value)) {
      return value.valueOf();
    }
    
    // 当Form设置值时：把时间戳/字符串转成moment对象给DatePicker显示
    return moment(value);
  };

  return (
    <Form.Item label={label} colon={colon}>
      {getFieldDecorator(src, {
        rules: [{ required, message }],
        normalize, // 启用值转换
        valuePropName: 'value' // 指定DatePicker的value属性作为绑定字段
      })(<DatePicker />)}
    </Form.Item>
  );
};

CustomDatePicker.propTypes = {
  form: PropTypes.shape({
    getFieldDecorator: PropTypes.func.isRequired
  }),
  label: PropTypes.string,
  src: PropTypes.string.isRequired,
  colon: PropTypes.bool,
  required: PropTypes.bool,
  message: PropTypes.string
};

CustomDatePicker.defaultProps = {
  colon: true,
  required: false,
  message: null
};

export default CustomDatePicker;

2. 调整Create组件的逻辑（无需修改太多）

你的Create组件中useEffect里的setFieldsValue(draft)可以完全保留，因为normalize函数会自动把draft中的时间戳转换成moment对象，让DatePicker正确显示。

提交表单时，values中的birthday和dayInCompany已经是时间戳格式，直接传给后端即可；如果后端需要字符串格式（比如YYYY-MM-DD），只需修改normalize函数的转换逻辑：

// 转成字符串格式示例
const normalize = (value) => {
  if (!value) return null;
  
  if (moment.isMoment(value)) {
    return value.format('YYYY-MM-DD');
  }
  
  return moment(value, 'YYYY-MM-DD');
};