Ant Design中TypeError: date.locale is not a function错误解决求助

这个错误的核心原因是日期库混用：你同时使用了dayjs和moment处理日期，而Ant Design的DatePicker（v4+默认适配dayjs）无法识别moment对象，导致内部调用locale方法时出错。下面是具体解决步骤：

1. 统一使用dayjs作为日期处理库 #

AntD v4及之后版本官方推荐使用dayjs，完全替换moment，避免类型不兼容问题。确保已安装必要依赖：

npm install dayjs dayjs-plugin-tz
# 或
yarn add dayjs dayjs-plugin-tz

2. 修改日期处理代码，移除moment调用 #

直接用dayjs处理时区并生成DatePicker可识别的dayjs对象，无需转成字符串再转moment：

import dayjs from 'dayjs';
import timezone from 'dayjs/plugin/timezone';
import utc from 'dayjs/plugin/utc';

// 注册dayjs插件
dayjs.extend(utc);
dayjs.extend(timezone);

useEffect(() => {
  if (currentRecord?.birthday) {
    // 直接将UTC时间转成Asia/Dhaka时区的dayjs对象
    const birthday = dayjs(currentRecord.birthday).tz("Asia/Dhaka");
    // 给表单设置dayjs对象，而非moment或字符串
    form.setFieldsValue({ birthday });
    
    // 如果需要更新currentRecord，仅存储格式化后的字符串（可选，根据业务需求）
    setCurrentRecord(prev => ({
      ...prev,
      birthday: birthday.format("YYYY-MM-DD")
    }));
  }
}, [currentRecord?.birthday, form]);

3. 确保DatePicker的Locale配置正确 #

全局配置dayjs的locale，匹配DatePicker的语言：

import dayjs from 'dayjs';
import 'dayjs/locale/en';
import { ConfigProvider } from 'antd';
import datePickerLocale from 'antd/es/date-picker/locale/en_US';

// 设置dayjs全局locale
dayjs.locale('en');

// 在应用根组件外层包裹ConfigProvider
function App() {
  return (
    <ConfigProvider locale={datePickerLocale}>
      {/* 你的应用内容 */}
    </ConfigProvider>
  );
}

4. 避免循环渲染风险 #

原代码中setCurrentRecord会修改currentRecord，进而再次触发useEffect，可能导致循环更新。建议只在必要时更新currentRecord，或仅监听currentRecord?.birthday而非整个对象。

验证修改 #

完成上述调整后，DatePicker将接收dayjs对象，内部可正常调用locale方法，错误即可解决。

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