2020-01-02 16:05:59 +08:00
---
2021-09-01 10:56:50 +08:00
order: 7.5
2022-06-13 14:03:43 +08:00
title: Use custom date library
2020-01-02 16:05:59 +08:00
---
2022-11-18 23:11:31 +08:00
By default, Ant Design use [Day.js ](https://day.js.org ) to handle time and date. Day.js is an immutable date-time library alternative to Moment.js with the same API.
2022-06-13 14:03:43 +08:00
You might want to use another date library (**Ant design currently supports [moment ](http://momentjs.com/ ) and [date-fns ](https://date-fns.org )**). We provide two ways to customize:
2020-01-02 16:05:59 +08:00
2020-09-14 11:01:12 +08:00
## Custom component
2020-01-02 16:05:59 +08:00
2021-07-19 11:38:08 +08:00
The first way is to use `generatePicker` (or `generateCalendar` ) to help create Picker components.
2020-01-02 16:05:59 +08:00
2020-06-02 20:28:23 +08:00
First, we initialize an antd demo with `create-react-app` . You can refer to [Use in TypeScript ](/docs/react/use-in-typescript ), or you can start directly here [init antd ](https://github.com/xiaohuoni/antd4-generate-picker/commit/47fec964e36d48bd15760f8f5abcb9655c259aa6 )
2020-01-02 16:05:59 +08:00
2020-09-14 11:01:12 +08:00
### DatePicker.tsx
2020-01-02 16:05:59 +08:00
Create `src/components/DatePicker.tsx` .
For example:
```tsx
2022-06-13 14:03:43 +08:00
import type { Moment } from 'moment';
import momentGenerateConfig from 'rc-picker/lib/generate/moment';
2020-01-02 16:05:59 +08:00
import generatePicker from 'antd/es/date-picker/generatePicker';
2022-06-13 14:03:43 +08:00
const DatePicker = generatePicker< Moment > (momentGenerateConfig);
2020-01-02 16:05:59 +08:00
export default DatePicker;
```
2020-09-14 11:01:12 +08:00
### TimePicker.tsx
2020-01-02 16:05:59 +08:00
Create `src/components/TimePicker.tsx` .
For example:
```tsx
2022-06-13 14:03:43 +08:00
import type { Moment } from 'moment';
2020-01-02 16:05:59 +08:00
import * as React from 'react';
2022-06-13 14:03:43 +08:00
import type { PickerTimeProps } from 'antd/es/date-picker/generatePicker';
2020-01-02 16:05:59 +08:00
import DatePicker from './DatePicker';
2022-06-13 14:03:43 +08:00
export interface TimePickerProps extends Omit< PickerTimeProps < Moment > , 'picker'> {}
2020-01-02 16:05:59 +08:00
2022-06-13 14:03:43 +08:00
const TimePicker = React.forwardRef< any , TimePickerProps > ((props, ref) => (
< DatePicker { . . . props } picker = "time" mode = {undefined} ref = {ref} / >
));
2020-01-02 16:05:59 +08:00
TimePicker.displayName = 'TimePicker';
export default TimePicker;
```
2020-09-14 11:01:12 +08:00
### Calendar.tsx
2020-01-02 16:05:59 +08:00
Create `src/components/Calendar.tsx` .
For example:
```tsx
2022-06-13 14:03:43 +08:00
import type { Moment } from 'moment';
import momentGenerateConfig from 'rc-picker/lib/generate/moment';
2020-01-02 16:05:59 +08:00
import generateCalendar from 'antd/es/calendar/generateCalendar';
2022-06-13 14:03:43 +08:00
const Calendar = generateCalendar< Moment > (momentGenerateConfig);
2020-01-02 16:05:59 +08:00
export default Calendar;
```
2020-09-14 11:01:12 +08:00
### Export Custom component
2020-01-02 16:05:59 +08:00
Create `src/components/index.tsx` .
For example:
```tsx
export { default as DatePicker } from './DatePicker';
export { default as Calendar } from './Calendar';
export { default as TimePicker } from './TimePicker';
```
2020-09-14 11:01:12 +08:00
### Use Custom component
2020-01-02 16:05:59 +08:00
2022-06-13 14:03:43 +08:00
Modify `src/App.tsx` ,import `moment` and custom component.
2020-01-02 16:05:59 +08:00
```diff
- import { DatePicker, Calendar } from 'antd';
2022-06-13 14:03:43 +08:00
- import format from 'dayjs';
2020-01-02 16:05:59 +08:00
+ import { DatePicker, TimePicker, Calendar } from './components';
2022-06-13 14:03:43 +08:00
+ import format from 'moment';
2020-01-02 16:05:59 +08:00
```
2022-06-13 14:03:43 +08:00
## antd-moment-webpack-plugin
2020-01-02 16:05:59 +08:00
2022-06-13 14:03:43 +08:00
We also provide another implementation, which we provide with `@ant-design/moment-webpack-plugin` , replacing `Day.js` with `moment` directly without changing a line of existing code. More info can be found at [@ant-design/moment-webpack-plugin ](https://github.com/ant-design/antd-moment-webpack-plugin ).
2020-07-27 19:28:14 +08:00
2020-08-19 19:00:45 +08:00
```js
// webpack-config.js
2022-06-13 14:03:43 +08:00
import AntdMomentWebpackPlugin from '@ant-design/moment-webpack-plugin';
2020-08-19 19:00:45 +08:00
module.exports = {
// ...
2022-06-13 14:03:43 +08:00
plugins: [new AntdMomentWebpackPlugin()],
2020-08-19 19:00:45 +08:00
};
```
2020-07-27 19:28:14 +08:00
## Use date-fns
2020-08-19 19:00:45 +08:00
[date-fns ](https://date-fns.org/ ) currently supports custom component methods similar to `dayjs` . The difference is that the parameter types used are different. Support is provided in antd 4.5.0 and above.
2020-07-27 19:28:14 +08:00
For Example:
### DatePicker.tsx
Create `src/components/DatePicker.tsx` .
Code as follows:
```tsx
import dateFnsGenerateConfig from 'rc-picker/lib/generate/dateFns';
import generatePicker from 'antd/es/date-picker/generatePicker';
import 'antd/es/date-picker/style/index';
const DatePicker = generatePicker< Date > (dateFnsGenerateConfig);
export default DatePicker;
```