在Ant Design React中使用Form FormItem结合DatePicker遇校验问题

我来帮你搞定这个问题——你遇到的「publishDate is not a string」错误，核心原因是Ant Design的DatePicker默认返回的是Moment/Day.js日期对象，但Form的校验逻辑（尤其是异步校验器）默认期望字段值是字符串类型，两者不匹配就触发了报错。下面给你两个实用的解决方案：

方案一：使用normalize自动转换值为字符串 #

getFieldDecorator提供了normalize函数，可以在字段值更新时自动将DatePicker返回的日期对象转换为字符串，完美匹配校验要求：

<FormItem {...formItemLayout} label="Publish Date">
  {getFieldDecorator('publishDate', {
    initialValue: null, // 用null替代空字符串，更符合DatePicker的渲染预期
    rules: [
      { 
        required: false, 
        message: 'Please input publishDate', 
        whitespace: true, 
      },
    ],
    // 自动将日期对象转为指定格式的字符串
    normalize: (value) => {
      return value ? value.format('YYYY-MM-DD') : '';
    },
  })(<DatePicker onChange={onChange} />)}
</FormItem>

方案二：手动处理值的双向转换（适合需要保留日期对象操作的场景） #

如果你需要在组件内部对日期对象做额外操作，同时提交时转为字符串，可以结合getValueProps和手动设置字段值：

<FormItem {...formItemLayout} label="Publish Date">
  {getFieldDecorator('publishDate', {
    initialValue: null,
    rules: [
      { 
        required: false, 
        message: 'Please input publishDate', 
        whitespace: true, 
      },
    ],
    // 给DatePicker传递值时，把字符串转回日期对象
    getValueProps: (value) => {
      return {
        value: value ? moment(value) : null, // 若用Day.js则替换为dayjs(value)
      };
    },
  })(<DatePicker onChange={(date) => {
    // 选择日期后，手动将对象转为字符串并更新表单字段
    form.setFieldsValue({ 
      publishDate: date ? date.format('YYYY-MM-DD') : '' 
    });
  }} />)}
</FormItem>

额外注意事项 #

• 不要用空字符串''作为initialValue，DatePicker对null的兼容性更好，能避免不必要的渲染异常；
• 如果你的项目使用Day.js替代Moment，只需要把代码中的moment替换为dayjs即可，逻辑完全一致。

内容的提问来源于stack exchange，提问作者Seunghun Sunmoon Lee