Ant Design v5.2.0报错date.locale is not a function问题求助

针对你遇到的date.locale is not a function错误以及DatePicker无法预填的问题，以下是几种可行的解决办法：

1. 对齐dayjs版本与Ant Design依赖版本 #

Ant Design v5内部依赖特定版本的dayjs，如果项目中安装的dayjs版本与Ant Design依赖的版本不匹配，会导致实例不兼容，触发该错误。

• 查看package-lock.json或yarn.lock中antd依赖的dayjs版本号（比如dayjs@1.11.7）
• 在项目中安装对应版本：

  npm install dayjs@指定版本号 --save
  # 或
  yarn add dayjs@指定版本号
  

2. 使用form.setFieldsValue延迟设置初始值 #

避免在initialValues中直接传入dayjs对象，改为组件挂载后通过Form实例设置：

import { useEffect } from 'react';

// ...

useEffect(() => {
  if (collaboration.dueDate) {
    formRef.current.setFieldsValue({
      dueDate: dayjs(collaboration.dueDate)
    });
  }
}, [collaboration.dueDate, formRef]);

// Form组件去掉initialValues中的dueDate处理
<Form
    form={formRef}
    onFinish={handleSubmit}
    initialValues={{...collaboration}}
>
    <Form.Item label="DatePicker" name="dueDate" rules={[{ required: true, message: 'Please select time!' }]}>
         <DatePicker style={{width: "100%"}}/>
    </Form.Item>
</Form>

3. 通过Form.Item的getValueProps转换值 #

利用getValueProps将字符串格式的日期转换为dayjs对象，这样initialValues可以直接传原始字符串：

<Form
    form={formRef}
    onFinish={handleSubmit}
    initialValues={{...collaboration}} // dueDate为原始字符串格式
>
    <Form.Item 
        label="DatePicker" 
        name="dueDate" 
        rules={[{ required: true, message: 'Please select time!' }]}
        getValueProps={(value) => ({
          value: value ? dayjs(value) : null
        })}
    >
         <DatePicker style={{width: "100%"}}/>
    </Form.Item>
</Form>

4. 检查dayjs locale导入与配置 #

确保你正确导入并设置了dayjs的locale，Ant Design的DatePicker依赖locale配置才能正常处理日期对象：

import dayjs from 'dayjs';
import 'dayjs/locale/zh-cn'; // 根据业务需求导入对应locale

dayjs.locale('zh-cn'); // 全局设置locale

内容的提问来源于stack exchange，提问作者Christian Köthe