feat(moment-to-dayjs): replace date-time lib Moment.js with Day.js

components/calendar/__tests__/index.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
-import Moment from 'moment';
-import momentGenerateConfig from 'rc-picker/lib/generate/moment';
+import Dayjs from 'dayjs';
+import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';
 import { mount } from 'enzyme';
 import MockDate from 'mockdate';
 import Calendar from '..';
@@ -46,15 +46,15 @@ describe('Calendar', () => {
     wrapper.find('.ant-picker-cell').at(0).simulate('click');
     expect(onSelect).toHaveBeenCalledWith(expect.anything());
     const value = onSelect.mock.calls[0][0];
-    expect(Moment.isMoment(value)).toBe(true);
+    expect(Dayjs.isDayjs(value)).toBe(true);
     expect(onChange).toHaveBeenCalled();
   });
 
   it('only Valid range should be selectable', () => {
     const onSelect = jest.fn();
-    const validRange = [Moment('2018-02-02'), Moment('2018-02-18')];
+    const validRange = [Dayjs('2018-02-02'), Dayjs('2018-02-18')];
     const wrapper = mount(
-      <Calendar onSelect={onSelect} validRange={validRange} defaultValue={Moment('2018-02-02')} />,
+      <Calendar onSelect={onSelect} validRange={validRange} defaultValue={Dayjs('2018-02-02')} />,
     );
     wrapper.find('[title="2018-02-01"]').at(0).simulate('click');
     wrapper.find('[title="2018-02-02"]').at(0).simulate('click');
@@ -63,9 +63,9 @@ describe('Calendar', () => {
 
   it('dates other than in valid range should be disabled', () => {
     const onSelect = jest.fn();
-    const validRange = [Moment('2018-02-02'), Moment('2018-02-18')];
+    const validRange = [Dayjs('2018-02-02'), Dayjs('2018-02-18')];
     const wrapper = mount(
-      <Calendar onSelect={onSelect} validRange={validRange} defaultValue={Moment('2018-02-02')} />,
+      <Calendar onSelect={onSelect} validRange={validRange} defaultValue={Dayjs('2018-02-02')} />,
     );
     wrapper.find('[title="2018-02-20"]').at(0).simulate('click');
     const elem = wrapper.find('[title="2018-02-20"]').hasClass('ant-picker-cell-disabled');
@@ -75,12 +75,12 @@ describe('Calendar', () => {
 
   it('months other than in valid range should be disabled', () => {
     const onSelect = jest.fn();
-    const validRange = [Moment('2018-02-02'), Moment('2018-05-18')];
+    const validRange = [Dayjs('2018-02-02'), Dayjs('2018-05-18')];
     const wrapper = mount(
       <Calendar
         onSelect={onSelect}
         validRange={validRange}
-        defaultValue={Moment('2018-02-02')}
+        defaultValue={Dayjs('2018-02-02')}
         mode="year"
       />,
     );
@@ -95,7 +95,7 @@ describe('Calendar', () => {
   });
 
   it('months other than in valid range should not be shown in header', () => {
-    const validRange = [Moment('2017-02-02'), Moment('2018-05-18')];
+    const validRange = [Dayjs('2017-02-02'), Dayjs('2018-05-18')];
     const wrapper = mount(<Calendar validRange={validRange} />);
     openSelect(wrapper, '.ant-picker-calendar-year-select');
     clickSelectItem(wrapper);
@@ -105,30 +105,30 @@ describe('Calendar', () => {
   });
 
   it('getDateRange should returns a disabledDate function', () => {
-    const validRange = [Moment('2018-02-02'), Moment('2018-05-18')];
-    const wrapper = mount(<Calendar validRange={validRange} defaultValue={Moment('2018-02-02')} />);
+    const validRange = [Dayjs('2018-02-02'), Dayjs('2018-05-18')];
+    const wrapper = mount(<Calendar validRange={validRange} defaultValue={Dayjs('2018-02-02')} />);
     const { disabledDate } = wrapper.find('PickerPanel').props();
-    expect(disabledDate(Moment('2018-06-02'))).toBe(true);
-    expect(disabledDate(Moment('2018-04-02'))).toBe(false);
+    expect(disabledDate(Dayjs('2018-06-02'))).toBe(true);
+    expect(disabledDate(Dayjs('2018-04-02'))).toBe(false);
   });
 
   it('validRange should work with disabledDate function', () => {
-    const validRange = [Moment('2018-02-02'), Moment('2018-05-18')];
+    const validRange = [Dayjs('2018-02-02'), Dayjs('2018-05-18')];
     const wrapper = mount(
-      <Calendar validRange={validRange} disabledDate={data => data.isSame(Moment('2018-02-03'))} />,
+      <Calendar validRange={validRange} disabledDate={data => data.isSame(Dayjs('2018-02-03'))} />,
     );
 
     const { disabledDate } = wrapper.find('PickerPanel').props();
-    expect(disabledDate(Moment('2018-02-01'))).toBe(true);
-    expect(disabledDate(Moment('2018-02-02'))).toBe(false);
-    expect(disabledDate(Moment('2018-02-03'))).toBe(true);
-    expect(disabledDate(Moment('2018-02-04'))).toBe(false);
-    expect(disabledDate(Moment('2018-06-01'))).toBe(true);
+    expect(disabledDate(Dayjs('2018-02-01'))).toBe(true);
+    expect(disabledDate(Dayjs('2018-02-02'))).toBe(false);
+    expect(disabledDate(Dayjs('2018-02-03'))).toBe(true);
+    expect(disabledDate(Dayjs('2018-02-04'))).toBe(false);
+    expect(disabledDate(Dayjs('2018-06-01'))).toBe(true);
   });
 
   it('Calendar MonthSelect should display correct label', () => {
-    const validRange = [Moment('2018-02-02'), Moment('2019-06-1')];
-    const wrapper = mount(<Calendar validRange={validRange} defaultValue={Moment('2019-01-01')} />);
+    const validRange = [Dayjs('2018-02-02'), Dayjs('2019-06-1')];
+    const wrapper = mount(<Calendar validRange={validRange} defaultValue={Dayjs('2019-01-01')} />);
     expect(wrapper.render()).toMatchSnapshot();
   });
 
@@ -153,7 +153,7 @@ describe('Calendar', () => {
   });
 
   it('Calendar should support locale', () => {
-    MockDate.set(Moment('2018-10-19').valueOf());
+    MockDate.set(Dayjs('2018-10-19').valueOf());
     // eslint-disable-next-line global-require
     const zhCN = require('../locale/zh_CN').default;
     const wrapper = mount(<Calendar locale={zhCN} />);
@@ -164,7 +164,7 @@ describe('Calendar', () => {
   describe('onPanelChange', () => {
     it('trigger when click last month of date', () => {
       const onPanelChange = jest.fn();
-      const date = new Moment('1990-09-03');
+      const date = new Dayjs('1990-09-03');
       const wrapper = mount(<Calendar onPanelChange={onPanelChange} value={date} />);
 
       wrapper.find('.ant-picker-cell').at(0).simulate('click');
@@ -175,7 +175,7 @@ describe('Calendar', () => {
 
     it('not trigger when in same month', () => {
       const onPanelChange = jest.fn();
-      const date = new Moment('1990-09-03');
+      const date = new Dayjs('1990-09-03');
       const wrapper = mount(<Calendar onPanelChange={onPanelChange} value={date} />);
 
       wrapper.find('.ant-picker-cell').at(10).simulate('click');
@@ -186,7 +186,7 @@ describe('Calendar', () => {
 
   it('switch should work correctly without prop mode', async () => {
     const onPanelChange = jest.fn();
-    const date = new Moment(new Date(Date.UTC(2017, 7, 9, 8)));
+    const date = new Dayjs(new Date(Date.UTC(2017, 7, 9, 8)));
     const wrapper = mount(<Calendar onPanelChange={onPanelChange} value={date} />);
 
     expect(wrapper.find('CalendarHeader').props().mode).toBe('month');
@@ -204,7 +204,7 @@ describe('Calendar', () => {
     const wrapper = mount(
       <Header
         prefixCls="ant-picker-calendar"
-        generateConfig={momentGenerateConfig}
+        generateConfig={dayjsGenerateConfig}
         onChange={onValueChange}
         value={value}
         validRange={[start, end]}
@@ -216,32 +216,32 @@ describe('Calendar', () => {
   };
 
   it('if value.month > end.month, set value.month to end.month', () => {
-    const value = new Moment('1990-01-03');
-    const start = new Moment('2019-04-01');
-    const end = new Moment('2019-11-01');
+    const value = new Dayjs('1990-01-03');
+    const start = new Dayjs('2019-04-01');
+    const end = new Dayjs('2019-11-01');
     const onValueChange = jest.fn();
     createWrapper(start, end, value, onValueChange);
     expect(onValueChange).toHaveBeenCalledWith(value.year('2019').month('3'));
   });
 
   it('if start.month > value.month, set value.month to start.month', () => {
-    const value = new Moment('1990-01-03');
-    const start = new Moment('2019-11-01');
-    const end = new Moment('2019-03-01');
+    const value = new Dayjs('1990-01-03');
+    const start = new Dayjs('2019-11-01');
+    const end = new Dayjs('2019-03-01');
     const onValueChange = jest.fn();
     createWrapper(start, end, value, onValueChange);
     expect(onValueChange).toHaveBeenCalledWith(value.year('2019').month('10'));
   });
 
   it('if change year and new month > end month, set value.month to end.month', () => {
-    const value = new Moment('2018-11-03');
-    const start = new Moment('2000-01-01');
-    const end = new Moment('2019-03-01');
+    const value = new Dayjs('2018-11-03');
+    const start = new Dayjs('2000-01-01');
+    const end = new Dayjs('2019-03-01');
     const onValueChange = jest.fn();
     const wrapper = mount(
       <Header
         prefixCls="ant-picker-calendar"
-        generateConfig={momentGenerateConfig}
+        generateConfig={dayjsGenerateConfig}
         onChange={onValueChange}
         value={value}
         validRange={[start, end]}
@@ -254,14 +254,14 @@ describe('Calendar', () => {
   });
 
   it('onMonthChange should work correctly', () => {
-    const start = new Moment('2018-11-01');
-    const end = new Moment('2019-03-01');
-    const value = new Moment('2018-12-03');
+    const start = new Dayjs('2018-11-01');
+    const end = new Dayjs('2019-03-01');
+    const value = new Dayjs('2018-12-03');
     const onValueChange = jest.fn();
     const wrapper = mount(
       <Header
         prefixCls="ant-picker-calendar"
-        generateConfig={momentGenerateConfig}
+        generateConfig={dayjsGenerateConfig}
         onChange={onValueChange}
         value={value}
         validRange={[start, end]}
@@ -276,11 +276,11 @@ describe('Calendar', () => {
 
   it('onTypeChange should work correctly', () => {
     const onTypeChange = jest.fn();
-    const value = new Moment('2018-12-03');
+    const value = new Dayjs('2018-12-03');
     const wrapper = mount(
       <Header
         prefixCls="ant-picker-calendar"
-        generateConfig={momentGenerateConfig}
+        generateConfig={dayjsGenerateConfig}
         onModeChange={onTypeChange}
         locale={{ year: '年', month: '月', locale: 'zh_CN' }}
         value={value}

components/calendar/demo/select.md

@@ -15,12 +15,12 @@ A basic calendar component with Year/Month switch.
 
 ```jsx
 import { Calendar, Alert } from 'antd';
-import moment from 'moment';
+import dayjs from 'dayjs';
 
 class App extends React.Component {
   state = {
-    value: moment('2017-01-25'),
-    selectedValue: moment('2017-01-25'),
+    value: dayjs('2017-01-25'),
+    selectedValue: dayjs('2017-01-25'),
   };
 
   onSelect = value => {

components/calendar/index.en-US.md

@@ -18,9 +18,9 @@ When data is in the form of dates, such as schedules, timetables, prices calenda
 
 ```jsx
 // The default locale is en-US, if you want to use other locale, just set locale in entry file globally.
-// import moment from 'moment';
-// import 'moment/locale/zh-cn';
-// moment.locale('zh-cn');
+// import dayjs from 'dayjs';
+// import 'dayjs/locale/zh-cn';
+// dayjs.locale('zh-cn');
 
 <Calendar
   dateCellRender={dateCellRender}

components/calendar/index.tsx

@@ -1,8 +1,8 @@
-import { Moment } from 'moment';
-import momentGenerateConfig from 'rc-picker/lib/generate/moment';
+import type { Dayjs } from 'dayjs';
+import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';
 import generateCalendar, { CalendarProps } from './generateCalendar';
 
-const Calendar = generateCalendar<Moment>(momentGenerateConfig);
+const Calendar = generateCalendar<Dayjs>(dayjsGenerateConfig);
 
 export { CalendarProps };
 export default Calendar;

components/calendar/index.zh-CN.md

@@ -19,9 +19,9 @@ cover: https://gw.alipayobjects.com/zos/antfincdn/dPQmLq08DI/Calendar.svg
 
 ```jsx
 // 默认语言为 en-US，所以如果需要使用其他语言，推荐在入口文件全局设置 locale
-// import moment from 'moment';
-// import 'moment/locale/zh-cn';
-// moment.locale('zh-cn');
+// import dayjs from 'dayjs';
+// import 'dayjs/locale/zh-cn';
+// dayjs.locale('zh-cn');
 
 <Calendar
   dateCellRender={dateCellRender}

components/comment/demo/basic.md

@@ -16,7 +16,7 @@ A basic comment with author, avatar, time and actions.
 ```jsx
 import React, { createElement, useState } from 'react';
 import { Comment, Tooltip, Avatar } from 'antd';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { DislikeOutlined, LikeOutlined, DislikeFilled, LikeFilled } from '@ant-design/icons';
 
 const Demo = () => {
@@ -65,8 +65,8 @@ const Demo = () => {
         </p>
       }
       datetime={
-        <Tooltip title={moment().format('YYYY-MM-DD HH:mm:ss')}>
-          <span>{moment().fromNow()}</span>
+        <Tooltip title={dayjs().format('YYYY-MM-DD HH:mm:ss')}>
+          <span>{dayjs().fromNow()}</span>
         </Tooltip>
       }
     />

components/comment/demo/editor.md

@@ -15,7 +15,7 @@ Comment can be used as an editor, so the user can customize the contents of the
 
 ```jsx
 import { Comment, Avatar, Form, Button, List, Input } from 'antd';
-import moment from 'moment';
+import dayjs from 'dayjs';
 
 const { TextArea } = Input;
 
@@ -67,7 +67,7 @@ class App extends React.Component {
             author: 'Han Solo',
             avatar: 'https://joeschmoe.io/api/v1/random',
             content: <p>{this.state.value}</p>,
-            datetime: moment().fromNow(),
+            datetime: dayjs().fromNow(),
           },
         ],
       });

components/comment/demo/list.md

@@ -15,7 +15,7 @@ Displaying a series of comments using the `antd` List Component.
 
 ```jsx
 import { Comment, Tooltip, List } from 'antd';
-import moment from 'moment';
+import dayjs from 'dayjs';
 
 const data = [
   {
@@ -30,8 +30,8 @@ const data = [
       </p>
     ),
     datetime: (
-      <Tooltip title={moment().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss')}>
-        <span>{moment().subtract(1, 'days').fromNow()}</span>
+      <Tooltip title={dayjs().subtract(1, 'days').format('YYYY-MM-DD HH:mm:ss')}>
+        <span>{dayjs().subtract(1, 'days').fromNow()}</span>
       </Tooltip>
     ),
   },
@@ -47,8 +47,8 @@ const data = [
       </p>
     ),
     datetime: (
-      <Tooltip title={moment().subtract(2, 'days').format('YYYY-MM-DD HH:mm:ss')}>
-        <span>{moment().subtract(2, 'days').fromNow()}</span>
+      <Tooltip title={dayjs().subtract(2, 'days').format('YYYY-MM-DD HH:mm:ss')}>
+        <span>{dayjs().subtract(2, 'days').fromNow()}</span>
       </Tooltip>
     ),
   },

components/config-provider/__tests__/components.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { render } from 'enzyme';
-import moment from 'moment';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
 import ConfigProvider from '..';
 import Alert from '../../alert';
 import Anchor from '../../anchor';
@@ -55,6 +56,7 @@ import Tree from '../../tree';
 import TreeSelect from '../../tree-select';
 import Upload from '../../upload';
 
+dayjs.extend(customParseFormat);
 jest.mock('rc-util/lib/Portal');
 
 describe('ConfigProvider', () => {
@@ -181,8 +183,8 @@ describe('ConfigProvider', () => {
     // Calendar
     testPair('Calendar', props => (
       <div>
-        <Calendar {...props} value={moment('2000-09-03')} mode="month" />
-        <Calendar {...props} value={moment('2000-09-03')} mode="year" />
+        <Calendar {...props} value={dayjs('2000-09-03')} mode="month" />
+        <Calendar {...props} value={dayjs('2000-09-03')} mode="year" />
       </div>
     ));
 
@@ -540,7 +542,7 @@ describe('ConfigProvider', () => {
 
     // TimePicker
     testPair('TimePicker', props => (
-      <TimePicker {...props} open defaultOpenValue={moment('00:00:00', 'HH:mm:ss')} />
+      <TimePicker {...props} open defaultOpenValue={dayjs('00:00:00', 'HH:mm:ss')} />
     ));
 
     // Timeline

components/config-provider/demo/locale.md

@@ -30,10 +30,10 @@ import {
 } from 'antd';
 import enUS from 'antd/lib/locale/en_US';
 import zhCN from 'antd/lib/locale/zh_CN';
-import moment from 'moment';
-import 'moment/locale/zh-cn';
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
 
-moment.locale('en');
+dayjs.locale('en');
 
 const { Option } = Select;
 const { RangePicker } = DatePicker;
@@ -109,7 +109,7 @@ class Page extends React.Component {
           <Transfer dataSource={[]} showSearch targetKeys={[]} render={item => item.title} />
         </div>
         <div className="site-config-provider-calendar-wrapper">
-          <Calendar fullscreen={false} value={moment()} />
+          <Calendar fullscreen={false} value={dayjs()} />
         </div>
         <div className="example">
           <Table dataSource={[]} columns={columns} />
@@ -134,9 +134,9 @@ class App extends React.Component {
     const localeValue = e.target.value;
     this.setState({ locale: localeValue });
     if (!localeValue) {
-      moment.locale('en');
+      dayjs.locale('en');
     } else {
-      moment.locale('zh-cn');
+      dayjs.locale('zh-cn');
     }
   };
 

components/date-picker/__tests__/DatePicker.test.js

@@ -1,17 +1,20 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import moment from 'moment';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
 import MockDate from 'mockdate';
 import DatePicker from '..';
 import focusTest from '../../../tests/shared/focusTest';
 
+dayjs.extend(customParseFormat);
+
 describe('DatePicker', () => {
   const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
 
   focusTest(DatePicker, { refFocus: true });
 
   beforeEach(() => {
-    MockDate.set(moment('2016-11-22').valueOf());
+    MockDate.set(dayjs('2016-11-22').valueOf());
   });
 
   afterEach(() => {
@@ -59,13 +62,13 @@ describe('DatePicker', () => {
         placeholder: 'Избор на час',
       },
     };
-    const birthday = moment('2000-01-01', 'YYYY-MM-DD');
+    const birthday = dayjs('2000-01-01', 'YYYY-MM-DD');
     const wrapper = mount(<DatePicker open locale={locale} value={birthday} />);
     expect(wrapper.render()).toMatchSnapshot();
   });
 
   it('disabled date', () => {
-    const disabledDate = current => current && current < moment().endOf('day');
+    const disabledDate = current => current && current < dayjs().endOf('day');
     const wrapper = mount(<DatePicker disabledDate={disabledDate} open />);
     expect(wrapper.render()).toMatchSnapshot();
   });
@@ -78,7 +81,7 @@ describe('DatePicker', () => {
   it('showTime={{ showHour: true, showMinute: true }}', () => {
     const wrapper = mount(
       <DatePicker
-        defaultValue={moment()}
+        defaultValue={dayjs()}
         showTime={{ showHour: true, showMinute: true }}
         format="YYYY-MM-DD"
         open
@@ -98,7 +101,7 @@ describe('DatePicker', () => {
   it('showTime={{ showHour: true, showSecond: true }}', () => {
     const wrapper = mount(
       <DatePicker
-        defaultValue={moment()}
+        defaultValue={dayjs()}
         showTime={{ showHour: true, showSecond: true }}
         format="YYYY-MM-DD"
         open
@@ -118,7 +121,7 @@ describe('DatePicker', () => {
   it('showTime={{ showMinute: true, showSecond: true }}', () => {
     const wrapper = mount(
       <DatePicker
-        defaultValue={moment()}
+        defaultValue={dayjs()}
         showTime={{ showMinute: true, showSecond: true }}
         format="YYYY-MM-DD"
         open
@@ -136,7 +139,7 @@ describe('DatePicker', () => {
   });
   it('showTime should work correctly when format is custom function', () => {
     const wrapper = mount(
-      <DatePicker defaultValue={moment()} showTime format={val => val.format('YYYY-MM-DD')} open />,
+      <DatePicker defaultValue={dayjs()} showTime format={val => val.format('YYYY-MM-DD')} open />,
     );
     const input = wrapper.find('input').simulate('mousedown');
     expect(input.simulate.bind(input, 'focus')).not.toThrowError();
@@ -144,7 +147,7 @@ describe('DatePicker', () => {
 
   it('12 hours', () => {
     const wrapper = mount(
-      <DatePicker defaultValue={moment()} showTime format="YYYY-MM-DD HH:mm:ss A" open />,
+      <DatePicker defaultValue={dayjs()} showTime format="YYYY-MM-DD HH:mm:ss A" open />,
     );
     expect(wrapper.find('.ant-picker-time-panel-column').length).toBe(4);
     expect(
@@ -167,7 +170,7 @@ describe('DatePicker', () => {
 
   it('24 hours', () => {
     const wrapper = mount(
-      <DatePicker defaultValue={moment()} showTime format="YYYY-MM-DD HH:mm:ss" open />,
+      <DatePicker defaultValue={dayjs()} showTime format="YYYY-MM-DD HH:mm:ss" open />,
     );
     expect(wrapper.find('.ant-picker-time-panel-column').length).toBe(3);
     expect(
@@ -185,8 +188,8 @@ describe('DatePicker', () => {
   });
 
   it('DatePicker.RangePicker with defaultPickerValue and showTime', () => {
-    const startDate = moment('1982-02-12');
-    const endDate = moment('1982-02-22');
+    const startDate = dayjs('1982-02-12');
+    const endDate = dayjs('1982-02-22');
 
     const wrapper = mount(
       <DatePicker.RangePicker defaultPickerValue={[startDate, endDate]} showTime open />,

components/date-picker/__tests__/RangePicker.test.js

@@ -1,11 +1,14 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import moment from 'moment';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
 import DatePicker from '..';
 import { setMockDate, resetMockDate } from '../../../tests/utils';
 import { openPicker, selectCell, closePicker } from './utils';
 import focusTest from '../../../tests/shared/focusTest';
 
+dayjs.extend(customParseFormat);
+
 const { RangePicker } = DatePicker;
 
 describe('RangePicker', () => {
@@ -21,7 +24,7 @@ describe('RangePicker', () => {
 
   // issue: https://github.com/ant-design/ant-design/issues/5872
   it('should not throw error when value is reset to `[]`', () => {
-    const birthday = moment('2000-01-01', 'YYYY-MM-DD');
+    const birthday = dayjs('2000-01-01', 'YYYY-MM-DD');
     const wrapper = mount(<RangePicker value={[birthday, birthday]} open />);
     wrapper.setProps({ value: [] });
 
@@ -81,8 +84,8 @@ describe('RangePicker', () => {
       const wrapper = mount(
         <RangePicker
           ranges={{
-            Today: [moment(), moment()],
-            'This Month': [moment().startOf('month'), moment().endOf('month')],
+            Today: [dayjs(), dayjs()],
+            'This Month': [dayjs().startOf('month'), dayjs().endOf('month')],
           }}
           open
         />,

components/date-picker/__tests__/other.test.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import { mount, render } from 'enzyme';
-import moment from 'moment';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
 import DatePicker from '..';
 import LocaleProvider from '../../locale-provider';
 import locale from '../../locale-provider/zh_CN';
@@ -8,6 +9,8 @@ import ConfigProvider from '../../config-provider';
 import jaJP from '../../locale/ja_JP';
 import zhTW from '../locale/zh_TW';
 
+dayjs.extend(customParseFormat);
+
 const { MonthPicker, WeekPicker } = DatePicker;
 
 describe('Picker format by locale', () => {
@@ -22,7 +25,7 @@ describe('Picker format by locale', () => {
     },
   };
 
-  const date = moment('2000-01-01', 'YYYY-MM-DD');
+  const date = dayjs('2000-01-01', 'YYYY-MM-DD');
   function matchPicker(name, Picker, props) {
     it(name, () => {
       const wrapper = mount(
@@ -43,14 +46,14 @@ describe('Picker format by locale', () => {
 
 describe('MonthPicker and WeekPicker', () => {
   it('render MonthPicker', () => {
-    const birthday = moment('2000-01-01', 'YYYY-MM-DD').locale('zh-cn');
+    const birthday = dayjs('2000-01-01', 'YYYY-MM-DD').locale('zh-cn');
     const wrapper = mount(<MonthPicker open />);
     wrapper.setProps({ value: birthday });
     expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot();
   });
 
   it('render WeekPicker', () => {
-    const birthday = moment('2000-01-01', 'YYYY-MM-DD').locale('zh-cn');
+    const birthday = dayjs('2000-01-01', 'YYYY-MM-DD').locale('zh-cn');
     const wrapper = mount(<WeekPicker open />);
     wrapper.setProps({ value: birthday });
     expect(render(wrapper.find('Trigger').instance().getComponent())).toMatchSnapshot();

components/date-picker/__tests__/type.test.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Moment } from 'moment';
+import type { Dayjs } from 'dayjs';
 import DatePicker from '..';
 import { DatePickRef, RangePickerRef } from '../generatePicker/interface';
 
@@ -18,7 +18,7 @@ describe('DatePicker.typescript', () => {
 
   // https://github.com/ant-design/ant-design/issues/33417
   it('DatePicker ref methods with forwardRef', () => {
-    const MyDatePicker = React.forwardRef((props, ref: DatePickRef<Moment>) => (
+    const MyDatePicker = React.forwardRef((props, ref: DatePickRef<Dayjs>) => (
       <DatePicker {...props} ref={ref} />
     ));
     const datePicker = (
@@ -45,7 +45,7 @@ describe('DatePicker.typescript', () => {
   });
 
   it('RangePicker ref methods with forwardRef', () => {
-    const MyRangePicker = React.forwardRef((props, ref: RangePickerRef<Moment>) => (
+    const MyRangePicker = React.forwardRef((props, ref: RangePickerRef<Dayjs>) => (
       <DatePicker.RangePicker {...props} ref={ref} />
     ));
     const datePicker = (

components/date-picker/demo/disabled-date.md

@@ -14,8 +14,11 @@ title:
 Disabled part of dates and time by `disabledDate` and `disabledTime` respectively, and `disabledTime` only works with `showTime`.
 
 ```jsx
-import moment from 'moment';
 import { DatePicker, Space } from 'antd';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+
+dayjs.extend(customParseFormat);
 
 const { RangePicker } = DatePicker;
 
@@ -29,7 +32,7 @@ function range(start, end) {
 
 function disabledDate(current) {
   // Can not select days before today and today
-  return current && current < moment().endOf('day');
+  return current && current < dayjs().endOf('day');
 }
 
 function disabledDateTime() {
@@ -61,7 +64,7 @@ ReactDOM.render(
       format="YYYY-MM-DD HH:mm:ss"
       disabledDate={disabledDate}
       disabledTime={disabledDateTime}
-      showTime={{ defaultValue: moment('00:00:00', 'HH:mm:ss') }}
+      showTime={{ defaultValue: dayjs('00:00:00', 'HH:mm:ss') }}
     />
     <DatePicker picker="month" disabledDate={disabledDate} />
     <RangePicker disabledDate={disabledDate} />
@@ -70,7 +73,7 @@ ReactDOM.render(
       disabledTime={disabledRangeTime}
       showTime={{
         hideDisabledOptions: true,
-        defaultValue: [moment('00:00:00', 'HH:mm:ss'), moment('11:59:59', 'HH:mm:ss')],
+        defaultValue: [dayjs('00:00:00', 'HH:mm:ss'), dayjs('11:59:59', 'HH:mm:ss')],
       }}
       format="YYYY-MM-DD HH:mm:ss"
     />

components/date-picker/demo/disabled.md

@@ -15,21 +15,24 @@ A disabled state of the `DatePicker`. You can also set as array to disable one o
 
 ```jsx
 import { DatePicker, Space } from 'antd';
-import moment from 'moment';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+
+dayjs.extend(customParseFormat);
 
 const { RangePicker } = DatePicker;
 
 const dateFormat = 'YYYY-MM-DD';
 ReactDOM.render(
   <Space direction="vertical" size={12}>
-    <DatePicker defaultValue={moment('2015-06-06', dateFormat)} disabled />
-    <DatePicker picker="month" defaultValue={moment('2015-06', 'YYYY-MM')} disabled />
+    <DatePicker defaultValue={dayjs('2015-06-06', dateFormat)} disabled />
+    <DatePicker picker="month" defaultValue={dayjs('2015-06', 'YYYY-MM')} disabled />
     <RangePicker
-      defaultValue={[moment('2015-06-06', dateFormat), moment('2015-06-06', dateFormat)]}
+      defaultValue={[dayjs('2015-06-06', dateFormat), dayjs('2015-06-06', dateFormat)]}
       disabled
     />
     <RangePicker
-      defaultValue={[moment('2019-09-03', dateFormat), moment('2019-11-22', dateFormat)]}
+      defaultValue={[dayjs('2019-09-03', dateFormat), dayjs('2019-11-22', dateFormat)]}
       disabled={[false, true]}
     />
   </Space>,

components/date-picker/demo/format.md

@@ -15,7 +15,10 @@ We can set the date format by `format`.
 
 ```jsx
 import { DatePicker, Space } from 'antd';
-import moment from 'moment';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+
+dayjs.extend(customParseFormat);
 
 const { RangePicker } = DatePicker;
 
@@ -28,21 +31,21 @@ const dateFormatList = ['DD/MM/YYYY', 'DD/MM/YY'];
 const customFormat = value => `custom format: ${value.format(dateFormat)}`;
 
 const customWeekStartEndFormat = value =>
-  `${moment(value).startOf('week').format(weekFormat)} ~ ${moment(value)
+  `${dayjs(value).startOf('week').format(weekFormat)} ~ ${dayjs(value)
     .endOf('week')
     .format(weekFormat)}`;
 
 ReactDOM.render(
   <Space direction="vertical" size={12}>
-    <DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={dateFormat} />
-    <DatePicker defaultValue={moment('01/01/2015', dateFormatList[0])} format={dateFormatList} />
-    <DatePicker defaultValue={moment('2015/01', monthFormat)} format={monthFormat} picker="month" />
-    <DatePicker defaultValue={moment()} format={customWeekStartEndFormat} picker="week" />
+    <DatePicker defaultValue={dayjs('2015/01/01', dateFormat)} format={dateFormat} />
+    <DatePicker defaultValue={dayjs('01/01/2015', dateFormatList[0])} format={dateFormatList} />
+    <DatePicker defaultValue={dayjs('2015/01', monthFormat)} format={monthFormat} picker="month" />
+    <DatePicker defaultValue={dayjs()} format={customWeekStartEndFormat} picker="week" />
     <RangePicker
-      defaultValue={[moment('2015/01/01', dateFormat), moment('2015/01/01', dateFormat)]}
+      defaultValue={[dayjs('2015/01/01', dateFormat), dayjs('2015/01/01', dateFormat)]}
       format={dateFormat}
     />
-    <DatePicker defaultValue={moment('2015/01/01', dateFormat)} format={customFormat} />
+    <DatePicker defaultValue={dayjs('2015/01/01', dateFormat)} format={customFormat} />
   </Space>,
   mountNode,
 );

components/date-picker/demo/presetted-ranges.md

@@ -15,7 +15,7 @@ We can set preset ranges to RangePicker to improve user experience.
 
 ```jsx
 import { DatePicker, Space } from 'antd';
-import moment from 'moment';
+import dayjs from 'dayjs';
 
 const { RangePicker } = DatePicker;
 
@@ -28,15 +28,15 @@ ReactDOM.render(
   <Space direction="vertical" size={12}>
     <RangePicker
       ranges={{
-        Today: [moment(), moment()],
-        'This Month': [moment().startOf('month'), moment().endOf('month')],
+        Today: [dayjs(), dayjs()],
+        'This Month': [dayjs().startOf('month'), dayjs().endOf('month')],
       }}
       onChange={onChange}
     />
     <RangePicker
       ranges={{
-        Today: [moment(), moment()],
-        'This Month': [moment().startOf('month'), moment().endOf('month')],
+        Today: [dayjs(), dayjs()],
+        'This Month': [dayjs().startOf('month'), dayjs().endOf('month')],
       }}
       showTime
       format="YYYY/MM/DD HH:mm:ss"

components/date-picker/index.en-US.md

@@ -29,7 +29,7 @@ The default locale is en-US, if you need to use other languages, recommend to us
 If there are special needs (only modifying single component language), Please use the property: local. Example: [default](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json).
 
 ```jsx
-import 'moment/locale/zh-cn';
+import 'dayjs/locale/zh-cn';
 import locale from 'antd/es/date-picker/locale/zh_CN';
 
 <DatePicker locale={locale} />;
@@ -37,12 +37,12 @@ import locale from 'antd/es/date-picker/locale/zh_CN';
 
 ```jsx
 // The default locale is en-US, if you want to use other locale, just set locale in entry file globally.
-import moment from 'moment';
-import 'moment/locale/zh-cn';
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
 import locale from 'antd/lib/locale/zh_CN';
 
 <ConfigProvider locale={locale}>
-  <DatePicker defaultValue={moment('2015-01-01', 'YYYY-MM-DD')} />
+  <DatePicker defaultValue={dayjs('2015-01-01', 'YYYY-MM-DD')} />
 </ConfigProvider>;
 ```
 
@@ -56,9 +56,9 @@ The following APIs are shared by DatePicker, RangePicker.
 | autoFocus | If get focus when component mounted | boolean | false |  |
 | bordered | Whether has border style | boolean | true |  |
 | className | The picker className | string | - |  |
-| dateRender | Custom rendering function for date cells | function(currentDate: moment, today: moment) => React.ReactNode | - |  |
+| dateRender | Custom rendering function for date cells | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - |  |
 | disabled | Determine whether the DatePicker is disabled | boolean | false |  |
-| disabledDate | Specify the date that cannot be selected | (currentDate: moment) => boolean | - |  |
+| disabledDate | Specify the date that cannot be selected | (currentDate: dayjs) => boolean | - |  |
 | dropdownClassName | To customize the className of the popup calendar | string | - |  |
 | getPopupContainer | To set the container of the floating layer, while the default is to create a `div` element in `body` | function(trigger) | - |  |
 | inputReadOnly | Set the `readonly` attribute of the input tag (avoids virtual keyboard on touch devices) | boolean | false |  |
@@ -90,17 +90,17 @@ The following APIs are shared by DatePicker, RangePicker.
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| defaultPickerValue | To set default picker date | [moment](http://momentjs.com/) | - |  |
-| defaultValue | To set default date, if start time or end time is null or undefined, the date range will be an open interval | [moment](http://momentjs.com/) | - |  |
+| defaultPickerValue | To set default picker date | [dayjs](https://day.js.org/) | - |  |
+| defaultValue | To set default date, if start time or end time is null or undefined, the date range will be an open interval | [dayjs](https://day.js.org/) | - |  |
 | disabledTime | To specify the time that cannot be selected | function(date) | - |  |
-| format | To set the date format, refer to [moment.js](http://momentjs.com/). When an array is provided, all values are used for parsing and first value is used for formatting, support [Custom Format](#components-date-picker-demo-format) | string \| (value: moment) => string \| (string \| (value: moment) => string)\[] | `YYYY-MM-DD` |  |
+| format | To set the date format, refer to [dayjs](https://day.js.org/). When an array is provided, all values are used for parsing and first value is used for formatting, support [Custom Format](#components-date-picker-demo-format) | string \| (value: dayjs) => string \| (string \| (value: dayjs) => string)\[] | `YYYY-MM-DD` |  |
 | renderExtraFooter | Render extra footer in panel | (mode) => React.ReactNode | - |  |
 | showNow | Whether to show 'Now' button on panel when `showTime` is set | boolean | - | 4.4.0 |
 | showTime | To provide an additional time selection | object \| boolean | [TimePicker Options](/components/time-picker/#API) |  |
-| showTime.defaultValue | To set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/) | moment() |  |
+| showTime.defaultValue | To set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/) | dayjs() |  |
 | showToday | Whether to show `Today` button | boolean | true |  |
-| value | To set date | [moment](http://momentjs.com/) | - |  |
-| onChange | Callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - |  |
+| value | To set date | [dayjs](https://day.js.org/) | - |  |
+| onChange | Callback function, can be executed when the selected time is changing | function(date: dayjs, dateString: string) | - |  |
 | onOk | Callback when click ok button | function() | - |  |
 | onPanelChange | Callback function for panel changing | function(value, mode) | - |  |
 
@@ -108,12 +108,12 @@ The following APIs are shared by DatePicker, RangePicker.
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| defaultPickerValue | To set default picker date | [moment](http://momentjs.com/) | - |  |
-| defaultValue | To set default date | [moment](http://momentjs.com/) | - |  |
-| format | To set the date format, refer to [moment.js](http://momentjs.com/) | string | `YYYY` |  |
+| defaultPickerValue | To set default picker date | [dayjs](https://day.js.org/) | - |  |
+| defaultValue | To set default date | [dayjs](https://day.js.org/) | - |  |
+| format | To set the date format, refer to [dayjs](https://day.js.org/) | string | `YYYY` |  |
 | renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - |  |
-| value | To set date | [moment](http://momentjs.com/) | - |  |
-| onChange | Callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - |  |
+| value | To set date | [dayjs](https://day.js.org/) | - |  |
+| onChange | Callback function, can be executed when the selected time is changing | function(date: dayjs, dateString: string) | - |  |
 
 ### DatePicker\[picker=quarter]
 
@@ -121,55 +121,55 @@ Added in `4.1.0`.
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| defaultPickerValue | To set default picker date | [moment](http://momentjs.com/) | - |  |
-| defaultValue | To set default date | [moment](http://momentjs.com/) | - |  |
-| format | To set the date format, refer to [moment.js](http://momentjs.com/) | string | `YYYY-\QQ` |  |
+| defaultPickerValue | To set default picker date | [dayjs](https://day.js.org/) | - |  |
+| defaultValue | To set default date | [dayjs](https://day.js.org/) | - |  |
+| format | To set the date format, refer to [dayjs](https://day.js.org/) | string | `YYYY-\QQ` |  |
 | renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - |  |
-| value | To set date | [moment](http://momentjs.com/) | - |  |
-| onChange | Callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - |  |
+| value | To set date | [dayjs](https://day.js.org/) | - |  |
+| onChange | Callback function, can be executed when the selected time is changing | function(date: dayjs, dateString: string) | - |  |
 
 ### DatePicker\[picker=month]
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| defaultPickerValue | To set default picker date | [moment](http://momentjs.com/) | - |  |
-| defaultValue | To set default date | [moment](http://momentjs.com/) | - |  |
-| format | To set the date format, refer to [moment.js](http://momentjs.com/) | string | `YYYY-MM` |  |
+| defaultPickerValue | To set default picker date | [dayjs](https://day.js.org/) | - |  |
+| defaultValue | To set default date | [dayjs](https://day.js.org/) | - |  |
+| format | To set the date format, refer to [dayjs](https://day.js.org/) | string | `YYYY-MM` |  |
 | monthCellRender | Custom month cell content render method | function(date, locale): ReactNode | - |  |
 | renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - |  |
-| value | To set date | [moment](http://momentjs.com/) | - |  |
-| onChange | Callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - |  |
+| value | To set date | [dayjs](https://day.js.org/) | - |  |
+| onChange | Callback function, can be executed when the selected time is changing | function(date: dayjs, dateString: string) | - |  |
 
 ### DatePicker\[picker=week]
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
-| defaultPickerValue | To set default picker date | [moment](http://momentjs.com/) | - |  |
-| defaultValue | To set default date | [moment](http://momentjs.com/) | - |  |
-| format | To set the date format, refer to [moment.js](http://momentjs.com/) | string | `YYYY-wo` |  |
+| defaultPickerValue | To set default picker date | [dayjs](https://day.js.org/) | - |  |
+| defaultValue | To set default date | [dayjs](https://day.js.org/) | - |  |
+| format | To set the date format, refer to [dayjs](https://day.js.org/) | string | `YYYY-wo` |  |
 | renderExtraFooter | Render extra footer in panel | (mode) => React.ReactNode | - |  |
-| value | To set date | [moment](http://momentjs.com/) | - |  |
-| onChange | Callback function, can be executed when the selected time is changing | function(date: moment, dateString: string) | - |  |
+| value | To set date | [dayjs](https://day.js.org/) | - |  |
+| onChange | Callback function, can be executed when the selected time is changing | function(date: dayjs, dateString: string) | - |  |
 
 ### RangePicker
 
 | Property | Description | Type | Default | Version |
 | --- | --- | --- | --- | --- |
 | allowEmpty | Allow start or end input leave empty | \[boolean, boolean] | \[false, false] |  |
-| dateRender | Customize date cell. `info` argument is added in 4.3.0 | function(currentDate: moment, today: moment, info: { range: `start` \| `end` }) => React.ReactNode | - |  |
-| defaultPickerValue | To set default picker date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - |  |
-| defaultValue | To set default date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - |  |
+| dateRender | Customize date cell. `info` argument is added in 4.3.0 | function(currentDate: dayjs, today: dayjs, info: { range: `start` \| `end` }) => React.ReactNode | - |  |
+| defaultPickerValue | To set default picker date | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - |  |
+| defaultValue | To set default date | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - |  |
 | disabled | If disable start or end | \[boolean, boolean] | - |  |
-| disabledTime | To specify the time that cannot be selected | function(date: moment, partial: `start` \| `end`) | - |  |
-| format | To set the date format, refer to [moment.js](http://momentjs.com/). When an array is provided, all values are used for parsing and first value is used for formatting | string \| string\[] | `YYYY-MM-DD HH:mm:ss` |  |
-| ranges | The preseted ranges for quick selection | { \[range: string]: [moment](http://momentjs.com/)\[] } \| { \[range: string]: () => [moment](http://momentjs.com/)\[] } | - |  |
+| disabledTime | To specify the time that cannot be selected | function(date: dayjs, partial: `start` \| `end`) | - |  |
+| format | To set the date format, refer to [dayjs](https://day.js.org/). When an array is provided, all values are used for parsing and first value is used for formatting | string \| string\[] | `YYYY-MM-DD HH:mm:ss` |  |
+| ranges | The preseted ranges for quick selection | { \[range: string]: [dayjs](https://day.js.org/)\[] } \| { \[range: string]: () => [dayjs](https://day.js.org/)\[] } | - |  |
 | renderExtraFooter | Render extra footer in panel | () => React.ReactNode | - |  |
 | separator | Set separator between inputs | React.ReactNode | `<SwapRightOutlined />` |  |
 | showTime | To provide an additional time selection | object \| boolean | [TimePicker Options](/components/time-picker/#API) |  |
-| showTime.defaultValue | To set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)\[] | \[moment(), moment()] |  |
-| value | To set date | \[[moment](http://momentjs.com/), [moment](http://momentjs.com/)] | - |  |
-| onCalendarChange | Callback function, can be executed when the start time or the end time of the range is changing. `info` argument is added in 4.4.0 | function(dates: \[moment, moment], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - |  |
-| onChange | Callback function, can be executed when the selected time is changing | function(dates: \[moment, moment], dateStrings: \[string, string]) | - |  |
+| showTime.defaultValue | To set default time of selected date, [demo](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/)\[] | \[dayjs(), dayjs()] |  |
+| value | To set date | \[[dayjs](https://day.js.org/), [dayjs](https://day.js.org/)] | - |  |
+| onCalendarChange | Callback function, can be executed when the start time or the end time of the range is changing. `info` argument is added in 4.4.0 | function(dates: \[dayjs, dayjs], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - |  |
+| onChange | Callback function, can be executed when the selected time is changing | function(dates: \[dayjs, dayjs], dateStrings: \[string, string]) | - |  |
 
 ## FAQ
 

components/date-picker/index.tsx

@@ -1,16 +1,16 @@
-import { Moment } from 'moment';
-import momentGenerateConfig from 'rc-picker/lib/generate/moment';
+import type { Dayjs } from 'dayjs';
+import dayjsGenerateConfig from 'rc-picker/lib/generate/dayjs';
 import generatePicker, {
   PickerProps,
   PickerDateProps,
   RangePickerProps as BaseRangePickerProps,
 } from './generatePicker';
 
-export type DatePickerProps = PickerProps<Moment>;
-export type MonthPickerProps = Omit<PickerDateProps<Moment>, 'picker'>;
-export type WeekPickerProps = Omit<PickerDateProps<Moment>, 'picker'>;
-export type RangePickerProps = BaseRangePickerProps<Moment>;
+export type DatePickerProps = PickerProps<Dayjs>;
+export type MonthPickerProps = Omit<PickerDateProps<Dayjs>, 'picker'>;
+export type WeekPickerProps = Omit<PickerDateProps<Dayjs>, 'picker'>;
+export type RangePickerProps = BaseRangePickerProps<Dayjs>;
 
-const DatePicker = generatePicker<Moment>(momentGenerateConfig);
+const DatePicker = generatePicker<Dayjs>(dayjsGenerateConfig);
 
 export default DatePicker;

components/date-picker/index.zh-CN.md

@@ -30,7 +30,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/RT_USzA48/DatePicker.svg
 如有特殊需求（仅修改单一组件的语言），请使用 locale 参数，参考：[默认配置](https://github.com/ant-design/ant-design/blob/master/components/date-picker/locale/example.json)。
 
 ```jsx
-import 'moment/locale/zh-cn';
+import 'dayjs/locale/zh-cn';
 import locale from 'antd/es/date-picker/locale/zh_CN';
 
 <DatePicker locale={locale} />;
@@ -38,12 +38,12 @@ import locale from 'antd/es/date-picker/locale/zh_CN';
 
 ```jsx
 // 默认语言为 en-US，如果你需要设置其他语言，推荐在入口文件全局设置 locale
-import moment from 'moment';
-import 'moment/locale/zh-cn';
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
 import locale from 'antd/lib/locale/zh_CN';
 
 <ConfigProvider locale={locale}>
-  <DatePicker defaultValue={moment('2015-01-01', 'YYYY-MM-DD')} />
+  <DatePicker defaultValue={dayjs('2015-01-01', 'YYYY-MM-DD')} />
 </ConfigProvider>;
 ```
 
@@ -57,9 +57,9 @@ import locale from 'antd/lib/locale/zh_CN';
 | autoFocus | 自动获取焦点 | boolean | false |  |
 | bordered | 是否有边框 | boolean | true |  |
 | className | 选择器 className | string | - |  |
-| dateRender | 自定义日期单元格的内容 | function(currentDate: moment, today: moment) => React.ReactNode | - |  |
+| dateRender | 自定义日期单元格的内容 | function(currentDate: dayjs, today: dayjs) => React.ReactNode | - |  |
 | disabled | 禁用 | boolean | false |  |
-| disabledDate | 不可选择的日期 | (currentDate: moment) => boolean | - |  |
+| disabledDate | 不可选择的日期 | (currentDate: dayjs) => boolean | - |  |
 | dropdownClassName | 额外的弹出日历 className | string | - |  |
 | getPopupContainer | 定义浮层的容器，默认为 body 上新建 div | function(trigger) | - |  |
 | inputReadOnly | 设置输入框为只读（避免在移动设备上打开虚拟键盘） | boolean | false |  |
@@ -91,17 +91,17 @@ import locale from 'antd/lib/locale/zh_CN';
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - |  |
-| defaultValue | 默认日期，如果开始时间或结束时间为 `null` 或者 `undefined`，日期范围将是一个开区间 | [moment](http://momentjs.com/) | - |  |
+| defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/) | - |  |
+| defaultValue | 默认日期，如果开始时间或结束时间为 `null` 或者 `undefined`，日期范围将是一个开区间 | [dayjs](https://day.js.org/) | - |  |
 | disabledTime | 不可选择的时间 | function(date) | - |  |
-| format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [moment.js](http://momentjs.com/)，支持[自定义格式](#components-date-picker-demo-format) | string \| (value: moment) => string \| (string \| (value: moment) => string)\[] | `YYYY-MM-DD` |  |
+| format | 设置日期格式，为数组时支持多格式匹配，展示以第一个为准。配置参考 [dayjs](https://day.js.org/)，支持[自定义格式](#components-date-picker-demo-format) | string \| (value: dayjs) => string \| (string \| (value: dayjs) => string)\[] | `YYYY-MM-DD` |  |
 | renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - |  |
 | showNow | 当设定了 `showTime` 的时候，面板是否显示“此刻”按钮 | boolean | - | 4.4.0 |
 | showTime | 增加时间选择功能 | Object \| boolean | [TimePicker Options](/components/time-picker/#API) |  |
-| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/) | moment() |  |
+| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/) | dayjs() |  |
 | showToday | 是否展示“今天”按钮 | boolean | true |  |
-| value | 日期 | [moment](http://momentjs.com/) | - |  |
-| onChange | 时间发生变化的回调 | function(date: moment, dateString: string) | - |  |
+| value | 日期 | [dayjs](https://day.js.org/) | - |  |
+| onChange | 时间发生变化的回调 | function(date: dayjs, dateString: string) | - |  |
 | onOk | 点击确定按钮的回调 | function() | - |  |
 | onPanelChange | 日期面板变化时的回调 | function(value, mode) | - |  |
 
@@ -109,12 +109,12 @@ import locale from 'antd/lib/locale/zh_CN';
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - |  |
-| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - |  |
-| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | `YYYY` |  |
+| defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/) | - |  |
+| defaultValue | 默认日期 | [dayjs](https://day.js.org/) | - |  |
+| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/) | string | `YYYY` |  |
 | renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - |  |
-| value | 日期 | [moment](http://momentjs.com/) | - |  |
-| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - |  |
+| value | 日期 | [dayjs](https://day.js.org/) | - |  |
+| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs, dateString: string) | - |  |
 
 ### DatePicker\[picker=quarter]
 
@@ -122,55 +122,55 @@ import locale from 'antd/lib/locale/zh_CN';
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - |  |
-| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - |  |
-| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | `YYYY-\QQ` |  |
+| defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/) | - |  |
+| defaultValue | 默认日期 | [dayjs](https://day.js.org/) | - |  |
+| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/) | string | `YYYY-\QQ` |  |
 | renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - |  |
-| value | 日期 | [moment](http://momentjs.com/) | - |  |
-| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - |  |
+| value | 日期 | [dayjs](https://day.js.org/) | - |  |
+| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs, dateString: string) | - |  |
 
 ### DatePicker\[picker=month]
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - |  |
-| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - |  |
-| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | `YYYY-MM` |  |
+| defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/) | - |  |
+| defaultValue | 默认日期 | [dayjs](https://day.js.org/) | - |  |
+| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/) | string | `YYYY-MM` |  |
 | monthCellRender | 自定义的月份内容渲染方法 | function(date, locale): ReactNode | - |  |
 | renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - |  |
-| value | 日期 | [moment](http://momentjs.com/) | - |  |
-| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - |  |
+| value | 日期 | [dayjs](https://day.js.org/) | - |  |
+| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs, dateString: string) | - |  |
 
 ### DatePicker\[picker=week]
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
-| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/) | - |  |
-| defaultValue | 默认日期 | [moment](http://momentjs.com/) | - |  |
-| format | 展示的日期格式，配置参考 [moment.js](http://momentjs.com/) | string | `YYYY-wo` |  |
+| defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/) | - |  |
+| defaultValue | 默认日期 | [dayjs](https://day.js.org/) | - |  |
+| format | 展示的日期格式，配置参考 [dayjs](https://day.js.org/) | string | `YYYY-wo` |  |
 | renderExtraFooter | 在面板中添加额外的页脚 | (mode) => React.ReactNode | - |  |
-| value | 日期 | [moment](http://momentjs.com/) | - |  |
-| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: moment, dateString: string) | - |  |
+| value | 日期 | [dayjs](https://day.js.org/) | - |  |
+| onChange | 时间发生变化的回调，发生在用户选择时间时 | function(date: dayjs, dateString: string) | - |  |
 
 ### RangePicker
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 | --- | --- | --- | --- | --- |
 | allowEmpty | 允许起始项部分为空 | \[boolean, boolean] | \[false, false] |  |
-| dateRender | 自定义日期单元格的内容。`info` 参数自 4.3.0 添加 | function(currentDate: moment, today: moment, info: { range: `start` \| `end` }) => React.ReactNode | - |  |
-| defaultPickerValue | 默认面板日期 | [moment](http://momentjs.com/)\[] | - |  |
-| defaultValue | 默认日期 | [moment](http://momentjs.com/)\[] | - |  |
+| dateRender | 自定义日期单元格的内容。`info` 参数自 4.3.0 添加 | function(currentDate: dayjs, today: dayjs, info: { range: `start` \| `end` }) => React.ReactNode | - |  |
+| defaultPickerValue | 默认面板日期 | [dayjs](https://day.js.org/)\[] | - |  |
+| defaultValue | 默认日期 | [dayjs](https://day.js.org/)\[] | - |  |
 | disabled | 禁用起始项 | \[boolean, boolean] | - |  |
-| disabledTime | 不可选择的时间 | function(date: moment, partial: `start` \| `end`) | - |  |
+| disabledTime | 不可选择的时间 | function(date: dayjs, partial: `start` \| `end`) | - |  |
 | format | 展示的日期格式 | string | `YYYY-MM-DD HH:mm:ss` |  |
-| ranges | 预设时间范围快捷选择 | { \[range: string]: [moment](http://momentjs.com/)\[] } \| { \[range: string]: () => [moment](http://momentjs.com/)\[] } | - |  |
+| ranges | 预设时间范围快捷选择 | { \[range: string]: [dayjs](https://day.js.org/)\[] } \| { \[range: string]: () => [dayjs](https://day.js.org/)\[] } | - |  |
 | renderExtraFooter | 在面板中添加额外的页脚 | () => React.ReactNode | - |  |
 | separator | 设置分隔符 | React.ReactNode | `<SwapRightOutlined />` |  |
 | showTime | 增加时间选择功能 | Object\|boolean | [TimePicker Options](/components/time-picker/#API) |  |
-| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [moment](http://momentjs.com/)\[] | \[moment(), moment()] |  |
-| value | 日期 | [moment](http://momentjs.com/)\[] | - |  |
-| onCalendarChange | 待选日期发生变化的回调。`info` 参数自 4.4.0 添加 | function(dates: \[moment, moment], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - |  |
-| onChange | 日期范围发生变化的回调 | function(dates: \[moment, moment], dateStrings: \[string, string]) | - |  |
+| showTime.defaultValue | 设置用户选择日期时默认的时分秒，[例子](#components-date-picker-demo-disabled-date) | [dayjs](https://day.js.org/)\[] | \[dayjs(), dayjs()] |  |
+| value | 日期 | [dayjs](https://day.js.org/)\[] | - |  |
+| onCalendarChange | 待选日期发生变化的回调。`info` 参数自 4.4.0 添加 | function(dates: \[dayjs, dayjs], dateStrings: \[string, string], info: { range:`start`\|`end` }) | - |  |
+| onChange | 日期范围发生变化的回调 | function(dates: \[dayjs, dayjs], dateStrings: \[string, string]) | - |  |
 
 ## FAQ
 

components/locale-provider/__tests__/index.test.js

@@ -1,7 +1,7 @@
 /* eslint-disable react/no-multi-comp */
 import React from 'react';
 import { mount } from 'enzyme';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import MockDate from 'mockdate';
 import mountTest from '../../../tests/shared/mountTest';
 import {
@@ -178,13 +178,13 @@ const App = () => (
       <Option value="lucy">lucy</Option>
     </Select>
     <DatePicker open />
-    <TimePicker open defaultOpenValue={moment()} />
+    <TimePicker open defaultOpenValue={dayjs()} />
     <RangePicker open style={{ width: 200 }} />
     <Popconfirm title="Question?" visible>
       <a>Click to confirm</a>
     </Popconfirm>
     <Transfer dataSource={[]} showSearch targetKeys={[]} render={item => item.title} />
-    <Calendar fullscreen={false} value={moment()} />
+    <Calendar fullscreen={false} value={dayjs()} />
     <Table dataSource={[]} columns={columns} />
     <Modal title="Locale Modal" visible getContainer={false}>
       <p>Locale Modal</p>
@@ -200,7 +200,7 @@ describe('Locale Provider', () => {
   ));
 
   beforeAll(() => {
-    MockDate.set(moment('2017-09-18T03:30:07.795').valueOf());
+    MockDate.set(dayjs('2017-09-18T03:30:07.795').valueOf());
   });
 
   afterAll(() => {
@@ -256,7 +256,7 @@ describe('Locale Provider', () => {
     });
   });
 
-  it('set moment locale when locale changes', () => {
+  it('set dayjs locale when locale changes', () => {
     class Test extends React.Component {
       state = {
         locale: zhCN,
@@ -267,7 +267,7 @@ describe('Locale Provider', () => {
         return (
           <LocaleProvider locale={locale}>
             <div>
-              <DatePicker defaultValue={moment()} open />
+              <DatePicker defaultValue={dayjs()} open />
             </div>
           </LocaleProvider>
         );

components/modal/demo/dark.md

@@ -34,9 +34,12 @@ import {
   Typography,
   Dropdown,
 } from 'antd';
-import moment from 'moment';
 import difference from 'lodash/difference';
 import { DownOutlined, ClockCircleOutlined } from '@ant-design/icons';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+
+dayjs.extend(customParseFormat);
 
 const { Panel } = Collapse;
 const { TreeNode } = Tree;
@@ -582,7 +585,7 @@ class App extends React.Component {
             <Meta title="Europe Street beat" description="www.instagram.com" />
           </Card>
           <Slider defaultValue={30} />
-          <DatePicker defaultValue={moment('2015/01/01', 'YYYY/MM/DD')} format="YYYY/MM/DD" />
+          <DatePicker defaultValue={dayjs('2015/01/01', 'YYYY/MM/DD')} format="YYYY/MM/DD" />
           <Badge count={5}>
             <a href="#" className="head-example" />
           </Badge>

components/statistic/__tests__/index.test.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import MockDate from 'mockdate';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { mount } from 'enzyme';
 import Statistic from '..';
 import { formatTimeStr } from '../utils';
@@ -14,7 +14,7 @@ describe('Statistic', () => {
   rtlTest(Statistic);
 
   beforeAll(() => {
-    MockDate.set(moment('2018-11-28 00:00:00').valueOf());
+    MockDate.set(dayjs('2018-11-28 00:00:00').valueOf());
   });
 
   afterAll(() => {
@@ -64,7 +64,7 @@ describe('Statistic', () => {
 
   describe('Countdown', () => {
     it('render correctly', () => {
-      const now = moment().add(2, 'd').add(11, 'h').add(28, 'm').add(9, 's').add(3, 'ms');
+      const now = dayjs().add(2, 'd').add(11, 'h').add(28, 'm').add(9, 's').add(3, 'ms');
 
       [
         ['H:m:s', '59:28:9'],
@@ -149,7 +149,7 @@ describe('Statistic', () => {
         const onFinish = jest.fn();
         const wrapper = mount(<Statistic.Countdown value={now} onFinish={onFinish} />);
         wrapper.update();
-        MockDate.set(moment('2019-11-28 00:00:00').valueOf());
+        MockDate.set(dayjs('2019-11-28 00:00:00').valueOf());
         await sleep(100);
         expect(onFinish).toHaveBeenCalled();
       });

components/statistic/demo/countdown.md

@@ -17,7 +17,7 @@ Countdown component.
 import { Statistic, Row, Col } from 'antd';
 
 const { Countdown } = Statistic;
-const deadline = Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30; // Moment is also OK
+const deadline = Date.now() + 1000 * 60 * 60 * 24 * 2 + 1000 * 30; // Dayjs is also OK
 
 function onFinish() {
   console.log('finished!');

components/time-picker/__tests__/index.test.js

@@ -1,12 +1,15 @@
 import React from 'react';
 import { mount } from 'enzyme';
-import moment from 'moment';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
 import TimePicker from '..';
 import focusTest from '../../../tests/shared/focusTest';
 import mountTest from '../../../tests/shared/mountTest';
 import { resetWarned } from '../../_util/devWarning';
 import rtlTest from '../../../tests/shared/rtlTest';
 
+dayjs.extend(customParseFormat);
+
 describe('TimePicker', () => {
   const errorSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
 
@@ -39,7 +42,7 @@ describe('TimePicker', () => {
 
   it('not render clean icon when allowClear is false', () => {
     const wrapper = mount(
-      <TimePicker defaultValue={moment('2000-01-01 00:00:00')} allowClear={false} />,
+      <TimePicker defaultValue={dayjs('2000-01-01 00:00:00')} allowClear={false} />,
     );
     expect(wrapper.render()).toMatchSnapshot();
   });
@@ -57,7 +60,7 @@ describe('TimePicker', () => {
       placeholder: 'Избери дата',
     };
     const wrapper = mount(
-      <TimePicker defaultValue={moment('2000-01-01 00:00:00')} open locale={locale} />,
+      <TimePicker defaultValue={dayjs('2000-01-01 00:00:00')} open locale={locale} />,
     );
     expect(wrapper.render()).toMatchSnapshot();
   });
@@ -66,7 +69,7 @@ describe('TimePicker', () => {
     const popupClassName = 'myCustomClassName';
     const wrapper = mount(
       <TimePicker
-        defaultOpenValue={moment('00:00:00', 'HH:mm:ss')}
+        defaultOpenValue={dayjs('00:00:00', 'HH:mm:ss')}
         popupClassName={popupClassName}
       />,
     );
@@ -77,7 +80,7 @@ describe('TimePicker', () => {
     const popupClassName = 'myCustomClassName';
     const wrapper = mount(
       <TimePicker.RangePicker
-        defaultOpenValue={moment('00:00:00', 'HH:mm:ss')}
+        defaultOpenValue={dayjs('00:00:00', 'HH:mm:ss')}
         popupClassName={popupClassName}
       />,
     );
@@ -88,7 +91,7 @@ describe('TimePicker', () => {
     const wrapper = mount(
       <TimePicker
         className="custom-class"
-        defaultValue={moment('2000-01-01 00:00:00')}
+        defaultValue={dayjs('2000-01-01 00:00:00')}
         bordered={false}
       />,
     );

components/time-picker/demo/basic.md

@@ -15,14 +15,17 @@ Click `TimePicker`, and then we could select or input a time in panel.
 
 ```jsx
 import { TimePicker } from 'antd';
-import moment from 'moment';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+
+dayjs.extend(customParseFormat);
 
 function onChange(time, timeString) {
   console.log(time, timeString);
 }
 
 ReactDOM.render(
-  <TimePicker onChange={onChange} defaultOpenValue={moment('00:00:00', 'HH:mm:ss')} />,
+  <TimePicker onChange={onChange} defaultOpenValue={dayjs('00:00:00', 'HH:mm:ss')} />,
   mountNode,
 );
 ```

components/time-picker/demo/colored-popup.md

@@ -16,7 +16,10 @@ Passing custom class to `TimePicker` popup
 
 ```jsx
 import { TimePicker } from 'antd';
-import moment from 'moment';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+
+dayjs.extend(customParseFormat);
 
 const onChange = (time, timeString) => {
   console.log(time, timeString);
@@ -25,7 +28,7 @@ const onChange = (time, timeString) => {
 ReactDOM.render(
   <TimePicker
     onChange={onChange}
-    defaultOpenValue={moment('00:00:00', 'HH:mm:ss')}
+    defaultOpenValue={dayjs('00:00:00', 'HH:mm:ss')}
     popupClassName="myCustomClassName"
   />,
   mountNode,

components/time-picker/demo/disabled.md

@@ -15,7 +15,10 @@ A disabled state of the `TimePicker`.
 
 ```jsx
 import { TimePicker } from 'antd';
-import moment from 'moment';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
 
-ReactDOM.render(<TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} disabled />, mountNode);
+dayjs.extend(customParseFormat);
+
+ReactDOM.render(<TimePicker defaultValue={dayjs('12:08:23', 'HH:mm:ss')} disabled />, mountNode);
 ```

components/time-picker/demo/hide-column.md

@@ -15,9 +15,9 @@ While part of `format` is omitted, the corresponding column in panel will disapp
 
 ```jsx
 import { TimePicker } from 'antd';
-import moment from 'moment';
+import dayjs from 'dayjs';
 
 const format = 'HH:mm';
 
-ReactDOM.render(<TimePicker defaultValue={moment('12:08', format)} format={format} />, mountNode);
+ReactDOM.render(<TimePicker defaultValue={dayjs('12:08', format)} format={format} />, mountNode);
 ```

components/time-picker/demo/size.md

@@ -15,13 +15,13 @@ The input box comes in three sizes. large is used in the form, while the medium
 
 ```jsx
 import { TimePicker } from 'antd';
-import moment from 'moment';
+import dayjs from 'dayjs';
 
 ReactDOM.render(
   <>
-    <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} size="large" />
-    <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} />
-    <TimePicker defaultValue={moment('12:08:23', 'HH:mm:ss')} size="small" />
+    <TimePicker defaultValue={dayjs('12:08:23', 'HH:mm:ss')} size="large" />
+    <TimePicker defaultValue={dayjs('12:08:23', 'HH:mm:ss')} />
+    <TimePicker defaultValue={dayjs('12:08:23', 'HH:mm:ss')} size="small" />
   </>,
   mountNode,
 );

components/time-picker/demo/suffix.md

@@ -16,8 +16,11 @@ Click `TimePicker`, and then we could select or input a time in panel.
 
 ```jsx
 import { TimePicker } from 'antd';
-import moment from 'moment';
 import { SmileOutlined } from '@ant-design/icons';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat';
+
+dayjs.extend(customParseFormat);
 
 function onChange(time, timeString) {
   console.log(time, timeString);
@@ -27,7 +30,7 @@ ReactDOM.render(
   <TimePicker
     suffixIcon={<SmileOutlined />}
     onChange={onChange}
-    defaultOpenValue={moment('00:00:00', 'HH:mm:ss')}
+    defaultOpenValue={dayjs('00:00:00', 'HH:mm:ss')}
   />,
   mountNode,
 );

components/time-picker/index.en-US.md

@@ -18,9 +18,12 @@ By clicking the input box, you can select a time from a popup panel.
 ---
 
 ```jsx
-import moment from 'moment';
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat'
 
-<TimePicker defaultValue={moment('13:30:56', 'HH:mm:ss')} />;
+dayjs.extend(customParseFormat)
+
+<TimePicker defaultValue={dayjs('13:30:56', 'HH:mm:ss')} />;
 ```
 
 | Property | Description | Type | Default | Version |
@@ -31,7 +34,7 @@ import moment from 'moment';
 | className | The className of picker | string | - |  |
 | clearIcon | The custom clear icon | ReactNode | - |  |
 | clearText | The clear tooltip of icon | string | clear |  |
-| defaultValue | To set default time | [moment](http://momentjs.com/) | - |  |
+| defaultValue | To set default time | [dayjs](http://day.js.org/) | - |  |
 | disabled | Determine whether the TimePicker is disabled | boolean | false |  |
 | disabledHours | To specify the hours that cannot be selected | function() | - |  |
 | disabledMinutes | To specify the minutes that cannot be selected | function(selectedHour) | - |  |
@@ -51,25 +54,25 @@ import moment from 'moment';
 | showNow | Whether to show `Now` button on panel | boolean | - | 4.4.0 |
 | suffixIcon | The custom suffix icon | ReactNode | - |  |
 | use12Hours | Display as 12 hours format, with default format `h:mm:ss a` | boolean | false |  |
-| value | To set time | [moment](http://momentjs.com/) | - |  |
-| onChange | A callback function, can be executed when the selected time is changing | function(time: moment, timeString: string): void | - |  |
+| value | To set time | [dayjs](http://day.js.org/) | - |  |
+| onChange | A callback function, can be executed when the selected time is changing | function(time: dayjs, timeString: string): void | - |  |
 | onOpenChange | A callback function which will be called while panel opening/closing | (open: boolean) => void | - |  |
-| onSelect | A callback function, executes when a value is selected | function(time: moment): void | - |  |
+| onSelect | A callback function, executes when a value is selected | function(time: dayjs): void | - |  |
 
 ## Methods
 
-| Name | Description | Version |
-| --- | --- | --- |
-| blur() | Remove focus |  |
-| focus() | Get focus |  |
+| Name    | Description  | Version |
+| ------- | ------------ | ------- |
+| blur()  | Remove focus |         |
+| focus() | Get focus    |         |
 
 ### RangePicker
 
 Same props from [RangePicker](/components/date-picker/#RangePicker) of DatePicker. And includes additional props:
 
-| Property | Description | Type | Default | Version |
-| --- | --- | --- | --- | --- |
-| order | Order start and end time | boolean | true | 4.1.0 |
+| Property | Description              | Type    | Default | Version |
+| -------- | ------------------------ | ------- | ------- | ------- |
+| order    | Order start and end time | boolean | true    | 4.1.0   |
 
 <style>
 .code-box-demo .ant-picker { margin: 0 8px 12px 0; }

components/time-picker/index.tsx

@@ -1,4 +1,4 @@
-import { Moment } from 'moment';
+import type { Dayjs } from 'dayjs';
 import * as React from 'react';
 import DatePicker from '../date-picker';
 import { PickerTimeProps, RangePickerTimeProps } from '../date-picker/generatePicker';
@@ -11,7 +11,7 @@ export interface TimePickerLocale {
   rangePlaceholder?: [string, string];
 }
 
-export interface TimeRangePickerProps extends Omit<RangePickerTimeProps<Moment>, 'picker'> {
+export interface TimeRangePickerProps extends Omit<RangePickerTimeProps<Dayjs>, 'picker'> {
   popupClassName?: string;
 }
 
@@ -25,7 +25,7 @@ const RangePicker = React.forwardRef<any, TimeRangePickerProps>((props, ref) =>
   />
 ));
 
-export interface TimePickerProps extends Omit<PickerTimeProps<Moment>, 'picker'> {
+export interface TimePickerProps extends Omit<PickerTimeProps<Dayjs>, 'picker'> {
   addon?: () => React.ReactNode;
   popupClassName?: string;
 }

components/time-picker/index.zh-CN.md

@@ -19,8 +19,11 @@ cover: https://gw.alipayobjects.com/zos/alicdn/h04Zsl98I/TimePicker.svg
 ---
 
 ```jsx
-import moment from 'moment';
-<TimePicker defaultValue={moment('13:30:56', 'HH:mm:ss')} />;
+import dayjs from 'dayjs';
+import customParseFormat from 'dayjs/plugin/customParseFormat'
+
+dayjs.extend(customParseFormat)
+<TimePicker defaultValue={dayjs('13:30:56', 'HH:mm:ss')} />;
 ```
 
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
@@ -31,7 +34,7 @@ import moment from 'moment';
 | className | 选择器类名 | string | - |  |
 | clearIcon | 自定义的清除图标 | ReactNode | - |  |
 | clearText | 清除按钮的提示文案 | string | clear |  |
-| defaultValue | 默认时间 | [moment](http://momentjs.com/) | - |  |
+| defaultValue | 默认时间 | [dayjs](http://day.js.org/) | - |  |
 | disabled | 禁用全部操作 | boolean | false |  |
 | disabledHours | 禁止选择部分小时选项 | function() | - |  |
 | disabledMinutes | 禁止选择部分分钟选项 | function(selectedHour) | - |  |
@@ -51,24 +54,24 @@ import moment from 'moment';
 | showNow | 面板是否显示“此刻”按钮 | boolean | - | 4.4.0 |
 | suffixIcon | 自定义的选择框后缀图标 | ReactNode | - |  |
 | use12Hours | 使用 12 小时制，为 true 时 `format` 默认为 `h:mm:ss a` | boolean | false |  |
-| value | 当前时间 | [moment](http://momentjs.com/) | - |  |
-| onChange | 时间发生变化的回调 | function(time: moment, timeString: string): void | - |  |
+| value | 当前时间 | [dayjs](http://day.js.org/) | - |  |
+| onChange | 时间发生变化的回调 | function(time: dayjs, timeString: string): void | - |  |
 | onOpenChange | 面板打开/关闭时的回调 | (open: boolean) => void | - |  |
 
 ## 方法
 
-| 名称 | 描述 | 版本 |
-| --- | --- | --- |
-| blur() | 移除焦点 |  |
-| focus() | 获取焦点 |  |
+| 名称    | 描述     | 版本 |
+| ------- | -------- | ---- |
+| blur()  | 移除焦点 |      |
+| focus() | 获取焦点 |      |
 
 ### RangePicker
 
 属性与 DatePicker 的 [RangePicker](/components/date-picker/#RangePicker) 相同。还包含以下属性：
 
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
-| order | 始末时间是否自动排序 | boolean | true | 4.1.0 |
+| 参数  | 说明                 | 类型    | 默认值 | 版本  |
+| ----- | -------------------- | ------- | ------ | ----- |
+| order | 始末时间是否自动排序 | boolean | true   | 4.1.0 |
 
 <style>
 .code-box-demo .ant-picker { margin: 0 8px 12px 0; }

docs/react/getting-started.zh-CN.md

@@ -35,12 +35,12 @@ import { render } from 'react-dom';
 import { ConfigProvider, DatePicker, message } from 'antd';
 // 由于 antd 组件的默认文案是英文，所以需要修改为中文
 import zhCN from 'antd/lib/locale/zh_CN';
-import moment from 'moment';
-import 'moment/locale/zh-cn';
+import dayjs from 'dayjs';
+import 'dayjs/locale/zh-cn';
 import 'antd/dist/antd.css';
 import './index.css';
 
-moment.locale('zh-cn');
+dayjs.locale('zh-cn');
 
 const App = () => {
   const [date, setDate] = useState(null);

package.json

@@ -118,9 +118,9 @@
     "@ctrl/tinycolor": "^3.4.0",
     "classnames": "^2.2.6",
     "copy-to-clipboard": "^3.2.0",
+    "dayjs": "^1.10.7",
     "lodash": "^4.17.21",
     "memoize-one": "^6.0.0",
-    "moment": "^2.25.3",
     "rc-cascader": "~3.2.1",
     "rc-checkbox": "~2.3.0",
     "rc-collapse": "~3.1.0",

scripts/check-version-md.js

@@ -2,7 +2,7 @@
 const chalk = require('chalk');
 const fs = require('fs');
 const { join } = require('path');
-const moment = require('moment');
+const dayjs = require('dayjs');
 
 const getChangelogByVersion = (content, version) => {
   const lines = content.split('\n');
@@ -51,8 +51,8 @@ if (!changeLog) {
 if (changeLog) {
   const text = changeLog.split('\n')[0];
   if (text.trim().startsWith('`') && text.trim().endsWith('`')) {
-    const date = moment(text.trim().replace('`', '').replace('`', ''));
-    if (date.isBetween(moment().add(-2, 'day'), moment().add(2, 'day'))) {
+    const date = dayjs(text.trim().replace('`', '').replace('`', ''));
+    if (date.isBetween(dayjs().add(-2, 'day'), dayjs().add(2, 'day'))) {
       console.log('\n');
       console.log(chalk.blue('[check-version-md]: Check Passed'));
       console.log('\n');

scripts/post-script.js

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 const fetch = require('isomorphic-fetch');
 const semver = require('semver');
-const moment = require('moment');
+const dayjs = require('dayjs');
 const inquirer = require('inquirer');
 const chalk = require('chalk');
 const { spawnSync } = require('child_process');
@@ -21,8 +21,8 @@ const SAFE_DAYS_DIFF = 1000 * 60 * 60 * 24 * 3; // 3 days not update seems to be
   const versionList = Object.keys(time)
     .filter(version => semver.valid(version) && !semver.prerelease(version))
     .sort((v1, v2) => {
-      const time1 = moment(time[v1]).valueOf();
-      const time2 = moment(time[v2]).valueOf();
+      const time1 = dayjs(time[v1]).valueOf();
+      const time2 = dayjs(time[v2]).valueOf();
 
       return time2 - time1;
     });
@@ -30,7 +30,7 @@ const SAFE_DAYS_DIFF = 1000 * 60 * 60 * 24 * 3; // 3 days not update seems to be
   // Slice for choosing the latest versions
   const latestVersions = versionList.slice(0, 20).map(version => ({
     publishTime: time[version],
-    timeDiff: moment().diff(moment(time[version])),
+    timeDiff: dayjs().diff(dayjs(time[version])),
     value: version,
   }));
 
@@ -65,7 +65,7 @@ const SAFE_DAYS_DIFF = 1000 * 60 * 60 * 24 * 3; // 3 days not update seems to be
       message: 'Please select Conch Version:',
       choices: latestVersions.map(info => {
         const { value, publishTime } = info;
-        const desc = moment(publishTime).fromNow();
+        const desc = dayjs(publishTime).fromNow();
 
         return {
           ...info,

site/bisheng.config.js

@@ -151,7 +151,7 @@ module.exports = {
         /.*\.md/,
         /lodash/,
         /jquery/,
-        /moment/,
+        /dayjs/,
         /core-js/,
         /jsonml/,
         /ramda/,

site/theme/template/Content/Demo/index.jsx

@@ -212,7 +212,6 @@ class Demo extends React.Component {
         .replace(/import\s+(?:React,\s+)?{(\s+[^}]*\s+)}\s+from\s+'react'/, `const { $1 } = React;`)
         .replace(/import\s+{(\s+[^}]*\s+)}\s+from\s+'antd';/, 'const { $1 } = antd;')
         .replace(/import\s+{(\s+[^}]*\s+)}\s+from\s+'@ant-design\/icons';/, 'const { $1 } = icons;')
-        .replace("import moment from 'moment';", '')
         .replace(/import\s+{\s+(.*)\s+}\s+from\s+'react-router';/, 'const { $1 } = ReactRouter;')
         .replace(
           /import\s+{\s+(.*)\s+}\s+from\s+'react-router-dom';/,
@@ -226,7 +225,6 @@ class Demo extends React.Component {
       js_external: [
         'react@16.x/umd/react.development.js',
         'react-dom@16.x/umd/react-dom.development.js',
-        'moment/min/moment-with-locales.js',
         // eslint-disable-next-line no-undef
         `antd@${antdReproduceVersion}/dist/antd-with-locales.js`,
         `@ant-design/icons/dist/index.umd.js`,

site/theme/template/Layout/index.jsx

@@ -6,7 +6,7 @@ import { presetPalettes, presetDarkPalettes } from '@ant-design/colors';
 import themeSwitcher from 'theme-switcher';
 import { setTwoToneColor } from '@ant-design/icons';
 import { Helmet, HelmetProvider } from 'react-helmet-async';
-import 'moment/locale/zh-cn';
+import 'dayjs/locale/zh-cn';
 import { ConfigProvider } from 'antd';
 import { browserHistory } from 'bisheng/router';
 import zhCN from 'antd/lib/locale/zh_CN';

site/theme/template/Resources/Articles/index.tsx

@@ -1,6 +1,6 @@
 /* eslint-disable react/no-array-index-key */
 import * as React from 'react';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { FormattedMessage, useIntl } from 'react-intl';
 import { Tabs, Skeleton, Avatar, Divider, Empty } from 'antd';
 import { useSiteData } from '../../Home/util';
@@ -70,7 +70,7 @@ export default () => {
   const mergedData = React.useMemo(() => {
     const yearData: Record<number | string, Record<string, Article[]>> = {};
     articles[isZhCN ? 'cn' : 'en']?.forEach(article => {
-      const year = moment(article.date).year();
+      const year = dayjs(article.date).year();
       yearData[year] = yearData[year] || {};
       yearData[year][article.type] = [...(yearData[year][article.type] || []), article];
     });

tests/shared/demoTest.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import glob from 'glob';
 import { render } from 'enzyme';
 import MockDate from 'mockdate';
-import moment from 'moment';
+import dayjs from 'dayjs';
 import { TriggerProps } from 'rc-trigger';
 import { excludeWarning } from './excludeWarning';
 
@@ -69,7 +69,7 @@ function baseText(doInject: boolean, component: string, options: Options = {}) {
       () => {
         const errSpy = excludeWarning();
 
-        MockDate.set(moment('2016-11-22').valueOf());
+        MockDate.set(dayjs('2016-11-22').valueOf());
         let demo = require(`../.${file}`).default; // eslint-disable-line global-require, import/no-dynamic-require
 
         // Inject Trigger status unless skipped

tests/shared/imageTest.ts

@@ -5,7 +5,7 @@ import { configureToMatchImageSnapshot } from 'jest-image-snapshot';
 import ReactDOMServer from 'react-dom/server';
 import glob from 'glob';
 import MockDate from 'mockdate';
-import moment from 'moment';
+import dayjs from 'dayjs';
 
 const toMatchImageSnapshot = configureToMatchImageSnapshot({
   customSnapshotsDir: `${process.cwd()}/imageSnapshots`,
@@ -27,7 +27,7 @@ export default function imageTest(component: React.ReactElement) {
       }
     };
 
-    MockDate.set(moment('2016-11-22').valueOf());
+    MockDate.set(dayjs('2016-11-22').valueOf());
     page.on('request', onRequestHandle);
     await page.goto(`file://${process.cwd()}/tests/index.html`);
     await page.addStyleTag({ path: `${process.cwd()}/dist/antd.css` });

tests/shared/rtlTest.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Moment from 'moment';
+import dayjs from 'dayjs';
 import MockDate from 'mockdate';
 import { mount } from 'enzyme';
 import ConfigProvider from '../../components/config-provider';
@@ -9,7 +9,7 @@ export default function rtlTest(Component: React.ComponentType, mockDate?: boole
   describe(`rtl render`, () => {
     it(`component should be rendered correctly in RTL direction`, () => {
       if (mockDate) {
-        MockDate.set(Moment('2000-09-28').valueOf());
+        MockDate.set(dayjs('2000-09-28').valueOf());
       }
       const wrapper = mount(
         <ConfigProvider direction="rtl">

webpack.config.js

@@ -35,13 +35,6 @@ function injectLessVariables(config, variables) {
   return config;
 }
 
-// noParse still leave `require('./locale' + name)` in dist files
-// ignore is better: http://stackoverflow.com/q/25384360
-function ignoreMomentLocale(webpackConfig) {
-  delete webpackConfig.module.noParse;
-  webpackConfig.plugins.push(new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/));
-}
-
 function addLocales(webpackConfig) {
   let packageName = 'antd-with-locales';
   if (webpackConfig.entry['antd.min']) {
@@ -51,15 +44,6 @@ function addLocales(webpackConfig) {
   webpackConfig.output.filename = '[name].js';
 }
 
-function externalMoment(config) {
-  config.externals.moment = {
-    root: 'moment',
-    commonjs2: 'moment',
-    commonjs: 'moment',
-    amd: 'moment',
-  };
-}
-
 function injectWarningCondition(config) {
   config.module.rules.forEach(rule => {
     // Remove devWarning if needed
@@ -80,9 +64,6 @@ function injectWarningCondition(config) {
 
 function processWebpackThemeConfig(themeConfig, theme, vars) {
   themeConfig.forEach(config => {
-    ignoreMomentLocale(config);
-    externalMoment(config);
-
     // rename default entry to ${theme} entry
     Object.keys(config.entry).forEach(entryName => {
       const originPath = config.entry[entryName];
@@ -138,8 +119,6 @@ webpackConfig.forEach(config => {
 
 if (process.env.RUN_ENV === 'PRODUCTION') {
   webpackConfig.forEach(config => {
-    ignoreMomentLocale(config);
-    externalMoment(config);
     addLocales(config);
     // Reduce non-minified dist files size
     config.optimization.usedExports = true;