2020-01-02 16:05:59 +08:00
---
2023-08-04 19:27:38 +08:00
group:
title: 进阶使用
order: 3
2022-06-13 14:03:43 +08:00
title: 使用自定义日期库
2020-01-02 16:05:59 +08:00
---
2023-04-03 11:21:24 +08:00
Ant Design 默认使用 [Day.js ](https://day.js.org ) 来处理时间日期问题。Day.js 相比于 moment 使用了不可变数据结构,性能更快,体积仅 2KB, API 设计完全一致。你可以很方便的改用其他自定义日期库如([moment](http://momentjs.com/)、[date-fns](https://date-fns.org)、[luxon](https://moment.github.io/luxon/))。在这里我们提供了两种方式来实现替换:
2020-01-02 16:05:59 +08:00
2020-09-14 11:01:12 +08:00
## 自定义组件
2020-01-02 16:05:59 +08:00
第一种方法是使用 `generatePicker` (或 `generateCalendar` )辅助创建 Picker 组件。
我们先初始化一个 `create-react-app` 的 antd demo, 你可以参考 [在 TypeScript 中使用 ](/docs/react/use-in-typescript ) 进行构建,也可以直接从这里开始[init antd](https://github.com/xiaohuoni/antd4-generate-picker/commit/47fec964e36d48bd15760f8f5abcb9655c259aa6)
2020-09-14 11:01:12 +08:00
### DatePicker.tsx
2020-01-02 16:05:59 +08:00
新建 `src/components/DatePicker.tsx` 。
编写如下代码:
```tsx
2023-04-12 17:20:08 +08:00
import { DatePicker } from 'antd';
2023-01-11 16:48:09 +08:00
import type { Moment } from 'moment';
2023-04-12 17:20:08 +08:00
import momentGenerateConfig from 'rc-picker/lib/generate/moment';
2020-01-02 16:05:59 +08:00
2023-04-12 17:20:08 +08:00
const MyDatePicker = DatePicker.generatePicker< Moment > (momentGenerateConfig);
2020-01-02 16:05:59 +08:00
2023-04-12 17:20:08 +08:00
export default MyDatePicker;
2020-01-02 16:05:59 +08:00
```
2020-09-14 11:01:12 +08:00
### TimePicker.tsx
2020-01-02 16:05:59 +08:00
新建 `src/components/TimePicker.tsx` 。
编写如下代码:
```tsx
2023-04-05 14:01:38 +08:00
import { DatePicker } from 'antd';
2023-04-03 11:21:24 +08:00
import type { PickerTimeProps } from 'antd/es/date-picker/generatePicker';
2023-01-11 16:48:09 +08:00
import type { Moment } from 'moment';
2023-05-06 15:49:37 +08:00
import * as React from 'react';
2020-01-02 16:05:59 +08:00
2022-06-13 14:03:43 +08:00
export interface TimePickerProps extends Omit< PickerTimeProps < Moment > , 'picker'> {}
2020-01-02 16:05:59 +08:00
2023-01-11 16:48:09 +08:00
const TimePicker = React.forwardRef< any , TimePickerProps > ((props, ref) => (
< DatePicker { . . . props } picker = "time" mode = {undefined} ref = {ref} / >
));
2020-01-02 16:05:59 +08:00
TimePicker.displayName = 'TimePicker';
export default TimePicker;
```
2020-09-14 11:01:12 +08:00
### Calendar.tsx
2020-01-02 16:05:59 +08:00
新建 `src/components/Calendar.tsx` 。
编写如下代码:
```tsx
2023-04-12 17:20:08 +08:00
import { Calendar } from 'antd';
2023-01-11 16:48:09 +08:00
import type { Moment } from 'moment';
2022-06-13 14:03:43 +08:00
import momentGenerateConfig from 'rc-picker/es/generate/moment';
2020-01-02 16:05:59 +08:00
2023-04-12 17:20:08 +08:00
const MyCalendar = Calendar.generateCalendar< Moment > (momentGenerateConfig);
2020-01-02 16:05:59 +08:00
2023-04-12 17:20:08 +08:00
export default MyCalendar;
2020-01-02 16:05:59 +08:00
```
#### 导出自定义组件
新建 `src/components/index.tsx` 。
编写如下代码:
```tsx
export { default as Calendar } from './Calendar';
2023-04-03 11:21:24 +08:00
export { default as DatePicker } from './DatePicker';
2020-01-02 16:05:59 +08:00
export { default as TimePicker } from './TimePicker';
```
2020-09-14 11:01:12 +08:00
### 使用自定义组件
2020-01-02 16:05:59 +08:00
2022-06-13 14:03:43 +08:00
修改 `src/App.tsx` ,引入 `moment` 和自定义的组件。
2020-01-02 16:05:59 +08:00
```diff
- import { DatePicker, Calendar } from 'antd';
2022-06-13 14:03:43 +08:00
- import format from 'dayjs';
2020-01-02 16:05:59 +08:00
+ import { DatePicker, TimePicker, Calendar } from './components';
2022-06-13 14:03:43 +08:00
+ import format from 'moment';
2020-01-02 16:05:59 +08:00
```
2022-06-13 14:03:43 +08:00
## antd-moment-webpack-plugin
2020-01-02 16:05:59 +08:00
2022-06-13 14:03:43 +08:00
我们还提供另一种实现方式。使用 `@ant-design/moment-webpack-plugin` 插件,无需对现有代码做任何修改直接替换成 `Moment.js` 。请参考 [@ant-design/moment-webpack-plugin ](https://github.com/ant-design/antd-moment-webpack-plugin )。
2020-07-27 19:28:14 +08:00
2020-08-19 19:00:45 +08:00
```js
// webpack-config.js
2023-01-11 16:48:09 +08:00
const AntdMomentWebpackPlugin = require('@ant-design/moment-webpack-plugin');
2020-08-19 19:00:45 +08:00
module.exports = {
// ...
2022-06-13 14:03:43 +08:00
plugins: [new AntdMomentWebpackPlugin()],
2020-08-19 19:00:45 +08:00
};
```
2020-07-27 19:28:14 +08:00
## 使用 date-fns
2020-08-19 19:00:45 +08:00
[date-fns ](https://date-fns.org/ ) 目前支持和 dayjs 类似的自定义组件方法,区别在于使用的参数类型不同,在 antd 4.5.0 以上版本提供支持。
2020-07-27 19:28:14 +08:00
做一个简单的例子:
### DatePicker.tsx
新建 `src/components/DatePicker.tsx` 。
编写如下代码:
```tsx
2023-04-12 17:20:08 +08:00
import { DatePicker } from 'antd';
2023-04-03 11:21:24 +08:00
import dateFnsGenerateConfig from 'rc-picker/es/generate/dateFns';
2020-07-27 19:28:14 +08:00
2023-04-12 17:20:08 +08:00
const MyDatePicker = DatePicker.generatePicker< Date > (dateFnsGenerateConfig);
2020-07-27 19:28:14 +08:00
2023-04-12 17:20:08 +08:00
export default MyDatePicker;
2020-07-27 19:28:14 +08:00
```
2023-04-03 11:21:24 +08:00
## 使用 luxon
2023-04-03 22:36:57 +08:00
自 `antd 5.4.0` 起,可以使用 [luxon ](https://moment.github.io/luxon/ ) 代替 dayjs 并支持同样的功能,但它与 dayjs 有一些差异,我们将在下面解释:
2023-04-03 11:21:24 +08:00
### 执行
创建一个 `DatePicker.tsx` 文件,并定义一个基于 luxon 的 DatePicker 组件:
```tsx
2023-04-12 17:20:08 +08:00
import { DatePicker } from 'antd';
2023-04-03 11:21:24 +08:00
import type { DateTime } from 'luxon';
import luxonGenerateConfig from 'rc-picker/lib/generate/luxon';
2023-04-12 17:20:08 +08:00
const MyDatePicker = DatePicker.generatePicker< DateTime > (luxonGenerateConfig);
2023-04-03 11:21:24 +08:00
2023-04-12 17:20:08 +08:00
export default MyDatePicker;
2023-04-03 11:21:24 +08:00
```
2023-04-03 22:36:57 +08:00
### 与 dayjs 的差异
2023-04-03 11:21:24 +08:00
2023-04-05 14:01:38 +08:00
luxon 用户应该悉知,它本身没有 local 的实现。相反,它依赖于原生浏览器的 [Intl ](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Intl )。
2023-04-03 11:21:24 +08:00
2023-04-05 14:01:38 +08:00
这导致了与其他日期库的一些差异,主要区别是:
2023-04-03 11:21:24 +08:00
- 无论语言环境如何,一周的第一天总是星期一。
- 一年中的周数有时不同( ISO 周规则用于确定它)。
- 短工作日格式有时会因自定义区域而异(可能有 3 个字符而不是 2 个)。
- 选定的周标签格式会略有不同( 例如“2021-01”而不是“2021-1st”) 。
可以通过调整 luxon 配置来自定义这些默认的 luxon 行为:
```tsx
2023-04-12 17:20:08 +08:00
import { DatePicker } from 'antd';
2023-04-03 11:21:24 +08:00
import type { DateTime } from 'luxon';
import luxonGenerateConfig from 'rc-picker/lib/generate/luxon';
const customLuxonConfig = {
...luxonGenerateConfig,
2023-04-03 22:36:57 +08:00
getWeekFirstDay(locale) {
// 在这里编写你的自定义实现
2023-04-03 11:21:24 +08:00
},
};
2023-04-12 17:20:08 +08:00
const MyDatePicker = DatePicker.generatePicker< DateTime > (customLuxonConfig);
2023-04-03 11:21:24 +08:00
2023-04-12 17:20:08 +08:00
export default MyDatePicker;
2023-04-03 11:21:24 +08:00
```
请注意,通过进行此类自定义,生成的 DatePicker 行为可能会以意想不到的方式发生变化,因此请确保你测试过一些边界情况。