DatePicker: fix clear button, fixed #1690 (#1710)

* DatePicker: fix clear button, fixed #1690

* DatePicker: fix reset button style

* DatePicker: fix set value

* DatePicker: fix test

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

@@ -282,7 +282,8 @@
         } else if (Array.isArray(newVal)) {
           this.minDate = newVal[0] ? toDate(newVal[0]) : null;
           this.maxDate = newVal[1] ? toDate(newVal[1]) : null;
-          this.date = new Date(this.minDate);
+          if (this.minDate) this.date = new Date(this.minDate);
+          this.handleConfirm(true);
         }
       }
     },
@@ -454,8 +455,8 @@
         this.resetDate();
       },
 
-      handleConfirm() {
+      handleConfirm(visible) {
-        this.$emit('pick', [this.minDate, this.maxDate]);
+        this.$emit('pick', [this.minDate, this.maxDate], visible);
       },
 
       resetDate() {

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

@@ -150,6 +150,7 @@
       },
 
       value(newVal) {
+        if (!newVal) return;
         newVal = new Date(newVal);
         if (!isNaN(newVal)) {
           if (typeof this.disabledDate === 'function' &&

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

@@ -112,6 +112,13 @@
       };
     },
 
+    watch: {
+      value(newVal) {
+        this.panelCreated();
+        this.$nextTick(_ => this.ajustScrollTop());
+      }
+    },
+
     methods: {
       panelCreated() {
         const time = clacTime(this.value);

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

@@ -72,6 +72,7 @@
           minutes: date.getMinutes(),
           seconds: date.getSeconds()
         });
+        this.$nextTick(_ => this.ajustScrollTop());
       },
 
       selectableRange(val) {

packages/date-picker/src/picker.vue

@@ -85,8 +85,9 @@ const RANGE_FORMATTER = function(value, format) {
 const RANGE_PARSER = function(text, format) {
   const array = text.split(RANGE_SEPARATOR);
   if (array.length === 2) {
-    const range1 = array[0].split(':').map(item => item.slice(-2)).join(':');
+    const range1 = array[0];
-    const range2 = array[1].split(':').map(item => item.slice(-2)).join(':');
+    const range2 = array[1];
+
     return [parseDate(range1, format), parseDate(range2, format)];
   }
   return [];
@@ -323,7 +324,6 @@ export default {
     handleMouseEnterIcon() {
       if (this.readonly || this.disabled) return;
       if (!this.valueIsEmpty) {
-        this.visualValue = this.refInput.value;
         this.showClose = true;
       }
     },
@@ -358,15 +358,10 @@ export default {
 
     handleKeydown(event) {
       const keyCode = event.keyCode;
-      const target = event.target;
 
       // tab
       if (keyCode === 9) {
         this.pickerVisible = false;
-      // enter
-      } else if (keyCode === 13) {
-        this.pickerVisible = this.picker.visible = false;
-        this.visualValue = target.value;
       }
     },
 

packages/theme-default/src/date-picker/picker-panel.css

@@ -87,7 +87,7 @@
 
     @e link-btn {
       cursor: pointer;
-      color: #55a4ff;
+      color: var(--color-primary);
       text-decoration: none;
       padding: 15px;
       font-size: 12px;

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

@@ -145,13 +145,16 @@ describe('DatePicker', () => {
       expect(vm.pickerVisible).to.false;
     });
 
-    it('enter', () => {
+    it('enter', done => {
       input.value = '2000-10-1';
-      keyDown(input, 13);
+      triggerEvent(input, 'change', true);
-      expect(vm.pickerVisible).to.false;
+      setTimeout(_ => {
-      expect(vm.picker.value.getFullYear()).to.equal(2000);
+        expect(vm.pickerVisible).to.true; // 敲回车不会消失
-      expect(vm.picker.value.getMonth()).to.equal(9);
+        expect(vm.picker.date.getFullYear()).to.equal(2000);
-      expect(vm.picker.value.getDate()).to.equal(1);
+        expect(vm.picker.date.getMonth()).to.equal(9);
+        expect(vm.picker.date.getDate()).to.equal(1);
+        done();
+      }, DELAY);
     });
 
     it('left', () => {