fix(DatetimePicker): should update value when range changed (#4676)

src/datetime-picker/DatePicker.js

@@ -29,6 +29,10 @@ export default createComponent({
   },
 
   watch: {
+    filter: 'updateInnerValue',
+    minDate: 'updateInnerValue',
+    maxDate: 'updateInnerValue',
+
     value(val) {
       val = this.formatValue(val);
 
@@ -128,8 +132,8 @@ export default createComponent({
       };
     },
 
-    onChange(picker) {
+    updateInnerValue() {
-      const indexes = picker.getIndexes();
+      const indexes = this.$refs.picker.getIndexes();
       const getValue = index => getTrueValue(this.originColumns[index].values[indexes[index]]);
 
       const year = getValue(0);
@@ -156,6 +160,10 @@ export default createComponent({
       const value = new Date(year, month - 1, date, hour, minute);
 
       this.innerValue = this.formatValue(value);
+    },
+
+    onChange(picker) {
+      this.updateInnerValue();
 
       this.$nextTick(() => {
         this.$nextTick(() => {
@@ -164,8 +172,10 @@ export default createComponent({
       });
     },
 
-    updateColumnValue(value) {
+    updateColumnValue() {
+      const value = this.innerValue;
       const { formatter } = this;
+
       let values = [
         formatter('year', `${value.getFullYear()}`),
         formatter('month', padZero(value.getMonth() + 1)),

src/datetime-picker/TimePicker.js

@@ -44,6 +44,12 @@ export default createComponent({
   },
 
   watch: {
+    filter: 'updateInnerValue',
+    minHour: 'updateInnerValue',
+    maxHour: 'updateInnerValue',
+    minMinute: 'updateInnerValue',
+    maxMinute: 'updateInnerValue',
+
     value(val) {
       val = this.formatValue(val);
 
@@ -67,13 +73,17 @@ export default createComponent({
       return `${hour}:${minute}`;
     },
 
-    onChange(picker) {
+    updateInnerValue() {
-      const indexes = picker.getIndexes();
+      const indexes = this.$refs.picker.getIndexes();
       const hour = this.originColumns[0].values[indexes[0]];
       const minute = this.originColumns[1].values[indexes[1]];
       const value = `${hour}:${minute}`;
 
       this.innerValue = this.formatValue(value);
+    },
+
+    onChange(picker) {
+      this.updateInnerValue();
 
       this.$nextTick(() => {
         this.$nextTick(() => {
@@ -82,9 +92,9 @@ export default createComponent({
       });
     },
 
-    updateColumnValue(value) {
+    updateColumnValue() {
       const { formatter } = this;
-      const pair = value.split(':');
+      const pair = this.innerValue.split(':');
       const values = [formatter('hour', pair[0]), formatter('minute', pair[1])];
 
       this.$nextTick(() => {

src/datetime-picker/shared.js

@@ -51,17 +51,15 @@ export const TimePickerMixin = {
   },
 
   watch: {
+    columns: 'updateColumnValue',
+
     innerValue(val) {
       this.$emit('input', val);
-    },
-
-    columns() {
-      this.updateColumnValue(this.innerValue);
     }
   },
 
   mounted() {
-    this.updateColumnValue(this.innerValue);
+    this.updateColumnValue();
   },
 
   methods: {

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

@@ -92,3 +92,18 @@ test('dynamic set value', () => {
   expect(wrapper.emitted('confirm')[0][0]).toEqual('00:00');
   expect(wrapper.emitted('confirm')[1][0]).toEqual('22:30');
 });
+
+test('change min-minute and emit correct value', async () => {
+  const wrapper = mount(TimePicker, {
+    propsData: {
+      value: '12:00',
+      minMinute: 0
+    }
+  });
+
+  await later();
+
+  wrapper.setProps({ minMinute: 30 });
+  wrapper.find('.van-picker__confirm').trigger('click');
+  expect(wrapper.emitted('confirm')[0][0]).toEqual('12:30');
+});