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

2024-11-27 20:49:53 +08:00 · 2022-02-14 14:40:40 +08:00 · 2022-02-14 14:40:40 +08:00 · b22815d4d2
commit b22815d4d2
parent 908a8b54b8
47 changed files with 338 additions and 317 deletions
--- a/components/calendar/tests/index.test.js
+++ b/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}
--- a/components/calendar/demo/select.md
+++ b/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 => {
--- a/components/calendar/index.en-US.md
+++ b/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}
--- a/components/calendar/index.tsx
+++ b/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;
--- a/components/calendar/index.zh-CN.md
+++ b/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}
--- a/components/comment/demo/basic.md
+++ b/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>
      }
    />
--- a/components/comment/demo/editor.md
+++ b/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(),
          },
        ],
      });
--- a/components/comment/demo/list.md
+++ b/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>
    ),
  },
--- a/components/config-provider/tests/components.test.js
+++ b/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
--- a/components/config-provider/demo/locale.md
+++ b/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');
    }
  };

--- a/components/date-picker/tests/DatePicker.test.js
+++ b/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 />,
--- a/components/date-picker/tests/RangePicker.test.js
+++ b/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
        />,
--- a/components/date-picker/tests/other.test.js
+++ b/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();
--- a/components/date-picker/tests/type.test.tsx
+++ b/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 = (
--- a/components/date-picker/demo/disabled-date.md
+++ b/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"
    />
--- a/components/date-picker/demo/disabled.md
+++ b/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>,
--- a/components/date-picker/demo/format.md
+++ b/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,
 );
--- a/components/date-picker/demo/presetted-ranges.md
+++ b/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"
--- a/components/date-picker/index.en-US.md
+++ b/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

--- a/components/date-picker/index.tsx
+++ b/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;
--- a/components/date-picker/index.zh-CN.md
+++ b/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

--- a/components/locale-provider/tests/index.test.js
+++ b/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>
        );
--- a/components/modal/demo/dark.md
+++ b/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>
--- a/components/statistic/tests/index.test.js
+++ b/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();
      });
--- a/components/statistic/demo/countdown.md
+++ b/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!');
--- a/components/time-picker/tests/index.test.js
+++ b/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}
      />,
    );
--- a/components/time-picker/demo/basic.md
+++ b/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,
 );
 ```
--- a/components/time-picker/demo/colored-popup.md
+++ b/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,
--- a/components/time-picker/demo/disabled.md
+++ b/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);
 ```
--- a/components/time-picker/demo/hide-column.md
+++ b/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);
 ```
--- a/components/time-picker/demo/size.md
+++ b/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,
 );
--- a/components/time-picker/demo/suffix.md
+++ b/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,
 );
--- a/components/time-picker/index.en-US.md
+++ b/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; }
--- a/components/time-picker/index.tsx
+++ b/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;
 }
--- a/components/time-picker/index.zh-CN.md
+++ b/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; }
--- a/docs/react/getting-started.zh-CN.md
+++ b/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);
--- a/package.json
+++ b/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",
--- a/scripts/check-version-md.js
+++ b/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');
--- a/scripts/post-script.js
+++ b/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,
--- a/site/bisheng.config.js
+++ b/site/bisheng.config.js
@ -151,7 +151,7 @@ module.exports = {
        /.*\.md/,
        /lodash/,
        /jquery/,
-        /moment/,
+        /dayjs/,
        /core-js/,
        /jsonml/,
        /ramda/,
--- a/site/theme/template/Content/Demo/index.jsx
+++ b/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`,
--- a/site/theme/template/Layout/index.jsx
+++ b/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';
--- a/site/theme/template/Resources/Articles/index.tsx
+++ b/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];
    });
--- a/tests/shared/demoTest.tsx
+++ b/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
--- a/tests/shared/imageTest.ts
+++ b/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` });
--- a/tests/shared/rtlTest.tsx
+++ b/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">
--- a/webpack.config.js
+++ b/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;