ant-design/docs/react/replace-moment.en-US.md

order	title
7.1	Replace Moment.js

How to use DatePicker with a custom date library like dayjs

Consider of bundle size, you can replace momentjs with customize date library. We provide two ways to customize date library:

Custom component

The first way is use generatePicker (or generateCalendar) helps to create Picker components.

First, we initialize an antd demo of create-react-app. You can refer to Use in TypeScript, or you can start directly here init antd

DatePicker.tsx

Create src/components/DatePicker.tsx.

For example:

import { Dayjs } from 'dayjs';
import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';
import generatePicker from 'antd/es/date-picker/generatePicker';
import 'antd/es/date-picker/style/index';

const DatePicker = generatePicker<Dayjs>(dayjsGenerateConfig);

export default DatePicker;

TimePicker.tsx

Create src/components/TimePicker.tsx.

For example:

import { Dayjs } from 'dayjs';
import * as React from 'react';
import DatePicker from './DatePicker';
import { PickerTimeProps } from 'antd/es/date-picker/generatePicker';
import { Omit } from 'antd/es/_util/type';

export interface TimePickerProps extends Omit<PickerTimeProps<Dayjs>, 'picker'> {}

const TimePicker = React.forwardRef<any, TimePickerProps>((props, ref) => {
  return <DatePicker {...props} picker="time" mode={undefined} ref={ref} />;
});

TimePicker.displayName = 'TimePicker';

export default TimePicker;

Calendar.tsx

Create src/components/Calendar.tsx.

For example:

import { Dayjs } from 'dayjs';
import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';
import generateCalendar from 'antd/es/calendar/generateCalendar';
import 'antd/es/calendar/style';

const Calendar = generateCalendar<Dayjs>(dayjsGenerateConfig);

export default Calendar;

Export Custom component

Create src/components/index.tsx.

For example:

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

Use Custom component

Modify src/App.tsx,import dayjs and custom component.

- import { DatePicker, Calendar } from 'antd';
- import format from 'moment';

+ import { DatePicker, TimePicker, Calendar } from './components';
+ import format from 'dayjs';

If the above steps do not work correctly, you can refer antd4-generate-picker/antd-ts.

If you need JavaScript code, you can refer antd4-generate-picker/antd-demo.

If you are the user of umi, you can ref antd4-use-dayjs-replace-moment.

Webpack plugin

We also provide another implementation. We provide antd-dayjs-webpack-plugin plugin to replace momentjs to Day.js directly without changing a line of existing code. More info at antd-dayjs-webpack-plugin.