DatePicker: improve test

ElemeFE · Oct 26, 2016 · 28aa9e5 · 28aa9e5
1 parent 7181b36
commit 28aa9e5
Show file tree

Hide file tree

Showing 4 changed files with 502 additions and 185 deletions.
diff --git a/packages/date-picker/src/panel/date-range.vue b/packages/date-picker/src/panel/date-range.vue
@@ -24,15 +24,15 @@
                 <input
                   placeholder="开始日期"
                   class="el-date-range-picker__editor"
-                  v-model.lazy="leftVisibleDate"
+                  :value="leftVisibleDate"
                   @input="handleDateInput($event, 'min')"
                   @change="handleDateChange($event, 'min')"/>
               </span>
               <span class="el-date-range-picker__time-picker-wrap">
                 <input
                   placeholder="开始时间"
                   class="el-date-range-picker__editor"
-                  v-model.lazy="leftVisibleTime"
+                  :value="leftVisibleTime"
                   @focus="leftTimePickerVisible = !leftTimePickerVisible"
                   @change="handleTimeChange($event, 'min')"/>
                 <time-picker
@@ -51,7 +51,7 @@
                   ref="leftInput"
                   placeholder="结束日期"
                   class="el-date-range-picker__editor"
-                  v-model.lazy="rightVisibleDate"
+                  :value="rightVisibleDate"
                   :readonly="!minDate"
                   @input="handleDateInput($event, 'max')"
                   @change="handleDateChange($event, 'max')" />
@@ -61,7 +61,7 @@
                   ref="rightInput"
                   placeholder="结束时间"
                   class="el-date-range-picker__editor"
-                  v-model.lazy="rightVisibleTime"
+                  :value="rightVisibleTime"
                   @focus="minDate && (rightTimePickerVisible = !rightTimePickerVisible)"
                   :readonly="!minDate"
                   @change="handleTimeChange($event, 'max')" />
@@ -177,7 +177,7 @@
       },
 
       rightVisibleDate() {
-        return formatDate(this.maxDate);
+        return formatDate(this.maxDate || this.minDate);
       },
 
       leftVisibleTime() {
@@ -188,60 +188,6 @@
         return formatDate(this.maxDate, 'HH:mm:ss');
       },
 
-      leftHours: {
-        get() {
-          return this.date.getHours();
-        },
-        set(hours) {
-          this.date.setHours(hours);
-        }
-      },
-
-      leftMinutes: {
-        get() {
-          return this.date.getMinutes();
-        },
-        set(minutes) {
-          this.date.setMinutes(minutes);
-        }
-      },
-
-      leftSeconds: {
-        get() {
-          return this.date.getSeconds();
-        },
-        set(seconds) {
-          this.date.setSeconds(seconds);
-        }
-      },
-
-      rightHours: {
-        get() {
-          return this.rightDate.getHours();
-        },
-        set(hours) {
-          this.rightDate.setHours(hours);
-        }
-      },
-
-      rightMinutes: {
-        get() {
-          return this.rightDate.getMinutes();
-        },
-        set(minutes) {
-          this.rightDate.setMinutes(minutes);
-        }
-      },
-
-      rightSeconds: {
-        get() {
-          return this.rightDate.getSeconds();
-        },
-        set(seconds) {
-          this.rightDate.setSeconds(seconds);
-        }
-      },
-
       rightDate() {
         const newDate = new Date(this.date);
         const month = newDate.getMonth();
@@ -396,6 +342,10 @@
               this.maxDate = new Date(target.getTime());
             }
           }
+          const l2r = type === 'min' ? 'left' : 'right';
+
+          this.$refs[l2r + 'timepicker'].value = target;
+          this[l2r + 'TimePickerVisible'] = false;
         }
       },
 

diff --git a/packages/date-picker/src/panel/date.vue b/packages/date-picker/src/panel/date.vue
@@ -111,7 +111,7 @@
         <a
           href="JavaScript:"
           class="el-picker-panel__link-btn"
-          @click="changeToToday">{{ $t('datepicker.now') }}</a>
+          @click="changeToNow">{{ $t('datepicker.now') }}</a>
         <button
           type="button"
           class="el-picker-panel__btn"
@@ -127,6 +127,7 @@
   export default {
     watch: {
       showTime(val) {
+        /* istanbul ignore if */
         if (!val) return;
         this.$nextTick(_ => {
           const inputElm = this.$refs.input;
@@ -156,13 +157,15 @@
 
       selectionMode(newVal) {
         if (newVal === 'month') {
+          /* istanbul ignore next */
           if (this.currentView !== 'year' || this.currentView !== 'month') {
             this.currentView = 'month';
           }
         }
       },
 
       date(newVal) {
+        /* istanbul ignore next */
         if (!this.year) {
           this.year = newVal.getFullYear();
           this.month = newVal.getMonth();
@@ -187,13 +190,14 @@
         this.currentView = 'year';
       },
 
-      handleLabelClick() {
-        if (this.currentView === 'date') {
-          this.showMonthPicker();
-        } else if (this.currentView === 'month') {
-          this.showYearPicker();
-        }
-      },
+      // XXX: 没用到
+      // handleLabelClick() {
+      //   if (this.currentView === 'date') {
+      //     this.showMonthPicker();
+      //   } else if (this.currentView === 'month') {
+      //     this.showYearPicker();
+      //   }
+      // },
 
       prevMonth() {
         this.month--;
@@ -301,7 +305,7 @@
         this.resetDate();
       },
 
-      changeToToday() {
+      changeToNow() {
         this.date.setTime(+new Date());
         this.$emit('pick', new Date(this.date.getTime()));
         this.resetDate();
@@ -416,50 +420,6 @@
           return startYear + ' ' + yearTranslation + '-' + (startYear + 9) + ' ' + yearTranslation;
         }
         return this.year + ' ' + yearTranslation;
-      },
-
-      hours: {
-        get() {
-          return this.date.getHours();
-        },
-        set(hours) {
-          this.date.setHours(hours);
-        }
-      },
-
-      minutes: {
-        get() {
-          return this.date.getMinutes();
-        },
-        set(minutes) {
-          this.date.setMinutes(minutes);
-        }
-      },
-
-      seconds: {
-        get() {
-          return this.date.getSeconds();
-        },
-        set(seconds) {
-          this.date.setSeconds(seconds);
-        }
-      },
-
-      timeText() {
-        const hours = this.hours;
-        const minutes = this.minutes;
-        return (hours < 10 ? '0' + hours : hours) + ':' + (minutes < 10 ? '0' + minutes : minutes);
-      },
-
-      label() {
-        const year = this.year;
-        const month = this.month + 1;
-
-        if (this.currentView === 'date') {
-          return year + ' / ' + month;
-        }
-
-        return year;
       }
     }
   };

diff --git a/packages/date-picker/src/picker.vue b/packages/date-picker/src/picker.vue
@@ -20,7 +20,7 @@
       v-model.lazy="visualValue" />
 
     <span
-      @click="togglePicker"
+      @click="pickerVisible = !pickerVisible"
       class="el-date-editor__trigger el-icon"
       :class="[triggerClass]"
       v-if="haveTrigger">
@@ -353,10 +353,6 @@ export default {
       }
     },
 
-    togglePicker() {
-      !this.pickerVisible ? this.showPicker() : this.hidePicker();
-    },
-
     hidePicker() {
       if (this.picker) {
         this.picker.resetView && this.picker.resetView();