refactor: date

components/_util/hooks/useMergedState.ts

@@ -1,4 +1,5 @@
 import type { Ref, UnwrapRef } from 'vue';
+import { toRaw } from 'vue';
 import { watchEffect } from 'vue';
 import { unref } from 'vue';
 import { watch } from 'vue';
@@ -36,7 +37,7 @@ export default function useMergedState<T, R = Ref<T>>(
   function triggerChange(newValue: T) {
     const preVal = mergedValue.value;
     innerValue.value = newValue;
-    if (mergedValue.value !== newValue && option.onChange) {
+    if (toRaw(mergedValue.value) !== newValue && option.onChange) {
       option.onChange(newValue, preVal);
     }
   }

components/date-picker/generatePicker/generateRangePicker.tsx

@@ -47,9 +47,10 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
           bordered = true,
           placeholder,
           suffixIcon = slots.suffixIcon?.(),
+          picker = 'date',
           ...restProps
         } = p;
-        const { format, showTime, picker } = p as any;
+        const { format, showTime } = p as any;
 
         let additionalOverrideProps: any = {};
 
@@ -76,6 +77,7 @@ export default function generateRangePicker<DateType>(generateConfig: GenerateCo
             allowClear
             transitionName={`${rootPrefixCls.value}-slide-up`}
             {...additionalOverrideProps}
+            picker={picker}
             class={classNames(
               {
                 [`${pre}-${size.value}`]: size.value,

components/date-picker/index.tsx

@@ -1,5 +1,5 @@
 import type { Moment } from 'moment';
-import { App } from 'vue';
+import type { App } from 'vue';
 import momentGenerateConfig from '../vc-picker/generate/moment';
 import type {
   PickerProps,

components/vc-picker/Picker.tsx

@@ -566,7 +566,7 @@ function Picker<DateType>() {
                     inputReadOnly || typeof formatList.value[0] === 'function' || !typing.value
                   }
                   value={hoverValue.value || text.value}
-                  onChange={(e: ChangeEvent) => {
+                  onInput={(e: ChangeEvent) => {
                     triggerTextChange(e.target.value);
                   }}
                   autofocus={autofocus}

components/vc-picker/PickerPanel.tsx

@@ -132,8 +132,8 @@ function PickerPanel<DateType>() {
       defaultPickerValue: Object,
       disabledDate: Function,
       mode: String,
-      picker: String,
-      tabindex: [Number, String],
+      picker: { type: String, default: 'date' },
+      tabindex: { type: [Number, String], default: 0 },
       showNow: Boolean,
       showTime: Boolean,
       showToday: Boolean,
@@ -430,7 +430,6 @@ function PickerPanel<DateType>() {
         };
         delete pickerProps.onChange;
         delete pickerProps.onSelect;
-
         switch (mergedMode.value) {
           case 'decade':
             panelNode = (

components/vc-picker/RangePicker.tsx

@@ -983,9 +983,8 @@ function RangerPicker<DateType>() {
           });
 
           if (picker !== 'time' && !showTime) {
-            const viewDate = mergedActivePickerIndex.value
-              ? startViewDate.value
-              : endViewDate.value;
+            const viewDate =
+              mergedActivePickerIndex.value === 0 ? startViewDate.value : endViewDate.value;
             const nextViewDate = getClosingViewDate(viewDate, picker, generateConfig);
             const currentMode = mergedModes.value[mergedActivePickerIndex.value];
 
@@ -1166,7 +1165,7 @@ function RangerPicker<DateType>() {
                     inputReadOnly || typeof formatList.value[0] === 'function' || !startTyping.value
                   }
                   value={startHoverValue.value || startText.value}
-                  onChange={(e: ChangeEvent) => {
+                  onInput={(e: ChangeEvent) => {
                     triggerStartTextChange(e.target.value);
                   }}
                   autofocus={autofocus}
@@ -1193,7 +1192,7 @@ function RangerPicker<DateType>() {
                     inputReadOnly || typeof formatList.value[0] === 'function' || !endTyping.value
                   }
                   value={endHoverValue.value || endText.value}
-                  onChange={(e: ChangeEvent) => {
+                  onInput={(e: ChangeEvent) => {
                     triggerEndTextChange(e.target.value);
                   }}
                   placeholder={getValue(placeholder, 1) || ''}

components/vc-picker/hooks/useRangeViewDates.ts

@@ -2,7 +2,8 @@ import type { RangeValue, PickerMode } from '../interface';
 import type { GenerateConfig } from '../generate';
 import { getValue, updateValues } from '../utils/miscUtil';
 import { getClosingViewDate, isSameYear, isSameMonth, isSameDecade } from '../utils/dateUtil';
-import type { ComputedRef, Ref } from 'vue';
+import type { Ref } from 'vue';
+import { watch } from 'vue';
 import { computed } from 'vue';
 import { ref } from 'vue';
 
@@ -73,11 +74,7 @@ export default function useRangeViewDates<DateType>({
   picker: Ref<PickerMode>;
   defaultDates: RangeValue<DateType> | undefined;
   generateConfig: Ref<GenerateConfig<DateType>>;
-}): [
-  ComputedRef<DateType>,
-  ComputedRef<DateType>,
-  (viewDate: DateType | null, index: 0 | 1) => void,
-] {
+}): [Ref<DateType>, Ref<DateType>, (viewDate: DateType | null, index: 0 | 1) => void] {
   const defaultViewDates = ref<[DateType | null, DateType | null]>([
     getValue(defaultDates, 0),
     getValue(defaultDates, 1),
@@ -86,7 +83,7 @@ export default function useRangeViewDates<DateType>({
   const startDate = computed(() => getValue(values.value, 0));
   const endDate = computed(() => getValue(values.value, 1));
 
-  function getViewDate(index: 0 | 1): DateType {
+  const getViewDate = (index: 0 | 1): DateType => {
     // If set default view date, use it
     if (defaultViewDates.value[index]) {
       return defaultViewDates.value[index]! as DateType;
@@ -99,14 +96,19 @@ export default function useRangeViewDates<DateType>({
       endDate.value ||
       generateConfig.value.getNow()
     );
-  }
-  const startViewDate = computed(() => {
-    return getViewDate(0);
-  });
+  };
 
-  const endViewDate = computed(() => {
-    return getViewDate(1);
-  });
+  const startViewDate = ref(null);
+
+  const endViewDate = ref(null);
+  watch(
+    viewDates,
+    () => {
+      startViewDate.value = getViewDate(0);
+      endViewDate.value = getViewDate(1);
+    },
+    { immediate: true },
+  );
 
   function setViewDate(viewDate: DateType | null, index: 0 | 1) {
     if (viewDate) {