fix(DatetimePicker): fix change max-* emit incorrect value (#8977)

* fix(DatetimePicker): fix change max-* emit incorrect value

* test(DatetimePicker): add max-minute test

* test(DatetimePicker): test case

* test(DatetimePicker): update test case name

src/datetime-picker/DatePicker.js

@@ -35,8 +35,13 @@ export default createComponent({
         this.updateInnerValue();
       });
     },
-    maxDate: 'updateInnerValue',
-
+    maxDate(value) {
+      if (this.innerValue.valueOf() >= value.valueOf()) {
+        this.innerValue = value;
+      } else {
+        this.updateInnerValue();
+      }
+    },
     value(val) {
       val = this.formatValue(val);
 

src/datetime-picker/TimePicker.js

@@ -50,10 +50,25 @@ export default createComponent({
         this.updateInnerValue();
       });
     },
-    maxHour: 'updateInnerValue',
+    maxHour(value) {
+      const [hour, minute] = this.innerValue.split(':');
+      if (hour >= value) {
+        this.innerValue = this.formatValue(`${value}:${minute}`);
+        this.updateColumnValue();
+      } else {
+        this.updateInnerValue();
+      }
+    },
     minMinute: 'updateInnerValue',
-    maxMinute: 'updateInnerValue',
-
+    maxMinute(value) {
+      const [hour, minute] = this.innerValue.split(':');
+      if (minute >= value) {
+        this.innerValue = this.formatValue(`${hour}:${value}`);
+        this.updateColumnValue();
+      } else {
+        this.updateInnerValue();
+      }
+    },
     value(val) {
       val = this.formatValue(val);
 

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

@@ -249,7 +249,7 @@ test('value has an inital value', () => {
   expect(wrapper.emitted('confirm')[0][0]).toEqual(defaultValue);
 });
 
-test('change min-date and emit correct value', async () => {
+test('dynamic set min-date then emit correct value', async () => {
   const defaultValue = new Date(2020, 10, 2, 10, 30);
   const wrapper = mount({
     template: `
@@ -268,9 +268,66 @@ test('change min-date and emit correct value', async () => {
     mounted() {
       this.minDate = defaultValue;
     },
-  })
+  });
 
   await later();
   wrapper.find('.van-picker__confirm').trigger('click');
   expect(wrapper.emitted('confirm')[0][0]).toEqual(defaultValue);
 });
+
+test('dynamic set max-date then emit correct value', async () => {
+  const date = new Date(2020, 10, 2, 10, 30);
+  const minDate = new Date(0);
+  const wrapper = mount({
+    template: `
+      <van-datetime-picker
+        v-model="date"
+        :min-date="minDate"
+        :max-date="maxDate"
+        @confirm="value => this.$emit('confirm', value)"
+      />
+    `,
+
+    data() {
+      return {
+        date,
+        minDate,
+        maxDate: new Date(2030, 0, 1, 10, 30),
+      };
+    },
+
+    methods: {
+      onChangeMaxDate(date) {
+        this.maxDate = date;
+      },
+    },
+  });
+
+  await later();
+  wrapper.find('.van-picker__confirm').trigger('click');
+  expect(wrapper.emitted('confirm')[0][0]).toEqual(date);
+
+  await later();
+  wrapper.vm.onChangeMaxDate(new Date(2029, 10, 10, 10, 10));
+  wrapper.find('.van-picker__confirm').trigger('click');
+  expect(wrapper.emitted('confirm')[1][0]).toEqual(date);
+
+  await later();
+  wrapper.vm.onChangeMaxDate(new Date(2020, 10, 10, 10, 10));
+  wrapper.find('.van-picker__confirm').trigger('click');
+  expect(wrapper.emitted('confirm')[2][0]).toEqual(date);
+
+  await later();
+  wrapper.vm.onChangeMaxDate(new Date(2019, 10, 10, 10, 10));
+  wrapper.find('.van-picker__confirm').trigger('click');
+  expect(wrapper.emitted('confirm')[3][0]).toEqual(
+    new Date(2019, 10, 10, 10, 10)
+  );
+
+  await later();
+  wrapper.vm.onChangeMaxDate(new Date(2040, 10, 10, 10, 10));
+  wrapper.find('.van-picker__confirm').trigger('click');
+  expect(wrapper.emitted('confirm')[4][0]).toEqual(
+    new Date(2019, 10, 10, 10, 10)
+  );
+});

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

@@ -111,22 +111,6 @@ test('change min-minute and emit correct value', async () => {
   expect(wrapper.emitted('confirm')[0][0]).toEqual('12:30');
 });
 
-test('set max-hour & max-minute smaller than current then emit correct value', async () => {
-  const wrapper = mount(TimePicker, {
-    propsData: {
-      value: '23:59',
-    },
-  });
-  await later();
-  wrapper.setProps({
-    maxHour: 2,
-    maxMinute: 2,
-  });
-
-  wrapper.find('.van-picker__confirm').trigger('click');
-  expect(wrapper.emitted('confirm')[0][0]).toEqual('00:00');
-});
-
 test('set min-minute dynamically', async () => {
   const wrapper = mount({
     template: `
@@ -151,13 +135,14 @@ test('set min-minute dynamically', async () => {
   expect(wrapper.emitted('confirm')[0][0]).toEqual('13:00');
 });
 
-test('change min-hour and emit correct value', async () => {
+test('dynamic set min-hour & min-minute then emit correct value', async () => {
   const wrapper = mount({
     template: `
     <van-datetime-picker
       v-model="time"
       type="time"
       :min-hour="minHour"
+      :min-minute="minMinute"
       @confirm="value => this.$emit('confirm', value)"
     />
     `,
@@ -165,14 +150,68 @@ test('change min-hour and emit correct value', async () => {
       return {
         time: '10:30',
         minHour: 1,
+        minMinute: 20,
       }
     },
     mounted() {
       this.minHour = 11;
+      this.minMinute = 40;
     },
   })
 
   await later();
   wrapper.find('.van-picker__confirm').trigger('click');
-  expect(wrapper.emitted('confirm')[0][0]).toEqual('11:30');
+  expect(wrapper.emitted('confirm')[0][0]).toEqual('11:40');
+});
+
+test('dynamic set max-hour & max-minute then emit correct value', async () => {
+  const wrapper = mount({
+    template: `
+      <van-datetime-picker
+        v-model="time"
+        type="time"
+        :max-hour="maxHour"
+        :max-minute="maxMinute"
+        @confirm="value => this.$emit('confirm', value)"
+      />
+    `,
+
+    data() {
+      return {
+        time: '12:30',
+        minHour: 1,
+        minMinute: 1,
+        maxHour: 20,
+        maxMinute: 59,
+      }
+    },
+  })
+
+  const confirm = wrapper.find('.van-picker__confirm');
+
+  await later();
+  confirm.trigger('click');
+  expect(wrapper.emitted('confirm')[0][0]).toEqual('12:30');
+
+  await later();
+  wrapper.setData({ maxHour: 20, maxMinute: 50 });
+  confirm.trigger('click');
+  expect(wrapper.emitted('confirm')[1][0]).toEqual('12:30');
+
+  await later();
+  wrapper.setData({ maxHour: 12, maxMinute: 30 });
+  confirm.trigger('click');
+  expect(wrapper.emitted('confirm')[2][0]).toEqual('12:30');
+
+  await later();
+  wrapper.setData({ maxHour: 11, maxMinute: 20 });
+  confirm.trigger('click');
+  expect(wrapper.emitted('confirm')[3][0]).toEqual('11:20');
+
+  await later();
+  wrapper.setData({ maxHour: 14 });
+  await later();
+  wrapper.setData({ maxMinute: 25 });
+  wrapper.find('.van-picker__confirm').trigger('click');
+  expect(wrapper.emitted('confirm')[4][0]).toEqual('11:20');
 });