diff --git a/components/calendar/generateCalendar.tsx b/components/calendar/generateCalendar.tsx
index dc60bd223..34242a5e1 100644
--- a/components/calendar/generateCalendar.tsx
+++ b/components/calendar/generateCalendar.tsx
@@ -115,13 +115,32 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
     setup(props, { emit, slots, attrs }) {
       const { prefixCls, direction } = useConfigInject('picker', props);
       const calendarPrefixCls = computed(() => `${prefixCls.value}-calendar`);
+      const maybeToString = (date: DateType) => {
+        return props.valueFormat ? generateConfig.toString(date, props.valueFormat) : date;
+      };
+      const value = computed(() => {
+        if (props.value) {
+          return props.valueFormat
+            ? (generateConfig.toDate(props.value, props.valueFormat) as DateType)
+            : (props.value as DateType);
+        }
+        return props.value as DateType;
+      });
+      const defaultValue = computed(() => {
+        if (props.defaultValue) {
+          return props.valueFormat
+            ? (generateConfig.toDate(props.defaultValue, props.valueFormat) as DateType)
+            : (props.defaultValue as DateType);
+        }
+        return props.defaultValue as DateType;
+      });
 
       // Value
       const [mergedValue, setMergedValue] = useMergedState(
-        () => props.value || generateConfig.getNow(),
+        () => value.value || generateConfig.getNow(),
         {
-          defaultValue: props.defaultValue,
-          value: toRef(props, 'value'),
+          defaultValue: defaultValue.value,
+          value: value,
         },
       );
 
@@ -144,7 +163,7 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
 
       // ====================== Events ======================
       const triggerPanelChange = (date: DateType, newMode: CalendarMode) => {
-        emit('panelChange', date, newMode);
+        emit('panelChange', maybeToString(date), newMode);
       };
 
       const triggerChange = (date: DateType) => {
@@ -158,8 +177,9 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
           ) {
             triggerPanelChange(date, mergedMode.value);
           }
-          emit('update:value', date);
-          emit('change', date);
+          const val = maybeToString(date);
+          emit('update:value', val);
+          emit('change', val);
         }
       };
 
@@ -170,7 +190,7 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
 
       const onInternalSelect = (date: DateType) => {
         triggerChange(date);
-        emit('select', date);
+        emit('select', maybeToString(date));
       };
       // ====================== Locale ======================
       const defaultLocale = computed(() => {
diff --git a/components/date-picker/generatePicker/generateRangePicker.tsx b/components/date-picker/generatePicker/generateRangePicker.tsx
index 9644af395..5a6ce660c 100644
--- a/components/date-picker/generatePicker/generateRangePicker.tsx
+++ b/components/date-picker/generatePicker/generateRangePicker.tsx
@@ -73,10 +73,11 @@ export default function generateRangePicker<DateType>(
             pickerRef.value?.blur();
           },
         });
+        const maybeToStrings = (dates: DateType[]) => {
+          return props.valueFormat ? generateConfig.toString(dates, props.valueFormat) : dates;
+        };
         const onChange = (dates: [DateType, DateType], dateStrings: [string, string]) => {
-          const values = props.valueFormat
-            ? generateConfig.toString(dates, props.valueFormat)
-            : dates;
+          const values = maybeToStrings(dates);
           emit('update:value', values);
           emit('change', values, dateStrings);
         };
@@ -91,15 +92,11 @@ export default function generateRangePicker<DateType>(
           emit('blur');
         };
         const onPanelChange = (dates: RangeValue<DateType>, modes: [PanelMode, PanelMode]) => {
-          const values = props.valueFormat
-            ? generateConfig.toString(dates, props.valueFormat)
-            : dates;
+          const values = maybeToStrings(dates);
           emit('panelChange', values, modes);
         };
