5.4 KiB
| order | title |
|---|---|
| 7.5 | 使用自定义日期库 |
Ant Design 默认使用 Day.js 来处理时间日期问题。Day.js 相比于 moment 使用了不可变数据结构，性能更快，体积仅 2KB，API 设计完全一致。你可以很方便的改用其他自定义日期库如（moment、date-fns、luxon）。在这里我们提供了两种方式来实现替换:
自定义组件
第一种方法是使用 generatePicker（或 generateCalendar）辅助创建 Picker 组件。
我们先初始化一个 create-react-app 的 antd demo，你可以参考 在 TypeScript 中使用 进行构建，也可以直接从这里开始init antd
DatePicker.tsx
新建 src/components/DatePicker.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。
编写如下代码:
import { DatePicker } from 'antd';
import type { PickerTimeProps } from 'antd/es/date-picker/generatePicker';
import type { Moment } from 'moment';
import React from 'react';
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。
编写如下代码:
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。
编写如下代码:
export { default as Calendar } from './Calendar';
export { default as DatePicker } from './DatePicker';
export { default as TimePicker } from './TimePicker';
使用自定义组件
修改 src/App.tsx，引入 moment 和自定义的组件。
- 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。
// 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。
编写如下代码:
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 组件：
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 行为：
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 行为可能会以意想不到的方式发生变化，因此请确保你测试过一些边界情况。