diff --git a/components/calendar/demo/notice-calendar.md b/components/calendar/demo/notice-calendar.md
index cad8484577..d9836124e7 100644
--- a/components/calendar/demo/notice-calendar.md
+++ b/components/calendar/demo/notice-calendar.md
@@ -16,10 +16,10 @@ This component can be rendered by using `dateCellRender` and `monthCellRender` w
 ```tsx
 import type { BadgeProps } from 'antd';
 import { Badge, Calendar } from 'antd';
-import type { Moment } from 'moment';
+import type { Dayjs } from 'dayjs';
 import React from 'react';
 
-const getListData = (value: Moment) => {
+const getListData = (value: Dayjs) => {
   let listData;
   switch (value.date()) {
     case 8:
@@ -50,14 +50,14 @@ const getListData = (value: Moment) => {
   return listData || [];
 };
 
-const getMonthData = (value: Moment) => {
+const getMonthData = (value: Dayjs) => {
   if (value.month() === 8) {
     return 1394;
   }
 };
 
 const App: React.FC = () => {
-  const monthCellRender = (value: Moment) => {
+  const monthCellRender = (value: Dayjs) => {
     const num = getMonthData(value);
     return num ? (
       <div className="notes-month">
@@ -67,7 +67,7 @@ const App: React.FC = () => {
     ) : null;
   };
 
-  const dateCellRender = (value: Moment) => {
+  const dateCellRender = (value: Dayjs) => {
     const listData = getListData(value);
     return (
       <ul className="events">
diff --git a/components/calendar/demo/select.md b/components/calendar/demo/select.md
index 9c6fcfdb71..13acab6f6e 100644
--- a/components/calendar/demo/select.md
+++ b/components/calendar/demo/select.md
@@ -15,6 +15,7 @@ A basic calendar component with Year/Month switch.
 
 ```tsx
 import { Alert, Calendar } from 'antd';
+import type { Dayjs } from 'dayjs';
 import dayjs from 'dayjs';
 import React, { useState } from 'react';
 
@@ -22,12 +23,12 @@ const App: React.FC = () => {
   const [value, setValue] = useState(dayjs('2017-01-25'));
   const [selectedValue, setSelectedValue] = useState(dayjs('2017-01-25'));
 
-  const onSelect = (newValue: Moment) => {
+  const onSelect = (newValue: Dayjs) => {
     setValue(newValue);
     setSelectedValue(newValue);
   };
 
-  const onPanelChange = (newValue: Moment) => {
+  const onPanelChange = (newValue: Dayjs) => {
     setValue(newValue);
   };
 
diff --git a/components/date-picker/demo/mode.md b/components/date-picker/demo/mode.md
index c06d49c31e..0d1372e91d 100644
--- a/components/date-picker/demo/mode.md
+++ b/components/date-picker/demo/mode.md
@@ -18,12 +18,12 @@ Determing which panel to show with `mode` and `onPanelChange`.
 import type { DatePickerProps } from 'antd';
 import { DatePicker, Space } from 'antd';
 import type { RangePickerProps } from 'antd/es/date-picker';
-import type { Moment } from 'moment';
+import type { Dayjs } from 'dayjs';
 import React, { useState } from 'react';
 
 const { RangePicker } = DatePicker;
 
-type RangeValue = [Moment | null, Moment | null] | null;
+type RangeValue = [Dayjs | null, Dayjs | null] | null;
 
 const ControlledDatePicker = () => {
   const [mode, setMode] = useState<DatePickerProps['mode']>('time');
diff --git a/components/date-picker/demo/select-in-range.md b/components/date-picker/demo/select-in-range.md
index bda207bf54..4d13e7d900 100644
--- a/components/date-picker/demo/select-in-range.md
+++ b/components/date-picker/demo/select-in-range.md
@@ -15,19 +15,19 @@ A example shows how to select a dynamic range by using `onCalendarChange` and `d
 
 ```tsx
 import { DatePicker } from 'antd';
-import type { Moment } from 'moment';
+import type { Dayjs } from 'dayjs';
 import React, { useState } from 'react';
 
 const { RangePicker } = DatePicker;
 
-type RangeValue = [Moment | null, Moment | null] | null;
+type RangeValue = [Dayjs | null, Dayjs | null] | null;
 
 const App: React.FC = () => {
   const [dates, setDates] = useState<RangeValue>(null);
   const [hackValue, setHackValue] = useState<RangeValue>(null);
   const [value, setValue] = useState<RangeValue>(null);
 
-  const disabledDate = (current: Moment) => {
+  const disabledDate = (current: Dayjs) => {
     if (!dates) {
       return false;
     }
diff --git a/components/date-picker/demo/start-end.md b/components/date-picker/demo/start-end.md
index ade1424a80..d2b71f6515 100644
--- a/components/date-picker/demo/start-end.md
+++ b/components/date-picker/demo/start-end.md
@@ -22,22 +22,22 @@ When `RangePicker` does not satisfied your requirements, try to implement simila
 
 ```tsx
 import { DatePicker, Space } from 'antd';
-import type { Moment } from 'moment';
+import type { Dayjs } from 'dayjs';
 import React, { useState } from 'react';
 
 const App: React.FC = () => {
-  const [startValue, setStartValue] = useState<Moment | null>(null);
-  const [endValue, setEndValue] = useState<Moment | null>(null);
+  const [startValue, setStartValue] = useState<Dayjs | null>(null);
+  const [endValue, setEndValue] = useState<Dayjs | null>(null);
   const [endOpen, setEndOpen] = useState(false);
 
-  const disabledStartDate = (startDate: Moment) => {
+  const disabledStartDate = (startDate: Dayjs) => {
     if (!startDate || !endValue) {
       return false;
     }
     return startDate.valueOf() > endValue.valueOf();
   };
 
-  const disabledEndDate = (endDate: Moment) => {
+  const disabledEndDate = (endDate: Dayjs) => {
     if (!endDate || !startValue) {
       return false;
     }