Picker only emit user change (#6214)

* only emit user change for timepicker and datepicker

* Test: remove custom timeout

packages/date-picker/src/basic/date-table.vue

@@ -215,7 +215,7 @@
           this.$emit('pick', {
             minDate: this.minDate,
             maxDate: this.maxDate
-          });
+          }, true, false);
         }
       }
     },

packages/date-picker/src/basic/year-table.vue

@@ -88,11 +88,11 @@
       },
 
       nextTenYear() {
-        this.$emit('pick', Number(this.year) + 10, false);
+        this.$emit('pick', Number(this.year) + 10, false, true);
       },
 
       prevTenYear() {
-        this.$emit('pick', Number(this.year) - 10, false);
+        this.$emit('pick', Number(this.year) - 10, false, true);
       },
 
       handleYearTableClick(event) {
@@ -100,7 +100,7 @@
         if (target.tagName === 'A') {
           if (hasClass(target.parentNode, 'disabled')) return;
           const year = target.textContent || target.innerText;
-          this.$emit('pick', Number(year));
+          this.$emit('pick', Number(year), true, true);
         }
       }
     }

packages/date-picker/src/panel/date-range.vue

@@ -308,7 +308,7 @@
           this.minDate = newVal[0] ? toDate(newVal[0]) : null;
           this.maxDate = newVal[1] ? toDate(newVal[1]) : null;
           if (this.minDate) this.date = new Date(this.minDate);
-          this.handleConfirm(true);
+          this.handleConfirm(true, false);
         }
       }
     },
@@ -392,7 +392,7 @@
         }
       },
 
-      handleRangePick(val, close = true) {
+      handleRangePick(val, close = true, user = true) {
         if (this.maxDate === val.maxDate && this.minDate === val.minDate) {
           return;
         }
@@ -400,7 +400,7 @@
         this.maxDate = val.maxDate;
         this.minDate = val.minDate;
         if (!close || this.showTime) return;
-        this.handleConfirm();
+        this.handleConfirm(false, user);
       },
 
       changeToToday() {
@@ -477,9 +477,9 @@
         this.resetDate();
       },
 
-      handleConfirm(visible = false) {
+      handleConfirm(visible = false, user = true) {
         if (this.minDate && this.maxDate) {
-          this.$emit('pick', [this.minDate, this.maxDate], visible);
+          this.$emit('pick', [this.minDate, this.maxDate], visible, user);
         }
       },
 

packages/date-picker/src/panel/date.vue

@@ -161,7 +161,7 @@
           this.date = newVal;
           this.year = newVal.getFullYear();
           this.month = newVal.getMonth();
-          this.$emit('pick', newVal, false);
+          this.$emit('pick', newVal, false, false);
         }
       },
 
@@ -190,7 +190,7 @@
     methods: {
       handleClear() {
         this.date = this.$options.defaultValue ? new Date(this.$options.defaultValue) : new Date();
-        this.$emit('pick');
+        this.$emit('pick', this.date);
       },
 
       resetDate() {
@@ -256,7 +256,7 @@
         }
       },
 
-      handleTimePick(picker, visible, first) {
+      handleTimePick(picker, visible) {
         if (picker) {
           let oldDate = new Date(this.date.getTime());
           let hour = picker.getHours();
@@ -273,9 +273,7 @@
           this.date = new Date(oldDate.getTime());
         }
 
-        if (!first) {
-          this.timePickerVisible = visible;
-        }
+        this.timePickerVisible = visible;
       },
 
       handleMonthPick(month) {
@@ -294,28 +292,28 @@
         }
       },
 
-      handleDatePick(value) {
+      handleDatePick(value, close, user = true) {
         if (this.selectionMode === 'day') {
           if (!this.showTime) {
-            this.$emit('pick', new Date(value.getTime()));
+            this.$emit('pick', new Date(value.getTime()), false, user);
           }
           this.date.setFullYear(value.getFullYear());
           this.date.setMonth(value.getMonth(), value.getDate());
         } else if (this.selectionMode === 'week') {
           this.week = value.week;
-          this.$emit('pick', value.date);
+          this.$emit('pick', value.date, false, user);
         }
 
         this.resetDate();
       },
 
-      handleYearPick(year, close = true) {
+      handleYearPick(year, close = true, user) {
         this.year = year;
         if (!close) return;
 
         this.date.setFullYear(year);
         if (this.selectionMode === 'year') {
-          this.$emit('pick', new Date(year, 0, 1));
+          this.$emit('pick', new Date(year, 0, 1), false, user);
         } else {
           this.currentView = 'month';
         }
@@ -330,6 +328,7 @@
       },
 
       confirm() {
+        console.log(111);
         this.date.setMilliseconds(0);
         this.$emit('pick', this.date);
       },

packages/date-picker/src/panel/time-range.vue

@@ -147,12 +147,12 @@
           hours: time.minTime.getHours(),
           minutes: time.minTime.getMinutes(),
           seconds: time.minTime.getSeconds()
-        });
+        }, true);
         this.handleMaxChange({
           hours: time.maxTime.getHours(),
           minutes: time.maxTime.getMinutes(),
           seconds: time.maxTime.getSeconds()
-        });
+        }, true);
       },
 
       handleClear() {
@@ -163,7 +163,7 @@
         this.$emit('pick');
       },
 
