Antd 5.5.1 DatePicker绑定日期字符串报TypeError错误求助

错误原因 #

Ant Design 5.x版本的DatePicker基于Dayjs实现日期处理，当通过form.setFieldsValue传入字符串格式的日期时，组件会尝试调用该值的locale方法（Dayjs对象的内置方法），但字符串本身没有这个方法，因此抛出date.locale is not a function错误。

修复步骤 #

1. 导入Dayjs工具库 #

AntD 5默认依赖Dayjs，无需额外安装，直接在代码中导入：

import dayjs from 'dayjs';

2. 调整类型定义与数据转换 #

将EduModel中admission的类型从String改为Dayjs对象类型，同时初始化数据时把字符串日期转换为Dayjs实例：

// 修改接口类型
export interface EduModel {
  admission: dayjs.Dayjs | null;
}

// 初始化数据时转换格式
React.useEffect(() => {
  let edu1: EduModel = {
    admission: dayjs('1995-09-01')
  };
  setEdu(edu1);
}, []);

3. 优化表单赋值逻辑（可选） #

合并两个useEffect，避免重复渲染：

React.useEffect(() => {
  const edu1: EduModel = {
    admission: dayjs('1995-09-01')
  };
  setEdu(edu1);
  form.setFieldsValue(edu1);
}, [form]);

4. 提交时转回字符串（可选） #

如果后端需要字符串格式的日期，在onFinish中把Dayjs对象转换为字符串：

const onFinish = (values: any) => {
  const submitData = {
    ...values,
    admission: values.admission?.format('YYYY-MM-DD') || ''
  };
  // 提交逻辑
};

完整修复代码 #

import { DatePicker, Form } from "antd";
import React, { useState, useEffect } from "react";
import dayjs from 'dayjs';

export interface EduModel {
  admission: dayjs.Dayjs | null;
}

const App: React.FC = () => {
  const [edu, setEdu] = useState<EduModel>();
  const [form] = Form.useForm();

  const onFinish = (values: any) => {
    const submitData = {
      ...values,
      admission: values.admission?.format('YYYY-MM-DD') || ''
    };
    console.log('提交数据:', submitData);
  };

  const onFinishFailed = (errorInfo: any) => {
    console.error('表单提交失败:', errorInfo);
  };

  useEffect(() => {
    const edu1: EduModel = {
      admission: dayjs('1995-09-01')
    };
    setEdu(edu1);
    form.setFieldsValue(edu1);
  }, [form]);

  return (
    <div>
      <Form
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
        size="large"
        form={form}
      >
        <Form.Item
          label="admission"
          name="admission"
          rules={[
            { required: true, message: "请输入日期" }
          ]}>
          <DatePicker format="YYYY-MM-DD"></DatePicker>
        </Form.Item>
      </Form>
    </div>
  );
}

export default App;

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