DatePicker: support clearing value using delete (#9409)

* date-picker: fix #9276

https://github.com/ElemeFE/element/issues/9276

* test: fix broken test for form/date-picker

packages/date-picker/src/picker.vue

@@ -14,9 +14,9 @@
     @keydown.native="handleKeydown"
     :value="displayValue"
     @input="value => userInput = value"
+    @change="handleChange"
     @mouseenter.native="handleMouseEnter"
     @mouseleave.native="showClose = false"
-    @change.native="handleChange"
     :validateEvent="false"
     :prefix-icon="triggerClass"
     ref="reference">
@@ -545,6 +545,11 @@ export default {
           }
         }
       }
+      if (this.userInput === '') {
+        this.emitInput(null);
+        this.emitChange(null);
+        this.userInput = null;
+      }
     },
 
     handleStartInput(event) {
@@ -648,9 +653,8 @@ export default {
       }
 
       // Enter
-      if (keyCode === 13 && this.displayValue) {
+      if (keyCode === 13) {
-        const value = this.parseString(this.displayValue);
+        if (this.userInput === '' || this.isValidValue(this.parseString(this.displayValue))) {
-        if (this.isValidValue(value)) {
           this.handleChange();
           this.pickerVisible = this.picker.visible = false;
           this.blur();

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

@@ -645,6 +645,66 @@ describe('DatePicker', () => {
     });
   });
 
+  describe('can be cleared using keyboard', () => {
+    it('works for type=date, when blur', done => {
+      vm = createVue({
+        template: `
+          <el-date-picker ref="compo" v-model="value" format="yyyy-MM-dd" type="date" />
+        `,
+        data() {
+          return {
+            value: new Date()
+          };
+        }
+      }, true);
+
+      const input = vm.$el.querySelector('input');
+
+      input.blur();
+      input.focus();
+
+      setTimeout(_ => {
+        // NOTE: simplified test
+        vm.$refs.compo.userInput = '';
+        vm.$refs.compo.handleChange();
+        setTimeout(_ => {
+          expect(vm.value).to.equal(null);
+          done();
+        }, DELAY);
+      }, DELAY);
+    });
+
+    it('works for type=date, when keydown.enter', done => {
+      vm = createVue({
+        template: `
+          <el-date-picker ref="compo" v-model="value" format="yyyy-MM-dd" type="date" />
+        `,
+        data() {
+          return {
+            value: new Date()
+          };
+        }
+      }, true);
+
+      const input = vm.$el.querySelector('input');
+
+      input.blur();
+      input.focus();
+
+      setTimeout(_ => {
+        // NOTE: simplified test
+        vm.$refs.compo.userInput = '';
+        keyDown(input, ENTER);
+        setTimeout(_ => {
+          expect(vm.value).to.equal(null);
+          done();
+        }, DELAY);
+      }, DELAY);
+    });
+
+    // TODO: implement the same feature for range panels
+  });
+
   describe('nagivation', _ => {
     const click = (el, cbk = () => {}) => {
       el.click();

test/unit/specs/form.spec.js

@@ -417,10 +417,12 @@ describe('Form', () => {
                 el.dispatchEvent(evt);
               };
               keyDown(input, 37);
-              keyDown(input, 13);
               setTimeout(_ => {
-                expect(field.validateMessage).to.equal('');
+                keyDown(input, 13);
-                done();
+                setTimeout(_ => {
+                  expect(field.validateMessage).to.equal('');
+                  done();
+                }, DELAY);
               }, DELAY);
             }, DELAY);
           }, DELAY);