DatePicker: add lazy modifier in input element

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

@@ -23,17 +23,15 @@
               <input
                 placeholder="开始日期"
                 class="el-date-range-picker__editor"
-                v-model="leftVisibleDate"
+                v-model.lazy="leftVisibleDate"
                 @input="handleDateInput($event, 'min')"
                 @change="handleDateChange($event, 'min')"/>
-              <span
-                class="el-date-range-picker__time-picker-wrap"
-                v-clickoutside="closeLeftTimePicker">
+              <span class="el-date-range-picker__time-picker-wrap">
                 <input
                   placeholder="开始时间"
                   class="el-date-range-picker__editor"
-                  v-model="leftVisibleTime"
-                  @focus="leftTimePickerVisible = true"
+                  v-model.lazy="leftVisibleTime"
+                  @focus="leftTimePickerVisible = !leftTimePickerVisible"
                   @change="handleTimeChange($event, 'min')"/>
                 <time-picker
                   :picker-width="leftPickerWidth"
@@ -50,19 +48,17 @@
                 ref="leftInput"
                 placeholder="结束日期"
                 class="el-date-range-picker__editor"
-                v-model="rightVisibleDate"
+                v-model.lazy="rightVisibleDate"
                 :readonly="!minDate"
                 @input="handleDateInput($event, 'max')"
                 @change="handleDateChange($event, 'max')" />
-              <span
-                class="el-date-range-picker__time-picker-wrap"
-                v-clickoutside="closeRightTimePicker">
+              <span class="el-date-range-picker__time-picker-wrap">
                 <input
                   ref="rightInput"
                   placeholder="结束时间"
                   class="el-date-range-picker__editor"
-                  v-model="rightVisibleTime"
-                  @focus="minDate && (rightTimePickerVisible = true)"
+                  v-model.lazy="rightVisibleTime"
+                  @focus="minDate && (rightTimePickerVisible = !rightTimePickerVisible)"
                   :readonly="!minDate"
                   @change="handleTimeChange($event, 'max')" />
                 <time-picker
@@ -257,10 +253,6 @@
       }
     },
 
-    directives: {
-      Clickoutside: require('element-ui/src/utils/clickoutside').default
-    },
-
     data() {
       return {
         leftPickerWidth: 0,
@@ -332,14 +324,6 @@
         return $t.apply(this, args);
       },
 
-      closeLeftTimePicker() {
-        this.leftTimePickerVisible = false;
-      },
-
-      closeRightTimePicker() {
-        this.rightTimePickerVisible = false;
-      },
-
       handleDateInput(event, type) {
         const value = event.target.value;
         const parsedValue = parseDate(value, 'yyyy-MM-dd');

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

@@ -23,18 +23,16 @@
          <div class="el-date-picker__time-header" v-if="showTime">
             <span class="el-date-picker__editor-wrap">
               <input
-              :placehoder="$t('datepicker.selectDate')"
-              type="text"
-              v-model="visibleDate"
-              class="el-date-picker__editor">
+                :placehoder="$t('datepicker.selectDate')"
+                type="text"
+                v-model.lazy="visibleDate"
+                class="el-date-picker__editor">
             </span>
-            <span
-              class="el-date-picker__editor-wrap"
-              v-clickoutside="closeTimePicker">
+            <span class="el-date-picker__editor-wrap">
               <input
                 ref="input"
-                @focus="timePickerVisible = true"
-                v-model="visibleTime"
+                @focus="timePickerVisible = !timePickerVisible"
+                v-model.lazy="visibleTime"
                 :placehoder="$t('datepicker.selectTime')"
                 type="text"
                 class="el-date-picker__editor">
@@ -166,10 +164,6 @@
       }
     },
 
-    directives: {
-      Clickoutside: require('element-ui/src/utils/clickoutside').default
-    },
-
     methods: {
       $t(...args) {
         return $t.apply(this, args);
@@ -324,10 +318,6 @@
           this.year = this.date.getFullYear();
           this.month = this.date.getMonth();
         }
-      },
-
-      closeTimePicker() {
-        this.timePickerVisible = false;
       }
     },