fix(DatetimePicker): fixed show incorrect date time when dynamic set mindate or maxdate (#8640)

src/datetime-picker/DatePicker.js

@@ -30,7 +30,11 @@ export default createComponent({
 
   watch: {
     filter: 'updateInnerValue',
-    minDate: 'updateInnerValue',
+    minDate() {
+      this.$nextTick(() => {
+        this.updateInnerValue();
+      });
+    },
     maxDate: 'updateInnerValue',
 
     value(val) {

src/datetime-picker/TimePicker.js

@@ -45,7 +45,11 @@ export default createComponent({
 
   watch: {
     filter: 'updateInnerValue',
-    minHour: 'updateInnerValue',
+    minHour() {
+      this.$nextTick(() => {
+        this.updateInnerValue();
+      });
+    },
     maxHour: 'updateInnerValue',
     minMinute: 'updateInnerValue',
     maxMinute: 'updateInnerValue',

src/datetime-picker/test/date-picker.spec.js

@@ -215,7 +215,7 @@ test('use min-date with filter', async () => {
 
 test('v-model', async () => {
   const minDate = new Date(2030, 0, 0, 0, 3);
-  
+
   const wrapper = mount({
     template: `
       <van-datetime-picker
@@ -232,7 +232,7 @@ test('v-model', async () => {
   });
 
   await later();
-  
+
   wrapper.find('.van-picker__confirm').trigger('click');
   expect(wrapper.vm.date).toEqual(minDate);
 });
@@ -248,3 +248,29 @@ test('value has an inital value', () => {
   wrapper.find('.van-picker__confirm').trigger('click');
   expect(wrapper.emitted('confirm')[0][0]).toEqual(defaultValue);
 });
+
+test('change min-date and emit correct value', async () => {
+  const defaultValue = new Date(2020, 10, 2, 10, 30);
+  const wrapper = mount({
+    template: `
+    <van-datetime-picker
+      v-model="date"
+      :min-date="minDate"
+      @confirm="value => this.$emit('confirm', value)"
+    />
+    `,
+    data() {
+      return {
+        date: defaultValue,
+        minDate: new Date(2010, 0, 1, 10, 30),
+      }
+    },
+    mounted() {
+      this.minDate = defaultValue;
+    },
+  })
+
+  await later();
+  wrapper.find('.van-picker__confirm').trigger('click');
+  expect(wrapper.emitted('confirm')[0][0]).toEqual(defaultValue);
+});

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

@@ -150,3 +150,29 @@ test('set min-minute dynamically', async () => {
   wrapper.find('.van-picker__confirm').trigger('click');
   expect(wrapper.emitted('confirm')[0][0]).toEqual('13:00');
 });
+
+test('change min-hour and emit correct value', async () => {
+  const wrapper = mount({
+    template: `
+    <van-datetime-picker
+      v-model="time"
+      type="time"
+      :min-hour="minHour"
+      @confirm="value => this.$emit('confirm', value)"
+    />
+    `,
+    data() {
+      return {
+        time: '10:30',
+        minHour: 1,
+      }
+    },
+    mounted() {
+      this.minHour = 11;
+    },
+  })
+
+  await later();
+  wrapper.find('.van-picker__confirm').trigger('click');
+  expect(wrapper.emitted('confirm')[0][0]).toEqual('11:30');
+});