Ant Design React 使用自定義日期庫(kù)

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

自定義組件

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

我們先初始化一個(gè) create-react-app 的 antd demo，你可以參考 在 TypeScript 中使用 進(jìn)行構(gòu)建，也可以直接從這里開(kāi)始init antd

DatePicker.tsx

新建 src/components/DatePicker.tsx。

編寫(xiě)如下代碼:

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。

編寫(xiě)如下代碼:

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。

編寫(xiě)如下代碼:

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。

編寫(xiě)如下代碼:

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

我們還提供另一種實(shí)現(xiàn)方式。使用 @ant-design/moment-webpack-plugin 插件，無(wú)需對(duì)現(xiàn)有代碼做任何修改直接替換成 Moment.js。請(qǐng)參考 @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 類(lèi)似的自定義組件方法，區(qū)別在于使用的參數(shù)類(lèi)型不同，在 antd 4.5.0 以上版本提供支持。

做一個(gè)簡(jiǎn)單的例子：

DatePicker.tsx

新建 src/components/DatePicker.tsx。

編寫(xiě)如下代碼:

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 有一些差異，我們將在下面解釋?zhuān)?/p>

執(zhí)行

創(chuàng)建一個(gè) DatePicker.tsx 文件，并定義一個(gè)基于 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 用戶(hù)應(yīng)該悉知，它本身沒(méi)有 local 的實(shí)現(xiàn)。相反，它依賴(lài)于原生瀏覽器的 Intl。

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

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

可以通過(guò)調(diào)整 luxon 配置來(lái)自定義這些默認(rèn)的 luxon 行為：

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

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

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

export default MyDatePicker;

請(qǐng)注意，通過(guò)進(jìn)行此類(lèi)自定義，生成的 DatePicker 行為可能會(huì)以意想不到的方式發(fā)生變化，因此請(qǐng)確保你測(cè)試過(guò)一些邊界情況。