Antd TimePicker结合Dayjs时间格式失效问题如何解决？

问题原因分析 #

1. 自定义格式解析插件缺失：Dayjs默认不支持自定义格式解析，若未引入customParseFormat插件，dayjs('00:00', timeFormat)会解析失败，导致组件拿到无效的Dayjs对象。
2. timeFormat变量不匹配：如果timeFormat的值与组件format属性（'HH:mm'）不一致，会造成时间解析错误。
3. 初始值类型错误：values.time初始值若不是Dayjs对象（比如是字符串或undefined），组件无法正确渲染时间，进而导致选择功能异常。

具体修复步骤 #

• 引入Dayjs自定义解析插件：
  在组件文件或项目入口中添加插件引入代码：

  import dayjs from 'dayjs';
  import customParseFormat from 'dayjs/plugin/customParseFormat';
  
  dayjs.extend(customParseFormat);
  

• 统一格式变量：
  确保timeFormat定义与组件format属性完全一致：

  const timeFormat = 'HH:mm';
  

• 修正初始值处理逻辑：
  保证组件value传入的是有效Dayjs对象，若初始值为空则兼容处理：

  <TimePicker
    name="time"
    id="cron-week-time"
    value={values.time ? dayjs(values.time, timeFormat) : dayjs('00:00', timeFormat)}
    onChange={(value) => {
      setFieldValue('time', value);
    }}
    defaultValue={dayjs('00:00', timeFormat)}
    format={timeFormat}
    showNow={false}
  />
  

• 检查版本兼容性：
  旧版Antd的TimePicker对Dayjs版本有要求，确保使用的Dayjs版本与Antd依赖版本兼容（例如Antd 4.x推荐搭配Dayjs 1.x系列版本）。

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