By default, Ant Design use 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 and date-fns). 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 Use in TypeScript, or you can start directly here init antd
Create src/components/DatePicker.tsx
.
For example:
import type { Moment } from 'moment';import momentGenerateConfig from 'rc-picker/lib/generate/moment';import generatePicker from 'antd/es/date-picker/generatePicker';const DatePicker = generatePicker<Moment>(momentGenerateConfig);export default DatePicker;
Create src/components/TimePicker.tsx
.
For example:
import type { Moment } from 'moment';import * as React from 'react';import type { PickerTimeProps } from 'antd/es/date-picker/generatePicker';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 type { Moment } from 'moment';import momentGenerateConfig from 'rc-picker/lib/generate/moment';import generateCalendar from 'antd/es/calendar/generateCalendar';const Calendar = generateCalendar<Moment>(momentGenerateConfig);export default Calendar;
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';
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 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;