DatePicker: fix date-time panel user input (#9913)

* date-picker: fix date-time panel user input

* test: add test for date-time-picker change event

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

@@ -23,7 +23,8 @@
                 :placeholder="t('el.datepicker.selectDate')"
                 :value="visibleDate"
                 size="small"
-                @change.native="handleVisibleDateChange" />
+                @input="val => userInputDate = val"
+                @change="handleVisibleDateChange" />
             </span>
             <span class="el-date-picker__editor-wrap">
               <el-input
@@ -32,7 +33,8 @@
                 :placeholder="t('el.datepicker.selectTime')"
                 :value="visibleTime"
                 size="small"
-                @change.native="handleVisibleTimeChange" />
+                @input="val => userInputTime = val"
+                @change="handleVisibleTimeChange" />
               <time-picker
                 ref="timepicker"
                 :time-arrow-control="arrowControl"
@@ -227,13 +229,11 @@
       emit(value, ...args) {
         if (!value) {
           this.$emit('pick', value, ...args);
-          return;
-        }
-        if (this.showTime) {
-          this.$emit('pick', clearMilliseconds(value), ...args);
         } else {
-          this.$emit('pick', clearTime(value), ...args);
+          this.$emit('pick', this.showTime ? clearMilliseconds(value) : clearTime(value), ...args);
         }
+        this.userInputDate = null;
+        this.userInputTime = null;
       },
 
       // resetDate() {
@@ -374,8 +374,8 @@
             event.stopPropagation();
             event.preventDefault();
           }
-          if (keyCode === 13) { // Enter
+          if (keyCode === 13 && this.userInputDate === null && this.userInputTime === null) { // Enter
-            this.$emit('pick', this.date, false);
+            this.emit(this.date, false);
           }
         }
       },
@@ -411,25 +411,27 @@
         }
       },
 
-      handleVisibleTimeChange(event) {
+      handleVisibleTimeChange(value) {
-        const time = parseDate(event.target.value, this.timeFormat);
+        const time = parseDate(value, this.timeFormat);
         if (time) {
           this.date = modifyDate(time, this.year, this.month, this.monthDate);
+          this.userInputTime = null;
           this.$refs.timepicker.value = this.date;
           this.timePickerVisible = false;
-          this.$emit('pick', this.date, true);
+          this.emit(this.date, true);
         }
       },
 
-      handleVisibleDateChange(event) {
+      handleVisibleDateChange(value) {
-        const date = parseDate(event.target.value, this.dateFormat);
+        const date = parseDate(value, this.dateFormat);
         if (date) {
           if (typeof this.disabledDate === 'function' && this.disabledDate(date)) {
             return;
           }
           this.date = modifyTime(date, this.date.getHours(), this.date.getMinutes(), this.date.getSeconds());
+          this.userInputDate = null;
           this.resetView();
-          this.$emit('pick', this.date, true);
+          this.emit(this.date, true);
         }
       },
 
@@ -462,7 +464,9 @@
         showWeekNumber: false,
         timePickerVisible: false,
         format: '',
-        arrowControl: false
+        arrowControl: false,
+        userInputDate: null,
+        userInputTime: null
       };
     },
 
@@ -488,13 +492,19 @@
       },
 
       visibleTime() {
-        const date = this.value || this.defaultValue;
+        if (this.userInputTime !== null) {
-        return date ? formatDate(date, this.timeFormat) : '';
+          return this.userInputTime;
+        } else {
+          return formatDate(this.value || this.defaultValue, this.timeFormat);
+        }
       },
 
       visibleDate() {
-        const date = this.value || this.defaultValue;
+        if (this.userInputDate !== null) {
-        return date ? formatDate(date, this.dateFormat) : '';
+          return this.userInputDate;
+        } else {
+          return formatDate(this.value || this.defaultValue, this.dateFormat);
+        }
       },
 
       yearLabel() {

test/unit/specs/date-picker.spec.js

@@ -1047,6 +1047,74 @@ describe('DatePicker', () => {
       }, DELAY);
     });
 
+    describe('change event', () => {
+      it('pick date, emits on confirm', done => {
+        vm = createVue({
+          template: '<el-date-picker type="datetime" v-model="value" ref="compo" />',
+          data() {
+            return {
+              value: ''
+            };
+          }
+        }, true);
+
+        const spy = sinon.spy();
+        vm.$refs.compo.$on('change', spy);
+
+        const input = vm.$refs.compo.$el.querySelector('input');
+        input.blur();
+        input.focus();
+
+        setTimeout(_ => {
+          vm.$refs.compo.picker.$el.querySelector('td.available').click();
+          setTimeout(_ => {
+            expect(spy.called).to.equal(false);
+            vm.$refs.compo.picker.$el.querySelector('.el-picker-panel__footer .el-button--default').click();
+            setTimeout(_ => {
+              expect(vm.value).is.a('date');
+              expect(spy.calledOnce).to.equal(true);
+              done();
+            }, DELAY);
+          }, DELAY);
+        }, DELAY);
+      });
+
+      it('input date, enter, emits on confirm', done => {
+        vm = createVue({
+          template: '<el-date-picker type="datetime" v-model="value" ref="compo" />',
+          data() {
+            return {
+              value: ''
+            };
+          }
+        }, true);
+
+        const spy = sinon.spy();
+        vm.$refs.compo.$on('change', spy);
+
+        const input = vm.$refs.compo.$el.querySelector('input');
+        input.blur();
+        input.focus();
+
+        setTimeout(_ => {
+          const picker = vm.$refs.compo.picker;
+          // simplified change
+          picker.handleVisibleDateChange('2000-01-02');
+          setTimeout(_ => {
+            expect(picker.$el.querySelector('td.current').innerText.trim()).to.equal('2');
+            expect(spy.called).to.equal(false);
+            // keyDown does not work, event listener attached to document.body
+            picker.handleKeydown({ keyCode: ENTER, stopPropagation() {}, preventDefault() {} });
+            setTimeout(_ => {
+              expect(vm.value).is.a('date');
+              expect(spy.calledOnce).to.equal(true);
+              done();
+            }, DELAY);
+          }, DELAY);
+        }, DELAY);
+      });
+    });
+
     describe('cancel time', () => {
       it('cancel to empty', done => {
         vm = createVue({