- Ant Design of React
- v5.21.3Changelog
- Basic Usage
- Advanced
- Migration
- Other
Use custom date library
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:
The first way is to use generatePicker
(or generateCalendar
) to help create Picker components.
First, we initialize an antd demo with create-react-app
. You can refer to Usage with create-react-app, or you can start directly here init antd
Create src/components/DatePicker.tsx
.
For example:
import { DatePicker } from 'antd';import type { Moment } from 'moment';import momentGenerateConfig from 'rc-picker/lib/generate/moment';const MyDatePicker = DatePicker.generatePicker<Moment>(momentGenerateConfig);export default MyDatePicker;
Create src/components/TimePicker.tsx
.
For example:
import * as React from 'react';import type { PickerTimeProps } from 'antd/es/date-picker/generatePicker';import type { Moment } from 'moment';import DatePicker from './DatePicker';export interface TimePickerProps extends Omit<PickerTimeProps<Moment>, 'picker'> {}const TimePicker = React.forwardRef<any, TimePickerProps>((props, ref) => (<DatePicker {...props} picker="time" mode={undefined} ref={ref} />));TimePicker.displayName = 'TimePicker';export default TimePicker;
Create src/components/Calendar.tsx
.
For example:
import { Calendar } from 'antd';import type { Moment } from 'moment';import momentGenerateConfig from 'rc-picker/es/generate/moment';const MyCalendar = Calendar.generateCalendar<Moment>(momentGenerateConfig);export default MyCalendar;
Create src/components/index.tsx
.
For example:
export { default as Calendar } from './Calendar';export { default as DatePicker } from './DatePicker';export { default as TimePicker } from './TimePicker';
Modify src/App.tsx
,import moment
and custom component.
- import { DatePicker, Calendar } from 'antd';- import format from 'dayjs';+ import { DatePicker, TimePicker, Calendar } from './components';+ import format from 'moment';
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.
// webpack-config.jsconst AntdMomentWebpackPlugin = require('@ant-design/moment-webpack-plugin');module.exports = {// ...plugins: [new AntdMomentWebpackPlugin()],};
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:
Create src/components/DatePicker.tsx
.
Code as follows:
import { DatePicker } from 'antd';import dateFnsGenerateConfig from 'rc-picker/lib/generate/dateFns';const MyDatePicker = DatePicker.generatePicker<Date>(dateFnsGenerateConfig);export default MyDatePicker;
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.
Create a src/components/DatePicker.tsx
file, and implement the luxon based picker as follows:
import { DatePicker } from 'antd';import type { DateTime } from 'luxon';import luxonGenerateConfig from 'rc-picker/lib/generate/luxon';const MyDatePicker = DatePicker.generatePicker<DateTime>(luxonGenerateConfig);export default MyDatePicker;
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:
It is possible to customize these default luxon behaviors by adjusting the luxon config:
import { DatePicker } from 'antd';import type { DateTime } from 'luxon';import luxonGenerateConfig from 'rc-picker/lib/generate/luxon';const customLuxonConfig = {...luxonGenerateConfig,getWeekFirstDay(locale) {// Your custom implementation goes here},};const MyDatePicker = DatePicker.generatePicker<DateTime>(customLuxonConfig);export default MyDatePicker;
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.