fix(DatetimePicker): vant3 fixed incorrect value when dynamic set min/max (#8658)

src/datetime-picker/DatePicker.tsx

@@ -299,7 +299,14 @@ export default defineComponent({
       emit('update:modelValue', oldValue ? value : null)
     );
 
-    watch(() => [props.filter, props.minDate, props.maxDate], updateInnerValue);
+    watch(() => [props.filter, props.maxDate], updateInnerValue);
+
+    watch(
+      () => props.minDate,
+      () => {
+        nextTick(updateInnerValue);
+      }
+    );
 
     watch(
       () => props.modelValue,

src/datetime-picker/TimePicker.tsx

@@ -146,16 +146,17 @@ export default defineComponent({
     watch(columns, updateColumnValue);
 
     watch(
-      () => [
+      () => [props.filter, props.maxHour, props.minMinute, props.maxMinute],
-        props.filter,
-        props.minHour,
-        props.maxHour,
-        props.minMinute,
-        props.maxMinute,
-      ],
       updateInnerValue
     );
 
+    watch(
+      () => props.minHour,
+      () => {
+        nextTick(updateInnerValue);
+      }
+    );
+
     watch(currentDate, (value) => emit('update:modelValue', value));
 
     watch(

src/datetime-picker/test/datetime-picker.spec.tsx

@@ -1,5 +1,7 @@
 import { DatetimePicker } from '..';
-import { mount } from '../../../test';
+import { mount, later } from '../../../test';
+import { reactive } from 'vue';
+import { useExpose } from '../../composables/use-expose';
 
 test('confirm & cancel event', () => {
   const onConfirm = jest.fn();
@@ -49,3 +51,38 @@ test('should render title slot correctly', () => {
 
   expect(wrapper.find('.van-picker__toolbar').html()).toMatchSnapshot();
 });
+
+test('should emit value correctly when dynamic change min-date', async () => {
+  const defaultValue = new Date(2020, 10, 2, 10, 30);
+  const wrapper = mount({
+    emits: ['confirm'],
+    setup(_, { emit }) {
+      const state = reactive({
+        date: defaultValue,
+        minDate: new Date(2010, 0, 1, 10, 30),
+      });
+
+      const onChange = () => {
+        state.minDate = state.date;
+      };
+
+      useExpose({
+        onChange,
+      });
+
+      return () => (
+        <DatetimePicker
+          v-model={state.date}
+          minDate={state.minDate}
+          onConfirm={(value: Date) => emit('confirm', value)}
+        />
+      );
+    },
+  });
+
+  await later();
+  (wrapper.vm as Record<string, any>).onChange();
+  await later();
+  wrapper.find('.van-picker__confirm').trigger('click');
+  expect(wrapper.emitted<[Date]>('confirm')![0][0]).toEqual(defaultValue);
+});

src/datetime-picker/test/time-picker.spec.tsx

@@ -1,6 +1,7 @@
 import TimePicker from '../TimePicker';
 import { mount, later, triggerDrag } from '../../../test';
-import { ref } from 'vue';
+import { ref, reactive } from 'vue';
+import { useExpose } from '../../composables/use-expose';
 
 function filter(type: string, options: string[]): string[] {
   const mod = type === 'minute' ? 10 : 5;
@@ -150,3 +151,37 @@ test('set min-minute dynamically', async () => {
   await later();
   expect(wrapper.emitted<[string]>('change')![0][0]).toEqual('13:00');
 });
+
+test('should emit value correctly when dynamic change min-hour', async () => {
+  const wrapper = mount({
+    emits: ['confirm'],
+    setup(_, { emit }) {
+      const state = reactive({
+        time: '10:30',
+        minHour: 1,
+      });
+
+      const onChange = () => {
+        state.minHour = 11;
+      };
+
+      useExpose({
+        onChange,
+      });
+
+      return () => (
+        <TimePicker
+          v-model={state.time}
+          minHour={state.minHour}
+          onConfirm={(value: Date) => emit('confirm', value)}
+        />
+      );
+    },
+  });
+
+  await later();
+  (wrapper.vm as Record<string, any>).onChange();
+  await later();
+  wrapper.find('.van-picker__confirm').trigger('click');
+  expect(wrapper.emitted<[Date]>('confirm')![0][0]).toEqual('11:30');
+});