ant-design/docs/react/generate-picker.en-US.md

order	title
5	Generate picker

How to use DatePicker with customize 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.