feat: 提升 date-picker 选择日期用户体验 (#71)

FEMessage · Sep 1, 2020 · 19a59db · 19a59db
1 parent 9cdf297
commit 19a59db
Show file tree

Hide file tree

Showing 2 changed files with 48 additions and 5 deletions.
diff --git a/packages/date-picker/src/panel/date-range.vue b/packages/date-picker/src/panel/date-range.vue
@@ -352,6 +352,11 @@
     },
 
     watch: {
+      visible(v) {
+        if (!v) {
+          this.rangeState.selecting = false;
+        }
+      },
       minDate(val) {
         this.dateUserInput.min = null;
         this.timeUserInput.min = null;
@@ -536,6 +541,35 @@
 
       handleRangePick(val, close = true) {
         const defaultTime = this.defaultTime || [];
+
+        let save = false;
+        const firstPick = val.minDate && !val.maxDate;
+
+        if (this.minDate && this.maxDate && this.inputType) {
+          if (this.inputType === 'min') {
+            let newDate = '';
+
+            if (firstPick) {
+              newDate = val.minDate;
+            } else {
+              newDate = val.minDate <= this.minDate ? val.minDate : val.maxDate;
+            }
+
+            if (newDate < this.maxDate) {
+              val.minDate = newDate;
+              val.maxDate = this.maxDate;
+              save = true;
+            }
+          } else if (this.inputType === 'max') {
+            const newDate = firstPick ? val.minDate : val.maxDate;
+            if (newDate > this.minDate) {
+              val.minDate = this.minDate;
+              val.maxDate = newDate;
+              save = true;
+            }
+          }
+        }
+
         const minDate = modifyWithTimeString(val.minDate, defaultTime[0]);
         const maxDate = modifyWithTimeString(val.maxDate, defaultTime[1]);
 
@@ -545,12 +579,18 @@
         this.onPick && this.onPick(val);
         this.maxDate = maxDate;
         this.minDate = minDate;
-
         // workaround for https://github.com/ElemeFE/element/issues/7539, should remove this block when we don't have to care about Chromium 55 - 57
         setTimeout(() => {
           this.maxDate = maxDate;
           this.minDate = minDate;
         }, 10);
+
+        if (save) {
+          this.inputType = null;
+          close = false;
+          this.handleConfirm(true);
+        }
+  
         if (!close || this.showTime) return;
         this.handleConfirm();
       },

diff --git a/packages/date-picker/src/picker.vue b/packages/date-picker/src/picker.vue
@@ -57,7 +57,7 @@
       :name="name && name[0]"
       @input="handleStartInput"
       @change="handleStartChange"
-      @focus="handleFocus"
+      @focus="handleFocus('min')"
       class="el-range-input">
     <slot name="range-separator">
       <span class="el-range-separator">{{ rangeSeparator }}</span>
@@ -72,7 +72,7 @@
       :name="name && name[1]"
       @input="handleEndInput"
       @change="handleEndChange"
-      @focus="handleFocus"
+      @focus="handleFocus('max')"
       class="el-range-input">
     <i
       @click="handleClickIcon"
@@ -401,7 +401,8 @@ export default {
       showClose: false,
       userInput: null,
       valueOnOpen: null, // value when picker opens, used to determine whether to emit change
-      unwatchPickerOptions: null
+      unwatchPickerOptions: null,
+      inputType: null
     };
   },
 
@@ -724,10 +725,11 @@ export default {
       this.userInput = initialValue === '' ? null : initialValue;
     },
 
-    handleFocus() {
+    handleFocus(inputType) {
       const type = this.type;
 
       if (HAVE_TRIGGER_TYPES.indexOf(type) !== -1 && !this.pickerVisible) {
+        this.inputType = inputType;
         this.pickerVisible = true;
       }
       this.$emit('focus', this);
@@ -814,6 +816,7 @@ export default {
 
       this.picker.value = this.parsedValue;
       this.picker.resetView && this.picker.resetView();
+      this.picker.inputType = this.inputType;
 
       this.$nextTick(() => {
         this.picker.adjustSpinners && this.picker.adjustSpinners();