logoAnt Design

⌘ K
  • Design
  • Development
  • Components
  • Blog
  • Resources
5.22.1
  • Ant Design of React
  • Changelog
    v5.22.1
  • Basic Usage
    • Getting Started
    • Usage with create-react-app
    • Usage with Vite
    • Usage with Next.js
      Updated
    • Usage with Umi
    • Usage with Rsbuild
      New
    • Usage with Farm
      New
    • Usage with Refine
      New
  • Advanced
    • Customize Theme
    • CSS Compatible
    • Server Side Rendering
    • CSS Variables
      New
    • Use custom date library
    • Internationalization
    • Common Props
  • Migration
    • V4 to V5
    • Less variables to Component Token
  • Other
    • Third-Party Libraries
    • Contributing
    • FAQ

Use custom date library

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
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

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 with create-react-app. You can refer to Usage with create-react-app, or you can start directly here init antd

DatePicker.tsx

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;

TimePicker.tsx

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;

Calendar.tsx

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;

Export Custom component

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

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 { DatePicker } from 'antd';
import dateFnsGenerateConfig from 'rc-picker/lib/generate/dateFns';


const MyDatePicker = DatePicker.generatePicker<Date>(dateFnsGenerateConfig);


export default MyDatePicker;

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:

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;

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:

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.