Ant Design 4升5换Day.js后出现clone.weekday is not a function错误

可行解决方案 #

1. 规范Day.js插件与Locale加载顺序
   在项目入口文件（如index.tsx/App.tsx）中优先加载Day.js插件，且只设置一次目标Locale，避免反复切换导致插件失效：

   import dayjs from 'dayjs';
   import weekday from 'dayjs/plugin/weekday';
   import localeData from 'dayjs/plugin/localeData';
   import 'dayjs/locale/vi'; // 预先引入需要的Locale文件
   
   // 先扩展插件，再设置Locale
   dayjs.extend(weekday);
   dayjs.extend(localeData);
   dayjs.locale('vi'); // 仅设置一次最终使用的Locale
   

2. 给react-hook-form默认值添加独立克隆实例
   避免默认日期实例被react-hook-form内部处理修改原型链，使用clone()创建独立的Day.js实例：

   const { control, handleSubmit, setValue, watch } = useForm<SearchFormInputValues>({
     defaultValues: {
       requestDate: [dayjs().clone(), dayjs().clone()],
     },
     resolver: yupResolver(schema),
   });
   

3. 优化自定义RangePicker的日期值传递
   在onChange和onCalendarChange回调中，对选择的日期进行克隆后再传递给react-hook-form，确保扩展方法保留：

   <RangePicker
     // ...其他属性
     onChange={(dates) => {
       field.onChange(dates?.map(date => date?.clone()) || []);
     }}
     onCalendarChange={(dates) => {
       field.onChange(dates?.map(date => date?.clone()) || []);
     }}
   />
   

问题根源 #

• Ant Design 5的RangePicker内部会克隆传入的日期值，如果原始Day.js实例的weekday插件未正确挂载（比如Locale切换重置了全局配置、实例创建在插件扩展之前），克隆后的对象会丢失该方法。
• react-hook-form初始化时会对默认值做内部处理，直接传递dayjs()创建的实例可能导致原型链上的扩展方法被覆盖。
• 反复调用dayjs.locale()会重置Day.js的全局原型，导致已创建的日期实例丢失插件扩展的方法。

内容的提问来源于stack exchange，提问作者Hồ Hoàng Việt Tiến