替换 Moment.js

你可以用自定义日期库(day.jsdate-fns)替换 Moment 以优化打包大小。在这里我们提供了两种方式来实现替换:

自定义组件

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

我们先初始化一个 create-react-app 的 antd demo,你可以参考 在 TypeScript 中使用 进行构建,也可以直接从这里开始init antd

DatePicker.tsx

新建 src/components/DatePicker.tsx

编写如下代码:

  1. import { Dayjs } from 'dayjs';
  2. import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';
  3. import generatePicker from 'antd/es/date-picker/generatePicker';
  4. import 'antd/es/date-picker/style/index';
  5. const DatePicker = generatePicker<Dayjs>(dayjsGenerateConfig);
  6. export default DatePicker;

TimePicker.tsx

新建 src/components/TimePicker.tsx

编写如下代码:

  1. import { Dayjs } from 'dayjs';
  2. import * as React from 'react';
  3. import DatePicker from './DatePicker';
  4. import { PickerTimeProps } from 'antd/es/date-picker/generatePicker';
  5. import { Omit } from 'antd/es/_util/type';
  6. export interface TimePickerProps extends Omit<PickerTimeProps<Dayjs>, 'picker'> {}
  7. const TimePicker = React.forwardRef<any, TimePickerProps>((props, ref) => {
  8. return <DatePicker {...props} picker="time" mode={undefined} ref={ref} />;
  9. });
  10. TimePicker.displayName = 'TimePicker';
  11. export default TimePicker;

Calendar.tsx

新建 src/components/Calendar.tsx

编写如下代码:

  1. import { Dayjs } from 'dayjs';
  2. import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';
  3. import generateCalendar from 'antd/es/calendar/generateCalendar';
  4. import 'antd/es/calendar/style';
  5. const Calendar = generateCalendar<Dayjs>(dayjsGenerateConfig);
  6. export default Calendar;

导出自定义组件

新建 src/components/index.tsx

编写如下代码:

  1. export { default as DatePicker } from './DatePicker';
  2. export { default as Calendar } from './Calendar';
  3. export { default as TimePicker } from './TimePicker';

使用自定义组件

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

  1. - import { DatePicker, Calendar } from 'antd';
  2. - import format from 'moment';
  3. + import { DatePicker, TimePicker, Calendar } from './components';
  4. + import format from 'dayjs';

如果按照上述步骤无法正确运行的话,你可以参考antd4-generate-picker/antd-ts

如果你需要 JavaScript 代码,你可以参考 antd4-generate-picker/antd-demo

如果你熟悉 umi,你可以参考 antd4-use-dayjs-replace-moment

antd-dayjs-webpack-plugin

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

  1. // webpack-config.js
  2. import AntdDayjsWebpackPlugin from 'antd-dayjs-webpack-plugin';
  3. module.exports = {
  4. // ...
  5. plugins: [new AntdDayjsWebpackPlugin()],
  6. };

使用 date-fns

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

做一个简单的例子:

DatePicker.tsx

新建 src/components/DatePicker.tsx

编写如下代码:

  1. import dateFnsGenerateConfig from 'rc-picker/lib/generate/dateFns';
  2. import generatePicker from 'antd/es/date-picker/generatePicker';
  3. import 'antd/es/date-picker/style/index';
  4. const DatePicker = generatePicker<Date>(dateFnsGenerateConfig);
  5. export default DatePicker;