-      handleChange() {
+      handleChange(notUser) {
         if (this.minTime > this.maxTime) return;
         MIN_TIME.setFullYear(this.minTime.getFullYear());
         MIN_TIME.setMonth(this.minTime.getMonth(), this.minTime.getDate());
@@ -171,10 +171,10 @@
         MAX_TIME.setMonth(this.maxTime.getMonth(), this.maxTime.getDate());
         this.$refs.minSpinner.selectableRange = [[MIN_TIME, this.maxTime]];
         this.$refs.maxSpinner.selectableRange = [[this.minTime, MAX_TIME]];
-        this.handleConfirm(true);
+        this.handleConfirm(true, false, notUser);
       },
 
-      handleMaxChange(date) {
+      handleMaxChange(date, notUser) {
         if (date.hours !== undefined) {
           this.maxTime.setHours(date.hours);
           this.maxHours = this.maxTime.getHours();
@@ -190,7 +190,7 @@
         this.handleChange();
       },
 
-      handleMinChange(date) {
+      handleMinChange(date, notUser) {
         if (date.hours !== undefined) {
           this.minTime.setHours(date.hours);
           this.minHours = this.minTime.getHours();
@@ -217,7 +217,7 @@
         this.selectionRange = [start + this.offset, end + this.offset];
       },
 
-      handleConfirm(visible = false, first = false) {
+      handleConfirm(visible = false, first = false, notUser = false) {
         const minSelectableRange = this.$refs.minSpinner.selectableRange;
         const maxSelectableRange = this.$refs.maxSpinner.selectableRange;
 
@@ -225,7 +225,7 @@
         this.maxTime = limitRange(this.maxTime, maxSelectableRange);
 
         if (first) return;
-        this.$emit('pick', [this.minTime, this.maxTime], visible, first);
+        this.$emit('pick', [this.minTime, this.maxTime], visible, !notUser);
       },
 
       adjustScrollTop() {

packages/date-picker/src/panel/time-select.vue

@@ -79,9 +79,9 @@
       value(val) {
         if (!val) return;
         if (this.minTime && compareTime(val, this.minTime) < 0) {
-          this.$emit('pick');
+          this.$emit('pick', '', false, false);
         } else if (this.maxTime && compareTime(val, this.maxTime) > 0) {
-          this.$emit('pick');
+          this.$emit('pick', '', false, false);
         }
         this.$nextTick(() => this.scrollToOption());
       }
@@ -95,7 +95,7 @@
       },
 
       handleClear() {
-        this.$emit('pick');
+        this.$emit('pick', '', false, false);
       },
 
       scrollToOption(className = 'selected') {
@@ -122,6 +122,7 @@
         }
         if (!items[index].disabled) {
           this.value = items[index].value;
+          this.$emit('pick', this.value, true);
         }
       }
     },

packages/date-picker/src/panel/time.vue

@@ -79,7 +79,7 @@
           hours: date.getHours(),
           minutes: date.getMinutes(),
           seconds: date.getSeconds()
-        });
+        }, true);
         this.$nextTick(_ => this.adjustScrollTop());
       },
 
@@ -121,7 +121,7 @@
 
     methods: {
       handleClear() {
-        this.$emit('pick');
+        this.$emit('pick', '', false, true);
       },
 
       handleCancel() {
@@ -132,10 +132,10 @@
         this.minutes = this.currentDate.getMinutes();
         this.seconds = this.currentDate.getSeconds();
         const date = new Date(limitRange(this.currentDate, this.selectableRange, 'HH:mm:ss'));
-        this.$emit('pick', date);
+        this.$emit('pick', date, false, true);
       },
 
-      handleChange(date) {
+      handleChange(date, notUser) {
         if (date.hours !== undefined) {
           this.currentDate.setHours(date.hours);
           this.hours = this.currentDate.getHours();
@@ -148,8 +148,7 @@
           this.currentDate.setSeconds(date.seconds);
           this.seconds = this.currentDate.getSeconds();
         }
-
-        this.handleConfirm(true);
+        this.handleConfirm(true, null, notUser);
       },
 
       setSelectionRange(start, end) {
@@ -157,10 +156,10 @@
         this.selectionRange = [start, end];
       },
 
-      handleConfirm(visible = false, first) {
+      handleConfirm(visible = false, first, notUser = false) {
         if (first) return;
         const date = new Date(limitRange(this.currentDate, this.selectableRange, 'HH:mm:ss'));
-        this.$emit('pick', date, visible, first);
+        this.$emit('pick', date, visible, !notUser);
       },
 
       adjustScrollTop() {

packages/date-picker/src/picker.vue

@@ -267,7 +267,6 @@ export default {
       }
     },
     displayValue(val) {
-      this.$emit('change', val);
       this.dispatch('ElFormItem', 'el.form.change');
     }
   },
@@ -492,10 +491,13 @@ export default {
       this.picker.resetView && this.picker.resetView();
 
       this.picker.$on('dodestroy', this.doDestroy);
-      this.picker.$on('pick', (date = '', visible = false) => {
+      this.picker.$on('pick', (date = '', visible = false, user = true) => {
         // do not emit if values are same
         if (!valueEquals(this.value, date)) {
           this.$emit('input', date);
+          if (user && this.value !== date) {
+            this.$nextTick(() => this.$emit('change', this.displayValue));
+          };
         }
         this.pickerVisible = this.picker.visible = visible;
         this.picker.resetView && this.picker.resetView();

packages/date-picker/src/picker/date-picker.js

@@ -45,6 +45,7 @@ export default {
       if (keyCode === 9 || keyCode === 27 || keyCode === 13) {
         this.pickerVisible = false;
         event.stopPropagation();
+        this.picker.confirm();
         this.currentValue = this.picker.date;
         this.$refs.reference.$refs.input.blur();
         return;