logoAnt Design

⌘ K
  • 设计
  • 研发
  • 组件
  • 博客
  • 资源
  • 国内镜像
5.25.0
  • Ant Design of React
  • 更新日志
    v5.25.0
  • 如何使用
    • 快速上手
    • 在 Vite 中使用
    • 在 Next.js 中使用
      Updated
    • 在 Umi 中使用
    • 在 Rsbuild 中使用
    • 在 Farm 中使用
    • 使用 Refine
  • 进阶使用
    • 定制主题
    • 样式兼容
    • 服务端渲染
    • 使用 CSS 变量
      New
    • 使用自定义日期库
    • 国际化
    • 通用属性
    • React 19 兼容
      New
  • 迁移
    • 从 v4 到 v5
    • 从 Less 变量到 Design Token
  • 其他
    • 社区精选组件
    • 贡献指南
    • FAQ

使用自定义日期库

相关资源

Ant Design X
Ant Design Charts
Ant Design Pro
Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Web3
Ant Design Landing-首页模板集
Scaffolds-脚手架市场
Umi-React 应用开发框架
dumi-组件/文档研发工具
qiankun-微前端框架
Ant Motion-设计动效
国内镜像站点 🇨🇳

社区

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design 语雀专栏
Ant Design 知乎专栏
体验科技专栏
seeconf logoSEE Conf-蚂蚁体验科技大会
加入我们

帮助

GitHub
更新日志
常见问题
报告 Bug
议题
讨论区
StackOverflow
SegmentFault

Ant XTech logo更多产品

yuque logo语雀-构建你的数字花园
AntV logoAntV-数据可视化解决方案
Egg logoEgg-企业级 Node.js 框架
Kitchen logoKitchen-Sketch 工具集
Galacean logoGalacean-互动图形解决方案
xtech logo蚂蚁体验科技
主题编辑器
Made with ❤ by
蚂蚁集团和 Ant Design 开源社区
loading

Ant Design 默认使用 Day.js 来处理时间日期问题。Day.js 相比于 moment 使用了不可变数据结构,性能更快,体积仅 2KB,API 设计完全一致。你可以很方便的改用其他自定义日期库如(moment、date-fns、luxon)。在这里我们提供了两种方式来实现替换:

自定义组件

第一种方法是使用 generatePicker(或 generateCalendar)辅助创建 Picker 组件。

我们先初始化一个 antd demo,你可以参考 脚手架指南 进行构建,也可以直接从这里开始init antd

DatePicker.tsx

新建 src/components/DatePicker.tsx。

编写如下代码:

tsx
import { DatePicker } from 'antd';
import type { Moment } from 'moment';
import momentGenerateConfig from 'rc-picker/lib/generate/moment';
const MyDatePicker = DatePicker.generatePicker<Moment>(momentGenerateConfig);
export default MyDatePicker;

TimePicker.tsx

新建 src/components/TimePicker.tsx。

编写如下代码:

tsx
import * as React from 'react';
import type { PickerTimeProps } from 'antd/es/date-picker/generatePicker';
import type { Moment } from 'moment';
import DatePicker from './DatePicker';
export interface TimePickerProps extends Omit<PickerTimeProps<Moment>, 'picker'> {}
const TimePicker = React.forwardRef<any, TimePickerProps>((props, ref) => (
<DatePicker {...props} picker="time" mode={undefined} ref={ref} />
));
TimePicker.displayName = 'TimePicker';
export default TimePicker;

Calendar.tsx

新建 src/components/Calendar.tsx。

编写如下代码:

tsx
import { Calendar } from 'antd';
import type { Moment } from 'moment';
import momentGenerateConfig from 'rc-picker/es/generate/moment';
const MyCalendar = Calendar.generateCalendar<Moment>(momentGenerateConfig);
export default MyCalendar;

导出自定义组件

新建 src/components/index.tsx。

编写如下代码:

tsx
export { default as Calendar } from './Calendar';
export { default as DatePicker } from './DatePicker';
export { default as TimePicker } from './TimePicker';

使用自定义组件

修改 src/App.tsx,引入 moment 和自定义的组件。

diff
- import { DatePicker, Calendar } from 'antd';
- import format from 'dayjs';
+ import { DatePicker, TimePicker, Calendar } from './components';
+ import format from 'moment';

antd-moment-webpack-plugin

我们还提供另一种实现方式。使用 @ant-design/moment-webpack-plugin 插件,无需对现有代码做任何修改直接替换成 Moment.js。请参考 @ant-design/moment-webpack-plugin。

js
// webpack-config.js
const AntdMomentWebpackPlugin = require('@ant-design/moment-webpack-plugin');
module.exports = {
// ...
plugins: [new AntdMomentWebpackPlugin()],
};

使用 date-fns

date-fns 目前支持和 dayjs 类似的自定义组件方法,区别在于使用的参数类型不同,在 antd 4.5.0 以上版本提供支持。

做一个简单的例子:

DatePicker.tsx

新建 src/components/DatePicker.tsx。

编写如下代码:

tsx
import { DatePicker } from 'antd';
import dateFnsGenerateConfig from 'rc-picker/es/generate/dateFns';
const MyDatePicker = DatePicker.generatePicker<Date>(dateFnsGenerateConfig);
export default MyDatePicker;

使用 luxon

自 antd 5.4.0 起,可以使用 luxon 代替 dayjs 并支持同样的功能,但它与 dayjs 有一些差异,我们将在下面解释:

执行

创建一个 DatePicker.tsx 文件,并定义一个基于 luxon 的 DatePicker 组件:

tsx
import { DatePicker } from 'antd';
import type { DateTime } from 'luxon';
import luxonGenerateConfig from 'rc-picker/lib/generate/luxon';
const MyDatePicker = DatePicker.generatePicker<DateTime>(luxonGenerateConfig);
export default MyDatePicker;

与 dayjs 的差异

luxon 用户应该悉知,它本身没有 local 的实现。相反,它依赖于原生浏览器的 Intl。

这导致了与其他日期库的一些差异,主要区别是:

  • 无论语言环境如何,一周的第一天总是星期一。
  • 一年中的周数有时不同(ISO 周规则用于确定它)。
  • 短工作日格式有时会因自定义区域而异(可能有 3 个字符而不是 2 个)。
  • 选定的周标签格式会略有不同(例如“2021-01”而不是“2021-1st”)。

可以通过调整 luxon 配置来自定义这些默认的 luxon 行为:

tsx
import { DatePicker } from 'antd';
import type { DateTime } from 'luxon';
import luxonGenerateConfig from 'rc-picker/lib/generate/luxon';
const customLuxonConfig = {
...luxonGenerateConfig,
getWeekFirstDay(locale) {
// 在这里编写你的自定义实现
},
};
const MyDatePicker = DatePicker.generatePicker<DateTime>(customLuxonConfig);
export default MyDatePicker;

请注意,通过进行此类自定义,生成的 DatePicker 行为可能会以意想不到的方式发生变化,因此请确保你测试过一些边界情况。