logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.3.2
  • Ant Design of React
  • Getting Started
  • Real project with Umi
  • Use in create-react-app
  • Use in TypeScript
  • CSS Compatible
  • Customize Theme
  • Use custom date library
  • V4 to V5
  • Third-Party Libraries
  • Internationalization
  • FAQ
  • Contributing
  • Change Log
Custom component
DatePicker.tsx
TimePicker.tsx
Calendar.tsx
Export Custom component
Use Custom component
antd-moment-webpack-plugin
Use date-fns
DatePicker.tsx

Use custom date library

Customize ThemeV4 to V5

Resources

Ant Design Charts
Ant Design Pro
Ant Design Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
ahooks-React Hooks Library
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuqueAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconfSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTechMore Products

yuqueYuQue-Document Collaboration Platform
AntVAntV-Data Visualization
EggEgg-Enterprise Node.js Framework
kitchenKitchen-Sketch Toolkit
xtechAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community

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:

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';


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';


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
const AntdMomentWebpackPlugin = require('@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;