-        const onOk = (dates: DateType) => {
-          const value = props.valueFormat
-            ? generateConfig.toString(dates, props.valueFormat)
-            : dates;
+        const onOk = (dates: DateType[]) => {
+          const value = maybeToStrings(dates);
           emit('ok', value);
         };
         const onCalendarChange: RangePickerSharedProps<DateType>['onCalendarChange'] = (
@@ -107,9 +104,7 @@ export default function generateRangePicker<DateType>(
           dateStrings: [string, string],
           info,
         ) => {
-          const values = props.valueFormat
-            ? generateConfig.toString(dates, props.valueFormat)
-            : dates;
+          const values = maybeToStrings(dates);
           emit('calendarChange', values, dateStrings, info);
         };
         const [contextLocale] = useLocaleReceiver('DatePicker', enUS);
diff --git a/components/date-picker/generatePicker/generateSinglePicker.tsx b/components/date-picker/generatePicker/generateSinglePicker.tsx
index d947729eb..f8aa817af 100644
--- a/components/date-picker/generatePicker/generateSinglePicker.tsx
+++ b/components/date-picker/generatePicker/generateSinglePicker.tsx
@@ -82,8 +82,11 @@ export default function generatePicker<DateType>(
             pickerRef.value?.blur();
           },
         });
+        const maybeToString = (date: DateType) => {
+          return props.valueFormat ? generateConfig.toString(date, props.valueFormat) : date;
+        };
         const onChange = (date: DateType, dateString: string) => {
-          const value = props.valueFormat ? generateConfig.toString(date, props.valueFormat) : date;
+          const value = maybeToString(date);
           emit('update:value', value);
           emit('change', value, dateString);
         };
@@ -98,11 +101,11 @@ export default function generatePicker<DateType>(
           emit('blur');
         };
         const onPanelChange = (date: DateType, mode: PanelMode | null) => {
-          const value = props.valueFormat ? generateConfig.toString(date, props.valueFormat) : date;
+          const value = maybeToString(date);
           emit('panelChange', value, mode);
         };
         const onOk = (date: DateType) => {
-          const value = props.valueFormat ? generateConfig.toString(date, props.valueFormat) : date;
+          const value = maybeToString(date);
           emit('ok', value);
         };
 
diff --git a/components/time-picker/time-picker.tsx b/components/time-picker/time-picker.tsx
index 2849f061c..dc651324d 100644
--- a/components/time-picker/time-picker.tsx
+++ b/components/time-picker/time-picker.tsx
@@ -139,7 +139,7 @@ function createTimePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
         },
       });
       const onChange = (
-        values: [DateType, DateType] | [string, string],
+        values: RangeValue<string> | RangeValue<DateType>,
         dateStrings: [string, string],
       ) => {
         emit('update:value', values);
@@ -156,16 +156,16 @@ function createTimePicker<DateType>(generateConfig: GenerateConfig<DateType>) {
         emit('blur');
       };
       const onPanelChange = (
-        values: string | RangeValue<DateType>,
+        values: RangeValue<string> | RangeValue<DateType>,
         modes: [PanelMode, PanelMode],
       ) => {
         emit('panelChange', values, modes);
       };
-      const onOk = (value: DateType) => {
-        emit('ok', value);
+      const onOk = (values: RangeValue<string> | RangeValue<DateType>) => {
+        emit('ok', values);
       };
       const onCalendarChange: RangePickerSharedProps<DateType>['onCalendarChange'] = (
-        values: [DateType, DateType] | [string, string],
+        values: RangeValue<string> | RangeValue<DateType>,
         dateStrings: [string, string],
         info,
       ) => {
diff --git a/examples/App.vue b/examples/App.vue
index 0ffd6aa97..696cba1fb 100644
--- a/examples/App.vue
+++ b/examples/App.vue
@@ -1,19 +1,27 @@
 <template>
-  <a-calendar v-model:value="value" @panelChange="onPanelChange" />
+  <a-alert :message="`You selected date: ${selectedValue && selectedValue.format('YYYY-MM-DD')}`" />
+  <a-calendar :value="date" @select="onSelect" @panelChange="onPanelChange" />
 </template>
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
-import { Dayjs } from 'dayjs';
+import dayjs, { Dayjs } from 'dayjs';
 
 export default defineComponent({
   setup() {
-    const value = ref<Dayjs>();
-    const onPanelChange = (value: Dayjs, mode: string) => {
-      console.log(value, mode);
-    };
+    const date = ref(dayjs('2017-01-25'));
+    const selectedValue = ref(dayjs('2017-01-25'));
 
+    const onSelect = (value: Dayjs) => {
+      date.value = value;
+      selectedValue.value = value;
+    };
+    const onPanelChange = (value: Dayjs) => {
+      date.value = value;
+    };
     return {
-      value,
+      date,
+      selectedValue,
+      onSelect,
       onPanelChange,
     };
   },