Use custom date library

Enable JavaScript to run this app.

By default, Ant Design uses Day.js to handle time and date. Day.js is an immutable date-time library alternative to Moment.js with the same API.

You might want to use another date library (Ant design currently supports moment, date-fns, and luxon ). We provide two ways to customize:

Custom component

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

First, we initialize an antd demo. You can refer to Scaffolding Guide, or you can start directly here init antd

DatePicker.tsx

Create src/components/DatePicker.tsx.

For example:

tsx

importmomentGenerateConfigfrom'@rc-component/picker/generate/moment';
import{DatePicker}from'antd';
importtype{Moment}from'moment';
constMyDatePicker=DatePicker.generatePicker<Moment>(momentGenerateConfig);
exportdefaultMyDatePicker;

TimePicker.tsx

Create src/components/TimePicker.tsx.

For example:

tsx

import*asReactfrom'react';
importtype{PickerTimeProps}from'antd/es/date-picker/generatePicker';
importtype{Moment}from'moment';
importDatePickerfrom'./DatePicker';
exportinterfaceTimePickerPropsextendsOmit<PickerTimeProps<Moment>,'picker'>{}
constTimePicker=React.forwardRef<any,TimePickerProps>((props, ref)=>(
<DatePicker{...props}picker="time"mode={undefined}ref={ref}/>
));
TimePicker.displayName='TimePicker';
exportdefaultTimePicker;

Calendar.tsx

Create src/components/Calendar.tsx.

For example:

tsx

importmomentGenerateConfigfrom'@rc-component/picker/generate/moment';
import{Calendar}from'antd';
importtype{Moment}from'moment';
constMyCalendar=Calendar.generateCalendar<Moment>(momentGenerateConfig);
exportdefaultMyCalendar;

Export Custom component

Create src/components/index.tsx.

For example:

tsx

export{defaultasCalendar}from'./Calendar';
export{defaultasDatePicker}from'./DatePicker';
export{defaultasTimePicker}from'./TimePicker';

Use Custom component

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

diff

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

antd-moment-webpack-plugin

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.

js

// webpack-config.js
constAntdMomentWebpackPlugin=require('@ant-design/moment-webpack-plugin');
module.exports={
// ...
plugins:[newAntdMomentWebpackPlugin()],
};

Use date-fns

date-fns 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.

For Example:

DatePicker.tsx

Create src/components/DatePicker.tsx.

Code as follows:

tsx

importdateFnsGenerateConfigfrom'@rc-component/picker/generate/dateFns';
import{DatePicker}from'antd';
constMyDatePicker=DatePicker.generatePicker<Date>(dateFnsGenerateConfig);
exportdefaultMyDatePicker;

Use luxon

Since antd 5.4.0, luxon can be used instead of dayjs and supports the same functionality, but it does introduce some differences in behavior that we will explain below.

Implementation

Create a src/components/DatePicker.tsx file, and implement the luxon based picker as follows:

tsx

importluxonGenerateConfigfrom'@rc-component/picker/generate/luxon';
import{DatePicker}from'antd';
importtype{DateTime}from'luxon';
constMyDatePicker=DatePicker.generatePicker<DateTime>(luxonGenerateConfig);
exportdefaultMyDatePicker;

Notable differences with dayjs

luxon users should be familiar with the fact that it does not come with a custom implementation for localization. Instead, it relies on the browser's native Intl API.

This introduces some formatting differences with the other date libraries. As of today, the main differences are:

First day of the week is always Monday regardless of locale.
Week of year number is sometimes different (ISO week rules are used to determine it).
Short week days format will sometimes be different for custom locales (it might have 3 characters instead of 2).
Selected week label format will be slightly different (e.g. "2021-01" instead of "2021-1st").

It is possible to customize these default luxon behaviors by adjusting the luxon config:

tsx

importluxonGenerateConfigfrom'@rc-component/picker/generate/luxon';
import{DatePicker}from'antd';
importtype{DateTime}from'luxon';
const customLuxonConfig ={
...luxonGenerateConfig,
getWeekFirstDay(locale){
// Your custom implementation goes here
},
};
constMyDatePicker=DatePicker.generatePicker<DateTime>(customLuxonConfig);
exportdefaultMyDatePicker;

Note that by doing such customization, the resulting DatePicker behavior might be altered in unexpected ways, so make sure you are testing for edge cases.