Ant Design React 使用自定義日期庫

Ant Design 默認使用 Day.js 來處理時間日期問題。Day.js 相比于 moment 使用了不可變數(shù)據(jù)結(jié)構(gòu)，性能更快，體積僅 2KB，API 設(shè)計完全一致。你可以很方便的改用其他自定義日期庫如（moment、date-fns、luxon）。在這里我們提供了兩種方式來實現(xiàn)替換:

自定義組件

第一種方法是使用 generatePicker（或 generateCalendar）輔助創(chuàng)建 Picker 組件。

我們先初始化一個 create-react-app 的 antd demo，你可以參考 在 TypeScript 中使用 進行構(gòu)建，也可以直接從這里開始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 * 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。

編寫如下代碼:

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;

導(dǎo)出自定義組件

新建 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

我們還提供另一種實現(xiàn)方式。使用 @ant-design/moment-webpack-plugin 插件，無需對現(xiàn)有代碼做任何修改直接替換成 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 類似的自定義組件方法，區(qū)別在于使用的參數(shù)類型不同，在 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 有一些差異，我們將在下面解釋：

執(zhí)行

創(chuàng)建一個 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 用戶應(yīng)該悉知，它本身沒有 local 的實現(xiàn)。相反，它依賴于原生瀏覽器的 Intl。

這導(dǎo)致了與其他日期庫的一些差異，主要區(qū)別是：

• 無論語言環(huán)境如何，一周的第一天總是星期一。
• 一年中的周數(shù)有時不同（ISO 周規(guī)則用于確定它）。
• 短工作日格式有時會因自定義區(qū)域而異（可能有 3 個字符而不是 2 個）。
• 選定的周標(biāo)簽格式會略有不同（例如“2021-01”而不是“2021-1st”）。

可以通過調(diào)整 luxon 配置來自定義這些默認的 luxon 行為：

import { DatePicker } from 'antd';
import type { DateTime } from 'luxon';
import luxonGenerateConfig from 'rc-picker/lib/generate/luxon';

const customLuxonConfig = {
  ...luxonGenerateConfig,
  getWeekFirstDay(locale) {
    // 在這里編寫你的自定義實現(xiàn)
  },
};

const MyDatePicker = DatePicker.generatePicker<DateTime>(customLuxonConfig);

export default MyDatePicker;

請注意，通過進行此類自定義，生成的 DatePicker 行為可能會以意想不到的方式發(fā)生變化，因此請確保你測試過一些邊界情況。