diff --git a/components/calendar/generateCalendar.tsx b/components/calendar/generateCalendar.tsx
index 9220e7d9c..44a2cb5bc 100644
--- a/components/calendar/generateCalendar.tsx
+++ b/components/calendar/generateCalendar.tsx
@@ -60,6 +60,7 @@ export interface CalendarProps<DateType> {
   mode?: CalendarMode;
   fullscreen?: boolean;
   onChange?: (date: DateType | string) => void;
+  'onUpdate:value'?: (date: DateType | string) => void;
   onPanelChange?: (date: DateType | string, mode: CalendarMode) => void;
   onSelect?: (date: DateType | string) => void;
   valueFormat?: string;
@@ -88,7 +89,25 @@ function generateCalendar<
   const Calendar = defineComponent<Props>({
     name: 'ACalendar',
     inheritAttrs: false,
-    emits: ['change', 'panelChange', 'select', 'update:value'],
+    props: [
+      'prefixCls',
+      'locale',
+      'validRange',
+      'disabledDate',
+      'dateFullCellRender',
+      'dateCellRender',
+      'monthFullCellRender',
+      'monthCellRender',
+      'headerRender',
+      'value',
+      'defaultValue',
+      'mode',
+      'fullscreen',
+      'onChange',
+      'onPanelChange',
+      'onSelect',
+      'valueFormat',
+    ] as any,
     slots: [
       'dateFullCellRender',
       'dateCellRender',
@@ -306,26 +325,6 @@ function generateCalendar<
     },
   });
 
-  Calendar.props = [
-    'prefixCls',
-    'locale',
-    'validRange',
-    'disabledDate',
-    'dateFullCellRender',
-    'dateCellRender',
-    'monthFullCellRender',
-    'monthCellRender',
-    'headerRender',
-    'value',
-    'defaultValue',
-    'mode',
-    'fullscreen',
-    'onChange',
-    'onPanelChange',
-    'onSelect',
-    'valueFormat',
-  ];
-
   Calendar.install = function (app: App) {
     app.component(Calendar.name, Calendar);
     return app;
diff --git a/components/carousel/__tests__/__snapshots__/demo.test.js.snap b/components/carousel/__tests__/__snapshots__/demo.test.js.snap
index ef65a0172..53c157a36 100644
--- a/components/carousel/__tests__/__snapshots__/demo.test.js.snap
+++ b/components/carousel/__tests__/__snapshots__/demo.test.js.snap
@@ -167,7 +167,7 @@ exports[`renders ./components/carousel/demo/basic.vue correctly 1`] = `
 exports[`renders ./components/carousel/demo/customArrows.vue correctly 1`] = `
 <div class="ant-carousel">
   <div class="slick-slider slick-initialized">
-    <div class="custom-slick-arrow slick-arrow slick-prev" style="left: 10px; display: block;"><span role="img" aria-label="left-circle" class="anticon anticon-left-circle"><svg focusable="false" class="" data-icon="left-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M603.3 327.5l-246 178a7.95 7.95 0 000 12.9l246 178c5.3 3.8 12.7 0 12.7-6.5V643c0-10.2-4.9-19.9-13.2-25.9L457.4 512l145.4-105.2c8.3-6 13.2-15.6 13.2-25.9V334c0-6.5-7.4-10.3-12.7-6.5z"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg></span></div>
+    <div class="custom-slick-arrow slick-arrow slick-prev" style="left: 10px; z-index: 1; display: block;"><span role="img" aria-label="left-circle" class="anticon anticon-left-circle"><svg focusable="false" class="" data-icon="left-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true" viewBox="64 64 896 896"><path d="M603.3 327.5l-246 178a7.95 7.95 0 000 12.9l246 178c5.3 3.8 12.7 0 12.7-6.5V643c0-10.2-4.9-19.9-13.2-25.9L457.4 512l145.4-105.2c8.3-6 13.2-15.6 13.2-25.9V334c0-6.5-7.4-10.3-12.7-6.5z"></path><path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm0 820c-205.4 0-372-166.6-372-372s166.6-372 372-372 372 166.6 372 372-166.6 372-372 372z"></path></svg></span></div>
     <div class="slick-list">
       <div class="slick-track" style="opacity: 1; transform: translate3d(0px, 0px, 0px);">
         <div class="slick-slide slick-cloned" tabindex="-1" data-index="-1" aria-hidden="true" style="width: 0px;">
diff --git a/components/date-picker/demo/date-render.vue b/components/date-picker/demo/date-render.vue
index 1990c4fbe..939cc1a73 100644
--- a/components/date-picker/demo/date-render.vue
+++ b/components/date-picker/demo/date-render.vue
@@ -51,7 +51,7 @@ export default defineComponent({
     };
     return {
       value1: ref<Dayjs>(),
-      value2: ref<Dayjs[]>([]),
+      value2: ref<[Dayjs, Dayjs]>(),
       value3: ref<Dayjs>(),
       getCurrentStyle,
     };
diff --git a/components/date-picker/demo/disabled-date.vue b/components/date-picker/demo/disabled-date.vue
index 92a9e4ed8..7f21b5359 100644
--- a/components/date-picker/demo/disabled-date.vue
+++ b/components/date-picker/demo/disabled-date.vue
@@ -68,7 +68,7 @@ export default defineComponent({
       };
     };
 
-    const disabledRangeTime = (_: Dayjs[], type: 'start' | 'end') => {
+    const disabledRangeTime = (_: Dayjs, type: 'start' | 'end') => {
       if (type === 'start') {
         return {
           disabledHours: () => range(0, 60).splice(4, 20),
@@ -87,8 +87,8 @@ export default defineComponent({
       dayjs,
       value1: ref<Dayjs>(),
       value2: ref<Dayjs>(),
-      value3: ref<Dayjs[]>([]),
-      value4: ref<Dayjs[]>([]),
+      value3: ref<[Dayjs, Dayjs]>(),
+      value4: ref<[Dayjs, Dayjs]>(),
       disabledDate,
       disabledDateTime,
       disabledRangeTime,
diff --git a/components/date-picker/demo/disabled.vue b/components/date-picker/demo/disabled.vue
index 1cf1993d8..9e14f783f 100644
--- a/components/date-picker/demo/disabled.vue
+++ b/components/date-picker/demo/disabled.vue
@@ -33,8 +33,14 @@ export default defineComponent({
     return {
       value1: ref<Dayjs>(dayjs('2015-06-06', dateFormat)),
       value2: ref<Dayjs>(dayjs('2015-06', 'YYYY-MM')),
-      value3: ref<Dayjs[]>([dayjs('2015-06-06', dateFormat), dayjs('2015-06-06', dateFormat)]),
-      value4: ref<Dayjs[]>([dayjs('2019-09-03', dateFormat), dayjs('2019-11-22', dateFormat)]),
+      value3: ref<[Dayjs, Dayjs]>([
+        dayjs('2015-06-06', dateFormat),
+        dayjs('2015-06-06', dateFormat),
+      ]),
+      value4: ref<[Dayjs, Dayjs]>([
+        dayjs('2019-09-03', dateFormat),
+        dayjs('2019-11-22', dateFormat),
+      ]),
     };
   },
 });
diff --git a/components/date-picker/demo/format.vue b/components/date-picker/demo/format.vue
index ef191faf7..e1c4f3e4a 100644
--- a/components/date-picker/demo/format.vue
+++ b/components/date-picker/demo/format.vue
@@ -37,7 +37,10 @@ export default defineComponent({
       value1: ref<Dayjs>(dayjs('2015/01/01', dateFormat)),
       value2: ref<Dayjs>(dayjs('01/01/2015', dateFormatList[0])),
       value3: ref<Dayjs>(dayjs('2015/01', monthFormat)),
-      value4: ref<Dayjs[]>([dayjs('2015/01/01', dateFormat), dayjs('2015/01/01', dateFormat)]),
+      value4: ref<[Dayjs, Dayjs]>([
+        dayjs('2015/01/01', dateFormat),
+        dayjs('2015/01/01', dateFormat),
+      ]),
       value5: ref<Dayjs>(dayjs('2015/01/01', dateFormat)),
       dateFormat,
       monthFormat,
diff --git a/components/date-picker/demo/mode.vue b/components/date-picker/demo/mode.vue
index 81f901d20..f61482ebf 100644
--- a/components/date-picker/demo/mode.vue
+++ b/components/date-picker/demo/mode.vue
@@ -39,9 +39,9 @@ import { Dayjs } from 'dayjs';
 import { defineComponent, ref } from 'vue';
 export default defineComponent({
   setup() {
-    const mode1 = ref<string>('time');
-    const mode2 = ref<string[]>(['month', 'month']);
-    const value = ref<Dayjs[]>([]);
+    const mode1 = ref<any>('time');
+    const mode2 = ref<any>(['month', 'month']);
+    const value = ref<[Dayjs, Dayjs]>();
 
     const handleOpenChange1 = (open: boolean) => {
       if (open) {
@@ -49,15 +49,15 @@ export default defineComponent({
       }
     };
 
-    const handleChange = (val: Dayjs[]) => {
+    const handleChange = (val: [Dayjs, Dayjs]) => {
       value.value = val;
     };
 
-    const handlePanelChange1 = (_val: Dayjs[], mode: string) => {
+    const handlePanelChange1 = (_val: [Dayjs, Dayjs], mode: any) => {
       mode1.value = mode;
     };
 
-    const handlePanelChange2 = (val: Dayjs[], mode: string[]) => {
+    const handlePanelChange2 = (val: [Dayjs, Dayjs], mode: any[]) => {
       value.value = val;
       mode2.value = [
         mode[0] === 'date' ? 'month' : mode[0],
diff --git a/components/date-picker/demo/presetted-ranges.vue b/components/date-picker/demo/presetted-ranges.vue
index df10fe449..a825bebb5 100644
--- a/components/date-picker/demo/presetted-ranges.vue
+++ b/components/date-picker/demo/presetted-ranges.vue
@@ -31,12 +31,16 @@ We can set presetted ranges to RangePicker to improve user experience.
 <script lang="ts">
 import dayjs, { Dayjs } from 'dayjs';
 import { defineComponent, ref } from 'vue';
+type RangeValue = [Dayjs, Dayjs];
 export default defineComponent({
   setup() {
     return {
-      value1: ref<Dayjs[]>([]),
-      value2: ref<Dayjs[]>([]),
-      ranges: { Today: [dayjs(), dayjs()], 'This Month': [dayjs(), dayjs().endOf('month')] },
+      value1: ref<RangeValue>(),
+      value2: ref<RangeValue>(),
+      ranges: {
+        Today: [dayjs(), dayjs()] as RangeValue,
+        'This Month': [dayjs(), dayjs().endOf('month')] as RangeValue,
+      },
     };
   },
 });
diff --git a/components/date-picker/demo/range-picker.vue b/components/date-picker/demo/range-picker.vue
index ee7ed8655..68f25e67d 100644
--- a/components/date-picker/demo/range-picker.vue
+++ b/components/date-picker/demo/range-picker.vue
@@ -28,14 +28,15 @@ Set range picker type by `picker` prop.
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
 import type { Dayjs } from 'dayjs';
+type RangeValue = [Dayjs, Dayjs];
 export default defineComponent({
   setup() {
     return {
-      value1: ref<Dayjs[]>([]),
-      value2: ref<Dayjs[]>([]),
-      value3: ref<Dayjs[]>([]),
-      value4: ref<Dayjs[]>([]),
-      value5: ref<Dayjs[]>([]),
+      value1: ref<RangeValue>(),
+      value2: ref<RangeValue>(),
+      value3: ref<RangeValue>(),
+      value4: ref<RangeValue>(),
+      value5: ref<RangeValue>(),
     };
   },
 });
diff --git a/components/date-picker/demo/select-in-range.vue b/components/date-picker/demo/select-in-range.vue
index 454ad3e18..e7412e565 100644
--- a/components/date-picker/demo/select-in-range.vue
+++ b/components/date-picker/demo/select-in-range.vue
@@ -27,14 +27,15 @@ A example shows how to select a dynamic range by using `onCalendarChange` and `d
 <script lang="ts">
 import { Dayjs } from 'dayjs';
 import { defineComponent, ref } from 'vue';
+type RangeValue = [Dayjs, Dayjs];
 export default defineComponent({
   setup() {
-    const dates = ref<Dayjs[]>([]);
-    const value = ref<Dayjs[]>();
-    const hackValue = ref<Dayjs[]>();
+    const dates = ref<RangeValue>();
+    const value = ref<RangeValue>();
+    const hackValue = ref<RangeValue>();
 
     const disabledDate = (current: Dayjs) => {
-      if (!dates.value || dates.value.length === 0) {
+      if (!dates.value) {
         return false;
       }
       const tooLate = dates.value[0] && current.diff(dates.value[0], 'days') > 7;
@@ -44,18 +45,18 @@ export default defineComponent({
 
     const onOpenChange = (open: boolean) => {
       if (open) {
-        dates.value = [];
-        hackValue.value = [];
+        dates.value = null;
+        hackValue.value = null;
       } else {
         hackValue.value = undefined;
       }
     };
 
-    const onChange = (val: Dayjs[]) => {
+    const onChange = (val: RangeValue) => {
       value.value = val;
     };
 
-    const onCalendarChange = (val: Dayjs[]) => {
+    const onCalendarChange = (val: RangeValue) => {
       dates.value = val;
     };
 
diff --git a/components/date-picker/demo/size.vue b/components/date-picker/demo/size.vue
index 733775b7b..120591f1a 100644
--- a/components/date-picker/demo/size.vue
+++ b/components/date-picker/demo/size.vue
@@ -34,7 +34,7 @@ import { defineComponent, ref } from 'vue';
 export default defineComponent({
   setup() {
     return {
-      size: ref<string>('default'),
+      size: ref<any>('default'),
     };
   },
 });
diff --git a/components/date-picker/demo/start-end.vue b/components/date-picker/demo/start-end.vue
index 1df447a8d..f1fe901db 100644
--- a/components/date-picker/demo/start-end.vue
+++ b/components/date-picker/demo/start-end.vue
@@ -46,7 +46,7 @@ import { Dayjs } from 'dayjs';
 import { defineComponent, ref, watch } from 'vue';
 export default defineComponent({
   setup() {
-    const startValue = ref<Dayjs | undefined>();
+    const startValue = ref<Dayjs>();
     const endValue = ref<Dayjs>();
     const endOpen = ref<boolean>(false);
 
diff --git a/components/date-picker/demo/suffix.vue b/components/date-picker/demo/suffix.vue
index ab4490a3e..42ed119bf 100644
--- a/components/date-picker/demo/suffix.vue
+++ b/components/date-picker/demo/suffix.vue
@@ -28,7 +28,7 @@ Customize the suffix icon through `suffixIcon`
         <SmileOutlined />
       </template>
     </a-date-picker>
-    <a-range-picker @change="onChange">
+    <a-range-picker @change="onRangeChange">
       <template #suffixIcon>
         <SmileOutlined />
       </template>
@@ -40,7 +40,7 @@ Customize the suffix icon through `suffixIcon`
     </a-date-picker>
     <a-date-picker suffix-icon="ab" @change="onChange" />
     <a-date-picker suffix-icon="ab" placeholder="Select month" picker="month" @change="onChange" />
-    <a-range-picker suffix-icon="ab" @change="onChange" />
+    <a-range-picker suffix-icon="ab" @change="onRangeChange" />
     <a-date-picker suffix-icon="ab" placeholder="Select week" picker="week" @change="onChange" />
   </a-space>
 </template>
@@ -53,12 +53,16 @@ export default defineComponent({
     SmileOutlined,
   },
   setup() {
-    const onChange = (date: Dayjs, dateString: string[]) => {
+    const onChange = (date: Dayjs | string, dateString: string) => {
       console.log(date, dateString);
     };
 
+    const onRangeChange = (date: [Dayjs, Dayjs], dateString: [string, string]) => {
+      console.log(date, dateString);
+    };
     return {
       onChange,
+      onRangeChange,
     };
   },
 });
diff --git a/components/date-picker/demo/switchable.vue b/components/date-picker/demo/switchable.vue
index ed2875c00..b396de918 100644
--- a/components/date-picker/demo/switchable.vue
+++ b/components/date-picker/demo/switchable.vue
@@ -37,7 +37,7 @@ import { defineComponent, ref } from 'vue';
 export default defineComponent({
   setup() {
     return {
-      type: ref('time'),
+      type: ref<any>('time'),
     };
   },
 });
diff --git a/components/date-picker/demo/text.vue b/components/date-picker/demo/text.vue
index a5b9501ec..30baf83b7 100644
--- a/components/date-picker/demo/text.vue
+++ b/components/date-picker/demo/text.vue
@@ -34,7 +34,7 @@ import { defineComponent, ref } from 'vue';
 export default defineComponent({
   setup() {
     const time1 = ref<Dayjs>();
-    const time2 = ref<Dayjs>();
+    const time2 = ref<[Dayjs, Dayjs]>();
 
     const onOk = (value: Dayjs) => {
       console.log('onOk: ', value);
diff --git a/components/date-picker/demo/time.vue b/components/date-picker/demo/time.vue
index 12912a4ec..41f64c098 100644
--- a/components/date-picker/demo/time.vue
+++ b/components/date-picker/demo/time.vue
@@ -23,8 +23,8 @@ This property provide an additional time selection. When `showTime` is an Object
       :show-time="{ format: 'HH:mm' }"
       format="YYYY-MM-DD HH:mm"
       :placeholder="['Start Time', 'End Time']"
-      @change="onChange"
-      @ok="onOk"
+      @change="onRangeChange"
+      @ok="onRangeOk"
     />
   </a-space>
 </template>
@@ -33,18 +33,29 @@ import { Dayjs } from 'dayjs';
 import { defineComponent } from 'vue';
 export default defineComponent({
   setup() {
-    const onChange = (value: Dayjs[], dateString: string[]) => {
+    const onChange = (value: Dayjs, dateString: string) => {
       console.log('Selected Time: ', value);
       console.log('Formatted Selected Time: ', dateString);
     };
 
-    const onOk = (value: Dayjs[]) => {
+    const onOk = (value: Dayjs) => {
+      console.log('onOk: ', value);
+    };
+
+    const onRangeChange = (value: [Dayjs, Dayjs], dateString: [string, string]) => {
+      console.log('Selected Time: ', value);
+      console.log('Formatted Selected Time: ', dateString);
+    };
+
+    const onRangeOk = (value: [Dayjs, Dayjs]) => {
       console.log('onOk: ', value);
     };
 
     return {
       onChange,
       onOk,
+      onRangeChange,
+      onRangeOk,
     };
   },
 });
diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx
index d939bd0b1..a094db1a6 100644
--- a/components/date-picker/generatePicker/generateRangePicker.tsx
+++ b/components/date-picker/generatePicker/generateRangePicker.tsx
@@ -41,17 +41,6 @@ export default function generateRangePicker<DateType, ExtraProps = {}>(
       'renderExtraFooter',
       // 'separator',
     ],
-    emits: [
-      'change',
-      'panelChange',
-      'ok',
-      'openChange',
-      'update:value',
-      'update:open',
-      'calendarChange',
-      'focus',
-      'blur',
-    ],
     setup(props, { expose, slots, attrs, emit }) {
       const formItemContext = useInjectFormItemContext();
       devWarning(
@@ -161,6 +150,8 @@ export default function generateRangePicker<DateType, ExtraProps = {}>(
           id = formItemContext.id.value,
           ...restProps
         } = p;
+        delete restProps['onUpdate:value'];
+        delete restProps['onUpdate:open'];
         const { format, showTime } = p as any;
 
         let additionalOverrideProps: any = {};
diff --git a/components/date-picker/generatePicker/generateSinglePicker.tsx b/components/date-picker/generatePicker/generateSinglePicker.tsx
index 43c407ef5..0fed14a3d 100644
--- a/components/date-picker/generatePicker/generateSinglePicker.tsx
+++ b/components/date-picker/generatePicker/generateSinglePicker.tsx
@@ -41,16 +41,6 @@ export default function generateSinglePicker<DateType, ExtraProps = {}>(
         'renderExtraFooter',
         'monthCellRender',
       ],
-      emits: [
-        'change',
-        'openChange',
-        'focus',
-        'blur',
-        'panelChange',
-        'ok',
-        'update:value',
-        'update:open',
-      ],
       setup(props, { slots, expose, attrs, emit }) {
         const formItemContext = useInjectFormItemContext();
         devWarning(
diff --git a/components/date-picker/generatePicker/props.ts b/components/date-picker/generatePicker/props.ts
index 8d2f24f16..bcd3dad47 100644
--- a/components/date-picker/generatePicker/props.ts
+++ b/components/date-picker/generatePicker/props.ts
@@ -1,3 +1,4 @@
+import type { FocusEventHandler, MouseEventHandler } from '../../_util/EventInterface';
 import type { CSSProperties, PropType } from 'vue';
 import type { PickerLocale } from '.';
 import type { SizeType } from '../../config-provider';
@@ -14,7 +15,7 @@ import type {
 import type { DateRender } from '../../vc-picker/panels/DatePanel/DateBody';
 import type { MonthCellRender } from '../../vc-picker/panels/MonthPanel/MonthBody';
 import type { SharedTimeProps } from '../../vc-picker/panels/TimePanel';
-import type { RangeDateRender, RangeType } from '../../vc-picker/RangePicker';
+import type { RangeDateRender, RangeInfo, RangeType } from '../../vc-picker/RangePicker';
 import type { VueNode } from '../../_util/type';
 
 function commonProps<DateType>() {
@@ -45,17 +46,24 @@ function commonProps<DateType>() {
     getPopupContainer: { type: Function as PropType<(node: HTMLElement) => HTMLElement> },
     panelRender: { type: Function as PropType<(originPanel: VueNode) => VueNode> },
     // // Events
-    // onChange?: (value: DateType | null, dateString: string) => void;
-    // onOpenChange?: (open: boolean) => void;
-    // onFocus?: FocusEventHandler;
-    // onBlur?: FocusEventHandler;
-    // onMousedown?: MouseEventHandler;
-    // onMouseup?: MouseEventHandler;
-    // onMouseenter?: MouseEventHandler;
-    // onMouseleave?: MouseEventHandler;
-    // onClick?: MouseEventHandler;
-    // onContextmenu?: MouseEventHandler;
-    // onKeydown?: (event: KeyboardEvent, preventDefault: () => void) => void;
+    onChange: {
+      type: Function as PropType<(value: DateType | string | null, dateString: string) => void>,
+    },
+    'onUpdate:value': { type: Function as PropType<(value: DateType | string | null) => void> },
+    onOk: { type: Function as PropType<(value: DateType | string | null) => void> },
+    onOpenChange: { type: Function as PropType<(open: boolean) => void> },
+    'onUpdate:open': { type: Function as PropType<(open: boolean) => void> },
+    onFocus: { type: Function as PropType<FocusEventHandler> },
+    onBlur: { type: Function as PropType<FocusEventHandler> },
+    onMousedown: { type: Function as PropType<MouseEventHandler> },
+    onMouseup: { type: Function as PropType<MouseEventHandler> },
+    onMouseenter: { type: Function as PropType<MouseEventHandler> },
+    onMouseleave: { type: Function as PropType<MouseEventHandler> },
+    onClick: { type: Function as PropType<MouseEventHandler> },
+    onContextmenu: { type: Function as PropType<MouseEventHandler> },
+    onKeydown: {
+      type: Function as PropType<(event: KeyboardEvent, preventDefault: () => void) => void>,
+    },
     // WAI-ARIA
     role: String,
     name: String,
@@ -100,6 +108,20 @@ export interface CommonProps<DateType> {
   superNextIcon?: VueNode;
   getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
   panelRender?: (originPanel: VueNode) => VueNode;
+  onChange?: (value: DateType | string | null, dateString: string) => void;
+  'onUpdate:value'?: (value: DateType | string | null) => void;
+  onOk?: (value: DateType | string | null) => void;
+  onOpenChange?: (open: boolean) => void;
+  'onUpdate:open'?: (open: boolean) => void;
+  onFocus?: FocusEventHandler;
+  onBlur?: FocusEventHandler;
+  onMousedown?: MouseEventHandler;
+  onMouseup?: MouseEventHandler;
+  onMouseenter?: MouseEventHandler;
+  onMouseleave?: MouseEventHandler;
+  onClick?: MouseEventHandler;
+  onContextmenu?: MouseEventHandler;
+  onKeydown?: (event: KeyboardEvent, preventDefault: () => void) => void;
   role?: string;
   name?: string;
   autocomplete?: string;
@@ -153,10 +175,10 @@ function rangePickerProps<DateType>() {
     allowEmpty: { type: Array as unknown as PropType<[boolean, boolean]> },
     dateRender: { type: Function as PropType<RangeDateRender<DateType>> },
     defaultPickerValue: {
-      type: Array as unknown as PropType<[DateType, DateType] | [string, string]>,
+      type: Array as unknown as PropType<RangeValue<DateType> | RangeValue<string>>,
     },
-    defaultValue: { type: Array as unknown as PropType<[DateType, DateType] | [string, string]> },
-    value: { type: Array as unknown as PropType<[DateType, DateType] | [string, string]> },
+    defaultValue: { type: Array as unknown as PropType<RangeValue<DateType> | RangeValue<string>> },
+    value: { type: Array as unknown as PropType<RangeValue<DateType> | RangeValue<string>> },
     disabledTime: {
       type: Function as PropType<(date: EventValue<DateType>, type: RangeType) => DisabledTimes>,
     },
@@ -174,15 +196,43 @@ function rangePickerProps<DateType>() {
     },
     placeholder: Array,
     mode: { type: Array as unknown as PropType<[PanelMode, PanelMode]> },
+    onChange: {
+      type: Function as PropType<
+        (
+          value: RangeValue<DateType> | RangeValue<string> | null,
+          dateString: [string, string],
+        ) => void
+      >,
+    },
+    'onUpdate:value': {
+      type: Function as PropType<(value: RangeValue<DateType> | RangeValue<string> | null) => void>,
+    },
+    onCalendarChange: {
+      type: Function as PropType<
+        (
+          values: RangeValue<DateType> | RangeValue<string>,
+          formatString: [string, string],
+          info: RangeInfo,
+        ) => void
+      >,
+    },
+    onPanelChange: {
+      type: Function as PropType<
+        (values: RangeValue<DateType> | RangeValue<string>, modes: [PanelMode, PanelMode]) => void
+      >,
+    },
+    onOk: {
+      type: Function as PropType<(dates: RangeValue<DateType> | RangeValue<string>) => void>,
+    },
   };
 }
 
 export interface RangePickerProps<DateType> {
   allowEmpty?: [boolean, boolean];
   dateRender?: RangeDateRender<DateType>;
-  defaultPickerValue?: [DateType, DateType] | [string, string];
-  defaultValue?: [DateType, DateType] | [string, string];
-  value?: [DateType, DateType] | [string, string];
+  defaultPickerValue?: RangeValue<DateType> | RangeValue<string>;
+  defaultValue?: RangeValue<DateType> | RangeValue<string>;
+  value?: RangeValue<DateType> | RangeValue<string>;
   disabledTime?: (date: EventValue<DateType>, type: RangeType) => DisabledTimes;
   disabled?: [boolean, boolean];
   format?: string;
@@ -194,6 +244,21 @@ export interface RangePickerProps<DateType> {
   >;
   placeholder?: [string, string];
   mode?: [PanelMode, PanelMode];
+  onChange?: (
+    value: RangeValue<DateType> | RangeValue<string> | null,
+    dateString: [string, string],
+  ) => void;
+  'onUpdate:value'?: (value: RangeValue<DateType> | RangeValue<string> | null) => void;
+  onCalendarChange?: (
+    values: RangeValue<DateType> | RangeValue<string>,
+    formatString: [string, string],
+    info: RangeInfo,
+  ) => void;
+  onPanelChange?: (
+    values: RangeValue<DateType> | RangeValue<string>,
+    modes: [PanelMode, PanelMode],
+  ) => void;
+  onOk?: (dates: RangeValue<DateType> | RangeValue<string>) => void;
 }
 
 export type ExtraDatePickerProps<DateType> = {
@@ -205,9 +270,9 @@ export type ExtraDatePickerProps<DateType> = {
 
 export type ExtraRangePickerProps<DateType> = {
   valueFormat?: string;
-  defaultPickerValue?: [DateType, DateType] | [string, string];
-  defaultValue?: [DateType, DateType] | [string, string];
-  value?: [DateType, DateType] | [string, string];
+  defaultPickerValue?: RangeValue<DateType> | RangeValue<string>;
+  defaultValue?: RangeValue<DateType> | RangeValue<string>;
+  value?: RangeValue<DateType> | RangeValue<string>;
 };
 
 export { commonProps, datePickerProps, rangePickerProps };
diff --git a/components/time-picker/time-picker.tsx b/components/time-picker/time-picker.tsx
index ddafac133..a4fb17775 100644
--- a/components/time-picker/time-picker.tsx
+++ b/components/time-picker/time-picker.tsx
@@ -12,6 +12,7 @@ import type { PanelMode, RangeValue } from '../vc-picker/interface';
 import type { RangePickerSharedProps } from '../vc-picker/RangePicker';
 import devWarning from '../vc-util/devWarning';
 import { useInjectFormItemContext } from '../form/FormItemContext';
+import omit from '../_util/omit';
 
 export interface TimePickerLocale {
   placeholder?: string;
@@ -57,11 +58,7 @@ export type TimePickerProps<DateType> = CommonProps<DateType> &
     addon?: () => void;
   };
 
-function createTimePicker<
-  DateType,
-  DTimePickerProps extends TimePickerProps<DateType> = TimePickerProps<DateType>,
-  DTimeRangePickerProps extends TimeRangePickerProps<DateType> = TimeRangePickerProps<DateType>,
->(generateConfig: GenerateConfig<DateType>) {
+function createTimePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
   const DatePicker = generatePicker<DateType>(generateConfig, {
     ...timePickerProps,
     order: { type: Boolean, default: true },
@@ -69,11 +66,16 @@ function createTimePicker<
 
   const { TimePicker: InternalTimePicker, RangePicker: InternalRangePicker } = DatePicker as any;
 
-  const TimePicker = defineComponent<DTimePickerProps>({
+  const TimePicker = defineComponent({
     name: 'ATimePicker',
     inheritAttrs: false,
+    props: {
+      ...commonProps<DateType>(),
+      ...datePickerProps<DateType>(),
+      ...timePickerProps,
+      addon: { type: Function },
+    },
     slot: ['addon', 'renderExtraFooter', 'suffixIcon', 'clearIcon'],
-    emits: ['change', 'openChange', 'focus', 'blur', 'ok', 'update:value', 'update:open'],
     setup(props, { slots, expose, emit, attrs }) {
       const formItemContext = useInjectFormItemContext();
       devWarning(
@@ -114,7 +116,7 @@ function createTimePicker<
         return (
           <InternalTimePicker
             {...attrs}
-            {...restProps}
+            {...omit(restProps, ['onUpdate:value', 'onUpdate:open'])}
             id={id}
             dropdownClassName={props.popupClassName}
             mode={undefined}
@@ -134,28 +136,16 @@ function createTimePicker<
     },
   });
 
-  TimePicker.props = {
-    ...commonProps<DateType>(),
-    ...datePickerProps<DateType>(),
-    ...timePickerProps,
-    addon: { type: Function },
-  };
-
-  const TimeRangePicker = defineComponent<DTimeRangePickerProps>({
+  const TimeRangePicker = defineComponent({
     name: 'ATimeRangePicker',
     inheritAttrs: false,
+    props: {
+      ...commonProps<DateType>(),
+      ...rangePickerProps<DateType>(),
+      ...timePickerProps,
+      order: { type: Boolean, default: true },
+    },
     slot: ['renderExtraFooter', 'suffixIcon', 'clearIcon'],
-    emits: [
-      'change',
-      'panelChange',
-      'ok',
-      'openChange',
-      'update:value',
-      'update:open',
-      'calendarChange',
-      'focus',
-      'blur',
-    ],
     setup(props, { slots, expose, emit, attrs }) {
       const pickerRef = ref();
 
@@ -209,7 +199,7 @@ function createTimePicker<
         return (
           <InternalRangePicker
             {...attrs}
-            {...restProps}
+            {...omit(restProps, ['onUpdate:open', 'onUpdate:value'])}
             id={id}
             dropdownClassName={props.popupClassName}
             picker="time"
@@ -229,13 +219,6 @@ function createTimePicker<
     },
   });
 
-  TimeRangePicker.props = {
-    ...commonProps<DateType>(),
-    ...rangePickerProps<DateType>(),
-    ...timePickerProps,
-    order: { type: Boolean, default: true },
-  };
-
   return {
     TimePicker,
     TimeRangePicker,