Antd DatePicker presets 参数报错解决方案

问题描述

在将 Ant Design (antd) 升级到最新版本后，使用 DatePicker 组件的 presets 参数时，遇到了以下错误：

clone.weekday is not a function

这个错误的原因是 dayjs 需要额外加载 weekday 和 localeData 插件才能正常使用这些功能。

解决方案

要解决这个问题，需要在项目中引入并启用必要的 dayjs 插件。具体步骤如下：

  1. 首先，在项目入口文件（如 index.js 或 App.jsx）中添加以下导入语句：
import dayjs from 'dayjs'
import weekday from "dayjs/plugin/weekday"
import localeData from "dayjs/plugin/localeData"
  1. 然后，启用这些插件：
dayjs.extend(weekday)
dayjs.extend(localeData)
  1. 现在就可以正常使用 DatePicker 的 presets 参数了。

使用示例

import { DatePicker } from 'antd';

const presets = [
  { label: '最近7天', value: dayjs().subtract(7, 'd') },
  { label: '最近30天', value: dayjs().subtract(30, 'd') },
  { label: '最近90天', value: dayjs().subtract(90, 'd') }
];

const Demo = () => (
  <DatePicker presets={presets} />
);

补充说明

  • 这个问题通常出现在 Antd 5.x 版本中
  • 确保你的项目已经正确安装了 dayjs 依赖
  • 这些插件的引入应该在应用初始化时就完成，建议放在项目的入口文件中

相关链接