* docs: update dayjs doc * docs: update dayjs doc * chore: update doc * chore: update doc * chore: update doc * chore: update doc
3.7 KiB
order | title |
---|---|
7.5 | Use custom date library |
Bu 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:
Custom component
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
DatePicker.tsx
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';
import 'antd/es/date-picker/style/index';
const DatePicker = generatePicker<Moment>(momentGenerateConfig);
export default DatePicker;
TimePicker.tsx
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;
Calendar.tsx
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';
import 'antd/es/calendar/style';
const Calendar = generateCalendar<Moment>(momentGenerateConfig);
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 moment
and custom component.
- 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.
// webpack-config.js
import AntdMomentWebpackPlugin from '@ant-design/moment-webpack-plugin';
module.exports = {
// ...
plugins: [new AntdMomentWebpackPlugin()],
};
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:
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;