diff --git a/components/calendar/Header.tsx b/components/calendar/Header.tsx
index 3e55bdfca..374e186d9 100644
--- a/components/calendar/Header.tsx
+++ b/components/calendar/Header.tsx
@@ -39,7 +39,6 @@ function YearSelect<DateType>(props: SharedProps<DateType>) {
   for (let index = start; index < end; index++) {
     options.push({ label: `${index}${suffix}`, value: index });
   }
-
   return (
     <Select
       size={fullscreen ? undefined : 'small'}
diff --git a/components/calendar/generateCalendar.tsx b/components/calendar/generateCalendar.tsx
index 51b1bed5c..dc60bd223 100644
--- a/components/calendar/generateCalendar.tsx
+++ b/components/calendar/generateCalendar.tsx
@@ -130,7 +130,7 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
         value: toRef(props, 'mode'),
       });
 
-      const panelMode = computed(() => (mergedValue.value === 'year' ? 'month' : 'date'));
+      const panelMode = computed(() => (mergedMode.value === 'year' ? 'month' : 'date'));
 
       const mergedDisabledDate = computed(() => {
         return (date: DateType) => {
@@ -158,7 +158,7 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
           ) {
             triggerPanelChange(date, mergedMode.value);
           }
-
+          emit('update:value', date);
           emit('change', date);
         }
       };
@@ -204,7 +204,6 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
           if (dateFullCellRender) {
             return dateFullCellRender({ current: date });
           }
-
           return (
             <div
               class={classNames(
@@ -251,7 +250,6 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
             </div>
           );
         };
-
         return (
           <div
             {...attrs}
diff --git a/components/vc-picker/PickerPanel.tsx b/components/vc-picker/PickerPanel.tsx
index c107d3d79..f52db89b8 100644
--- a/components/vc-picker/PickerPanel.tsx
+++ b/components/vc-picker/PickerPanel.tsx
@@ -214,7 +214,7 @@ function PickerPanel<DateType>() {
           const now = generateConfig.getNow();
           if (!date) return now;
           // When value is null and set showTime
-          if (!mergedValue && props.showTime) {
+          if (!mergedValue.value && props.showTime) {
             if (typeof showTime === 'object') {
               return setDateTime(generateConfig, date, showTime.defaultValue || now);
             }
@@ -388,6 +388,16 @@ function PickerPanel<DateType>() {
         hidePrevBtn: computed(() => inRange.value && panelPosition.value === 'right'),
         hideNextBtn: computed(() => inRange.value && panelPosition.value === 'left'),
       });
+
+      watch(
+        () => props.value,
+        () => {
+          if (props.value) {
+            setInnerViewDate(props.value);
+          }
+        },
+      );
+
       return () => {
         const {
           prefixCls = 'ant-picker',
@@ -545,7 +555,7 @@ function PickerPanel<DateType>() {
             showNow,
             onNow: needConfirmButton.value && onNow,
             onOk: () => {
-              if (mergedValue) {
+              if (mergedValue.value) {
                 triggerSelect(mergedValue.value, 'submit', true);
                 if (onOk) {
                   onOk(mergedValue.value);