Refactor/datepicker (#1623)

* DatePicker: replace native input with el-input

* DatePicker: support size prop, closes #1069, closes #1440

* DatePicker: show correct date for initial value, fixed #1129

* TimePicker: fix empty value when panel appears, fixed #1583

* DatePicker: trigger clickoutside when clicking icon, fixed #1604

* DatePicker: fix year type in year panel, fixed #1607

* DatePicker: fix test

* DatePicker: add doc

examples/docs/en-US/date-picker.md

@@ -254,6 +254,7 @@ Picking a date range is supported.
 |---------- |-------------- |---------- |--------------------------------  |-------- |
 | readonly | whether DatePicker is read only | boolean | — | false |
 | disabled | whether DatePicker is disabled | boolean | - | false |
+|size | size of Input | string | large/small/mini | — |
 | editable | whether the input is editable | boolean | - | true |
 | placeholder | placeholder | string | — | — |
 | type | type of the picker | string | year/month/date/datetime/week/datetimerange/daterange | date |

examples/docs/en-US/datetime-picker.md

@@ -210,6 +210,7 @@ Select date and time in one picker.
 | readonly | whether DatePicker is read only | boolean | — | false |
 | disabled | whether DatePicker is disabled | boolean | - | false |
 | editable | whether the input is editable | boolean | - | true |
+|size | size of Input | string | large/small/mini | — |
 | placeholder | placeholder | string | — | — |
 | type | type of the picker | string | year/month/date/datetime/week/datetimerange/daterange | date |
 | format | format of the picker | string | year `yyyy` month `MM` day `dd`, <br>hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |

examples/docs/en-US/time-picker.md

@@ -146,6 +146,7 @@ Can pick an arbitrary time range.
 | readonly | whether DatePicker is read only | boolean | — | false |
 | disabled | whether DatePicker is disabled | boolean | - | false |
 | editable | whether the input is editable | boolean | - | true |
+|size | size of Input | string | large/small/mini | — |
 | placeholder | placeholder | string | — | — |
 | format | format of the picker | string | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
 | value | value of the picker | date for Time Picker, and string for Time Select | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |

examples/docs/zh-CN/date-picker.md

@@ -289,6 +289,7 @@
 | readonly | 完全只读 | boolean | — | false |
 | disabled | 禁用 | boolean | - | false |
 | editable | 文本框可输入 | boolean | - | true |
+| size          | 输入框尺寸     | string          | large, small, mini  | — |
 | placeholder | 占位内容 | string | — | — |
 | type | 显示类型 | string | year/month/date/week/<br>datetime/datetimerange/daterange | date |
 | format | 时间日期格式化 | string | 年 `yyyy`，月 `MM`，日 `dd`，<br>小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd |

examples/docs/zh-CN/datetime-picker.md

@@ -233,6 +233,7 @@
 | readonly | 完全只读 | boolean | — | false |
 | disabled | 禁用 | boolean | - | false |
 | editable | 文本框可输入 | boolean | - | true |
+| size          | 输入框尺寸     | string          | large, small, mini  | — |
 | placeholder | 占位内容 | string | — | — |
 | type | 显示类型 | string | year/month/date/week/<br>datetime/datetimerange/daterange | date |
 | format | 时间日期格式化 | string | 年 `yyyy`，月 `MM`，日 `dd`，<br>小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd |

examples/docs/zh-CN/time-picker.md

@@ -153,6 +153,7 @@
 | readonly | 完全只读 | boolean | — | false |
 | disabled | 禁用 | boolean | - | false |
 | editable | 文本框可输入 | boolean | - | true |
+| size          | 输入框尺寸     | string          | large, small, mini  | — |
 | placeholder | 占位内容 | string | — | — |
 | format | 时间格式化(TimePicker) | string | 小时：`HH`，分：`mm`，秒：`ss` | 'HH:mm:ss' |
 | value | 绑定值 | TimePicker: Date<br>TimeSelect: String | - | - |

packages/date-picker/src/basic/time-spinner.vue

@@ -136,12 +136,10 @@
       },
 
       handleScroll(type) {
-        window.setTimeout(() => {
-          const ajust = {};
+        const ajust = {};
 
-          ajust[`${type}s`] = Math.min(Math.floor((this.$refs[type].scrollTop - 80) / 32 + 3), 59);
-          this.$emit('change', ajust);
-        }, 0);
+        ajust[`${type}s`] = Math.min(Math.floor((this.$refs[type].scrollTop - 80) / 32 + 3), 59);
+        this.$emit('change', ajust);
       },
 
       ajustScrollTop() {

packages/date-picker/src/basic/year-table.vue

@@ -67,17 +67,17 @@
         date.setFullYear(year);
         style.disabled = typeof this.disabledDate === 'function' &&
           this.disabledDate(date);
-        style.current = this.year === year;
+        style.current = Number(this.year) === year;
 
         return style;
       },
 
       nextTenYear() {
-        this.$emit('pick', this.year + 10, false);
+        this.$emit('pick', Number(this.year) + 10, false);
       },
 
       prevTenYear() {
-        this.$emit('pick', this.year - 10, false);
+        this.$emit('pick', Number(this.year) - 10, false);
       },
 
       handleYearTableClick(event) {

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

@@ -21,20 +21,23 @@
           <div class="el-date-range-picker__time-header" v-if="showTime">
             <span class="el-date-range-picker__editors-wrap">
               <span class="el-date-range-picker__time-picker-wrap">
-                <input
+                <el-input
+                  size="small"
+                  ref="minInput"
                   :placeholder="t('el.datepicker.startDate')"
                   class="el-date-range-picker__editor"
                   :value="minVisibleDate"
-                  @input="handleDateInput($event, 'min')"
-                  @change="handleDateChange($event, 'min')"/>
+                  @input.native="handleDateInput($event, 'min')"
+                  @change.native="handleDateChange($event, 'min')" />
               </span>
               <span class="el-date-range-picker__time-picker-wrap">
-                <input
+                <el-input
+                  size="small"
                   :placeholder="t('el.datepicker.startTime')"
                   class="el-date-range-picker__editor"
                   :value="minVisibleTime"
                   @focus="minTimePickerVisible = !minTimePickerVisible"
-                  @change="handleTimeChange($event, 'min')"/>
+                  @change.native="handleTimeChange($event, 'min')" />
                 <time-picker
                   :picker-width="minPickerWidth"
                   ref="minTimePicker"
@@ -47,24 +50,25 @@
             <span class="el-icon-arrow-right"></span>
             <span class="el-date-range-picker__editors-wrap is-right">
               <span class="el-date-range-picker__time-picker-wrap">
-                <input
-                  ref="minInput"
+                <el-input
+                  size="small"
                   :placeholder="t('el.datepicker.endDate')"
                   class="el-date-range-picker__editor"
                   :value="maxVisibleDate"
                   :readonly="!minDate"
-                  @input="handleDateInput($event, 'max')"
-                  @change="handleDateChange($event, 'max')" />
+                  @input.native="handleDateInput($event, 'max')"
+                  @change.native="handleDateChange($event, 'max')" />
               </span>
               <span class="el-date-range-picker__time-picker-wrap">
-                <input
+                <el-input
+                  size="small"
                   ref="maxInput"
                   :placeholder="t('el.datepicker.endTime')"
                   class="el-date-range-picker__editor"
                   :value="maxVisibleTime"
                   @focus="minDate && (maxTimePickerVisible = !maxTimePickerVisible)"
                   :readonly="!minDate"
-                  @change="handleTimeChange($event, 'max')" />
+                  @change.native="handleTimeChange($event, 'max')" />
                 <time-picker
                   :picker-width="maxPickerWidth"
                   ref="maxTimePicker"
@@ -142,6 +146,9 @@
 <script type="text/babel">
   import { nextMonth, prevMonth, toDate, formatDate, parseDate } from '../util';
   import Locale from 'element-ui/src/mixins/locale';
+  import TimePicker from './time';
+  import DateTable from '../basic/date-table';
+  import ElInput from 'element-ui/packages/input';
 
   export default {
     mixins: [Locale],
@@ -234,8 +241,8 @@
       showTime(val) {
         if (!val) return;
         this.$nextTick(_ => {
-          const minInputElm = this.$refs.minInput;
-          const maxInputElm = this.$refs.maxInput;
+          const minInputElm = this.$refs.minInput.$el;
+          const maxInputElm = this.$refs.maxInput.$el;
           if (minInputElm) {
             this.minPickerWidth = minInputElm.getBoundingClientRect().width + 10;
           }
@@ -275,6 +282,7 @@
         } 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);
         }
       }
     },
@@ -455,9 +463,6 @@
       }
     },
 
-    components: {
-      TimePicker: require('./time'),
-      DateTable: require('../basic/date-table')
-    }
+    components: { TimePicker, DateTable, ElInput }
   };
 </script>

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

@@ -22,20 +22,20 @@
         <div class="el-picker-panel__body">
           <div class="el-date-picker__time-header" v-if="showTime">
             <span class="el-date-picker__editor-wrap">
-              <input
-                :placehoder="t('el.datepicker.selectDate')"
-                type="text"
-                v-model.lazy="visibleDate"
-                class="el-date-picker__editor">
+              <el-input
+                :placeholder="t('el.datepicker.selectDate')"
+                :value="visibleDate"
+                size="small"
+                @change.native="visibleDate = $event.target.value" />
             </span>
             <span class="el-date-picker__editor-wrap">
-              <input
+              <el-input
                 ref="input"
                 @focus="timePickerVisible = !timePickerVisible"
-                v-model.lazy="visibleTime"
-                :placehoder="t('el.datepicker.selectTime')"
-                type="text"
-                class="el-date-picker__editor">
+                :placeholder="t('el.datepicker.selectTime')"
+                :value="visibleTime"
+                size="small"
+                @change.native="visibleTime = $event.target.value" />
               <time-picker
                 ref="timepicker"
                 :date="date"
@@ -128,6 +128,11 @@
 <script type="text/babel">
   import { formatDate, parseDate } from '../util';
   import Locale from 'element-ui/src/mixins/locale';
+  import ElInput from 'element-ui/packages/input';
+  import TimePicker from './time';
+  import YearTable from '../basic/year-table';
+  import MonthTable from '../basic/month-table';
+  import DateTable from '../basic/date-table';
 
   export default {
     mixins: [Locale],
@@ -137,7 +142,7 @@
         /* istanbul ignore if */
         if (!val) return;
         this.$nextTick(_ => {
-          const inputElm = this.$refs.input;
+          const inputElm = this.$refs.input.$el;
           if (inputElm) {
             this.pickerWidth = inputElm.getBoundingClientRect().width + 10;
           }
@@ -345,10 +350,7 @@
     },
 
     components: {
-      TimePicker: require('./time'),
-      YearTable: require('../basic/year-table'),
-      MonthTable: require('../basic/month-table'),
-      DateTable: require('../basic/date-table')
+      TimePicker, YearTable, MonthTable, DateTable, ElInput
     },
 
     mounted() {

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

 <template>
-  <transition name="el-zoom-in-top" @after-leave="$emit('dodestroy')">
+  <transition
+    name="el-zoom-in-top"
+    @before-enter="panelCreated"
+    @after-leave="$emit('dodestroy')">
     <div
       v-show="visible"
       :style="{ width: width + 'px' }"
@@ -52,6 +55,7 @@
 <script type="text/babel">
   import { parseDate, limitRange } from '../util';
   import Locale from 'element-ui/src/mixins/locale';
+  import TimeSpinner from '../basic/time-spinner';
 
   const MIN_TIME = parseDate('00:00:00', 'HH:mm:ss');
   const MAX_TIME = parseDate('23:59:59', 'HH:mm:ss');
@@ -75,9 +79,7 @@
   export default {
     mixins: [Locale],
 
-    components: {
-      TimeSpinner: require('../basic/time-spinner')
-    },
+    components: { TimeSpinner },
 
     computed: {
       showSeconds() {
@@ -87,26 +89,6 @@
 
     props: ['value'],
 
-    watch: {
-      value(val) {
-        const time = clacTime(val);
-        if (time.minTime === this.minTime && time.maxTime === this.maxTime) {
-          return;
-        }
-
-        this.handleMinChange({
-          hours: time.minTime.getHours(),
-          minutes: time.minTime.getMinutes(),
-          seconds: time.minTime.getSeconds()
-        });
-        this.handleMaxChange({
-          hours: time.maxTime.getHours(),
-          minutes: time.maxTime.getMinutes(),
-          seconds: time.maxTime.getSeconds()
-        });
-      }
-    },
-
     data() {
       const time = clacTime(this.$options.defaultValue);
 
@@ -127,6 +109,24 @@
     },
 
     methods: {
+      panelCreated() {
+        const time = clacTime(this.value);
+        if (time.minTime === this.minTime && time.maxTime === this.maxTime) {
+          return;
+        }
+
+        this.handleMinChange({
+          hours: time.minTime.getHours(),
+          minutes: time.minTime.getMinutes(),
+          seconds: time.minTime.getSeconds()
+        });
+        this.handleMaxChange({
+          hours: time.maxTime.getHours(),
+          minutes: time.maxTime.getMinutes(),
+          seconds: time.maxTime.getSeconds()
+        });
+      },
+
       handleClear() {
         this.handleCancel();
       },

packages/date-picker/src/picker.vue

 <template>
-  <span
+  <el-input
     class="el-date-editor"
+    :readonly="!editable || readonly"
+    :disabled="disabled"
+    :size="size"
     v-clickoutside="handleClose"
-    :class="{
-      'is-have-trigger': haveTrigger,
-      'is-active': pickerVisible,
-      'is-filled': !!this.internalValue
-    }">
-
-    <input
-      class="el-date-editor__editor"
-      :class="{ 'is-disabled': disabled }"
-      :readonly="!editable || readonly"
-      :disabled="disabled"
-      type="text"
-      :placeholder="placeholder"
-      @focus="handleFocus"
-      @blur="handleBlur"
-      @keydown="handleKeydown"
-      ref="reference"
-      v-model.lazy="visualValue" />
-
-    <span
-      @click.stop="handleClickIcon"
-      class="el-date-editor__trigger el-icon"
+    :placeholder="placeholder"
+    @focus="handleFocus"
+    @blur="handleBlur"
+    @keydown.native="handleKeydown"
+    :value="visualValue"
+    @change.native="visualValue = $event.target.value"
+    ref="reference">
+    <i slot="icon"
+      class="el-input__icon"
+      @click="handleClickIcon"
       :class="[showClose ? 'el-icon-close' : triggerClass]"
       @mouseenter="handleMouseEnterIcon"
       @mouseleave="showClose = false"
       v-if="haveTrigger">
-    </span>
-  </span>
+    </i>
+  </el-input>
 </template>
 
 <script>
@@ -38,6 +29,7 @@ import Clickoutside from 'element-ui/src/utils/clickoutside';
 import { formatDate, parseDate, getWeekNumber } from './util';
 import Popper from 'element-ui/src/utils/vue-popper';
 import Emitter from 'element-ui/src/mixins/emitter';
+import ElInput from 'element-ui/packages/input';
 
 const NewPopper = {
   props: {
@@ -77,10 +69,6 @@ const DATE_FORMATTER = function(value, format) {
   return formatDate(value, format);
 };
 const DATE_PARSER = function(text, format) {
-  text = text.split(':');
-  if (text.length > 1) text = text.map(item => item.slice(-2));
-  text = text.join(':');
-
   return parseDate(text, format);
 };
 const RANGE_FORMATTER = function(value, format) {
@@ -193,6 +181,7 @@ export default {
   mixins: [Emitter, NewPopper],
 
   props: {
+    size: String,
     format: String,
     readonly: Boolean,
     placeholder: String,
@@ -210,6 +199,8 @@ export default {
     pickerOptions: {}
   },
 
+  components: { ElInput },
+
   directives: { Clickoutside },
 
   data() {
@@ -229,7 +220,6 @@ export default {
       if (!val && this.picker && typeof this.picker.handleClear === 'function') {
         this.picker.handleClear();
       }
-      this.dispatch('ElFormItem', 'el.form.change');
     },
     value: {
       immediate: true,
@@ -240,10 +230,19 @@ export default {
   },
 
   computed: {
+    reference() {
+      return this.$refs.reference.$el;
+    },
+
+    refInput() {
+      if (this.reference) return this.reference.querySelector('input');
+      return {};
+    },
+
     valueIsEmpty() {
       const val = this.internalValue;
       if (Array.isArray(val)) {
-        for (let i = 0, j = val.length; i < j; i++) {
+        for (let i = 0, len = val.length; i < len; i++) {
           if (val[i]) {
             return false;
           }
@@ -282,6 +281,7 @@ export default {
     visualValue: {
       get() {
         const value = this.internalValue;
+        if (!value) return;
         const formatter = (
           TYPE_VALUE_RESOLVER_MAP[this.type] ||
           TYPE_VALUE_RESOLVER_MAP['default']
@@ -323,6 +323,7 @@ export default {
     handleMouseEnterIcon() {
       if (this.readonly || this.disabled) return;
       if (!this.valueIsEmpty) {
+        this.visualValue = this.refInput.value;
         this.showClose = true;
       }
     },
@@ -358,9 +359,6 @@ export default {
     handleKeydown(event) {
       const keyCode = event.keyCode;
       const target = event.target;
-      let selectionStart = target.selectionStart;
-      let selectionEnd = target.selectionEnd;
-      let length = target.value.length;
 
       // tab
       if (keyCode === 9) {
@@ -369,30 +367,6 @@ export default {
       } else if (keyCode === 13) {
         this.pickerVisible = this.picker.visible = false;
         this.visualValue = target.value;
-        target.blur();
-      // left
-      } else if (keyCode === 37) {
-        event.preventDefault();
-
-        if (selectionEnd === length && selectionStart === length) {
-          target.selectionStart = length - 2;
-        } else if (selectionStart >= 3) {
-          target.selectionStart -= 3;
-        } else {
-          target.selectionStart = 0;
-        }
-        target.selectionEnd = target.selectionStart + 2;
-      // right
-      } else if (keyCode === 39) {
-        event.preventDefault();
-        if (selectionEnd === 0 && selectionStart === 0) {
-          target.selectionEnd = 2;
-        } else if (selectionEnd <= length - 3) {
-          target.selectionEnd += 3;
-        } else {
-          target.selectionEnd = length;
-        }
-        target.selectionStart = target.selectionEnd - 2;
       }
     },
 
@@ -409,7 +383,7 @@ export default {
         this.panel.defaultValue = this.internalValue;
         this.picker = new Vue(this.panel).$mount(document.createElement('div'));
         this.popperElm = this.picker.$el;
-        this.picker.width = this.$refs.reference.getBoundingClientRect().width;
+        this.picker.width = this.reference.getBoundingClientRect().width;
         this.picker.showTime = this.type === 'datetime' || this.type === 'datetimerange';
         this.picker.selectionMode = this.selectionMode;
         if (this.format) {
@@ -453,10 +427,8 @@ export default {
         });
 
         this.picker.$on('select-range', (start, end) => {
-          setTimeout(() => {
-            this.$refs.reference.setSelectionRange(start, end);
-            this.$refs.reference.focus();
-          }, 0);
+          this.refInput.setSelectionRange(start, end);
+          this.refInput.focus();
         });
       } else {
         this.pickerVisible = this.picker.visible = true;
@@ -466,10 +438,10 @@ export default {
 
       if (this.internalValue instanceof Date) {
         this.picker.date = new Date(this.internalValue.getTime());
-        this.picker.resetView && this.picker.resetView();
       } else {
         this.picker.value = this.internalValue;
       }
+      this.picker.resetView && this.picker.resetView();
 
       this.$nextTick(() => {
         this.picker.ajustScrollTop && this.picker.ajustScrollTop();

packages/input/src/input.vue

@@ -15,7 +15,9 @@
         <slot name="prepend"></slot>
       </div>
       <!-- input 图标 -->
-      <i class="el-input__icon" :class="'el-icon-' + icon" v-if="icon" @click="handleIconClick"></i>
+      <slot name="icon">
+        <i class="el-input__icon" :class="'el-icon-' + icon" v-if="icon" @click="handleIconClick"></i>
+      </slot>
       <input
         v-if="type !== 'textarea'"
         class="el-input__inner"

packages/theme-default/src/common/var.css

@@ -15,13 +15,13 @@
   --color-success: #13ce66;
   --color-warning: #f7ba2a;
   --color-danger: #ff4949;
-  --color-info: #50BFFF;
+  --color-info: #50bfff;
   --color-blue: #2e90fe;
   --color-blue-light: #5da9ff;
   --color-blue-lighter: rgba(var(--color-blue), 0.12);
   --color-white: #fff;
   --color-black: #000;
-  --color-grey: #C0CCDA;
+  --color-grey: #c0ccda;
 
   /* Link
   -------------------------- */
@@ -140,7 +140,7 @@
 
   --select-input-color: var(--color-grey);
   --select-multiple-input-color: #666;
-  --select-input-focus-background: #2ea0ff;
+  --select-input-focus-background: var(--color-primary);
   --select-input-font-size: 12px;
 
   --select-tag-height: 24px;
@@ -164,7 +164,7 @@
   --select-dropdown-max-height: 274px;
   --select-dropdown-padding: 6px 0;
   --select-dropdown-empty-padding: 10px 0;
-  --select-dropdown-border: solid 1px #d3dce6;
+  --select-dropdown-border: solid 1px var(--disabled-border-base);
 
   /* Alert
   -------------------------- */
@@ -256,7 +256,7 @@
   --input-disabled-fill: var(--disabled-fill-base);
   --input-disabled-border: var(--disabled-border-base);
   --input-disabled-color: var(--disabled-color-base);
-  --input-disabled-placeholder-color: #C0CCDA;
+  --input-disabled-placeholder-color: var(--color-grey);
 
   --input-large-font-size: 16px;
   --input-large-height: 42px;
@@ -339,9 +339,9 @@
   --button-ghost-fill: transparent;
   --button-ghost-border: none;
 
-  --button-disabled-color: #C0CCDA;
+  --button-disabled-color: var(--color-grey);
   --button-disabled-fill: #EFF2F7;
-  --button-disabled-border: #D3DCE6;
+  --button-disabled-border: var(--disabled-border-base);
 
   --button-primary-border: var(--color-primary);
   --button-primary-color: var(--color-white);
@@ -374,7 +374,7 @@
   /* Switch
  -------------------------- */
   --switch-on-color: var(--color-primary);
-  --switch-off-color: #C0CCDA;
+  --switch-off-color: var(--color-grey);
   --switch-disabled-color: #E5E9F3;
   --switch-disabled-text-color: #F9FAFC;
 
@@ -413,7 +413,7 @@
   --pagination-button-size: 28px;
   --pagination-button-disabled-color: #e4e4e4;
   --pagination-button-disabled-fill: var(--color-white);
-  --pagination-border-color: #D3DCE6;
+  --pagination-border-color: var(--disabled-border-base);
   --pagination-hover-fill: var(--color-primary);
   --pagination-hover-color: var(--color-white);
 
@@ -421,7 +421,7 @@
  -------------------------- */
   --popover-fill: var(--color-white);
   --popover-font-size: 12px;
-  --popover-border-color: #d3dce6;
+  --popover-border-color: var(--disabled-border-base);
   --popover-arrow-size: 6px;
   --popover-padding: 10px;
   --popover-title-font-size: 13px;
@@ -511,7 +511,7 @@
   --------------------------*/
   --menu-item-color: var(--link-color);
   --menu-item-fill: #eff2f7;
-  --menu-item-hover-fill: #d3dce6;
+  --menu-item-hover-fill: var(--disabled-border-base);
   --submenu-item-fill: #e5e9f2;
 
   --dark-menu-item-color: var(--link-color);
@@ -533,14 +533,13 @@
   --datepicker-off-color: #ddd;
   --datepicker-header-color: var(--border-color-hover);
   --datepicker-icon-color: #99a9bf;
-  --datepicker-trigger-color: #c0ccda;
-  --datepicker-border-color: #d3dce6;
+  --datepicker-border-color: var(--disabled-border-base);
   --datepicker-inner-border-color: #e4e4e4;
   --datepicker-cell-hover-color: #e5e9f2;
   --datepicker-inrange-color: #D3ECFF;
   --datepicker-inrange-hover-color: #AFDCFF;
   --datepicker-active-color: var(--color-primary);
-  --datepicker-text-hover-color: #20a0ff;
+  --datepicker-text-hover-color: var(--color-primary);
 
   /* Loading
   --------------------------*/

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

@@ -32,23 +32,6 @@
       padding: 0 5px;
     }
 
-    @e editor {
-      position: relative;
-      border: 1px solid #c0ccda;
-      border-radius: 4px;
-      padding: 5px 10px;
-      box-sizing: border-box;
-      height: 28px;
-      outline: none;
-      appearance: none;
-      transition: border 0.3s;
-      width: 100%;
-
-      &:hover {
-        border-color: #20a0ff;
-      }
-    }
-
     @e time-header {
       position: relative;
       border-bottom: 1px solid var(--datepicker-inner-border-color);

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

@@ -29,23 +29,6 @@
       margin: 0;
     }
 
-    @e editor {
-      position: relative;
-      border: 1px solid #c0ccda;
-      border-radius: 4px;
-      padding: 5px 10px;
-      box-sizing: border-box;
-      height: 28px;
-      outline: none;
-      appearance: none;
-      transition: border 0.3s;
-      width: 100%;
-
-      &:hover {
-        border-color: #20a0ff;
-      }
-    }
-
     @e header {
       position: relative;
       text-align: center;
@@ -122,7 +105,7 @@
         top: 13px;
         right: 0;
         z-index: 1;
-        background: #fff;
+        background: var(--color-white);
       }
     }
   }

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

@@ -49,7 +49,7 @@
       &.start-date,
       &.end-date {
         background-color: var(--datepicker-active-color) !important;
-        color: #fff;
+        color: var(--color-white);
       }
 
       &.disabled {

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

@@ -45,7 +45,7 @@
       cursor: pointer;
 
       &:hover {
-        background-color: #e5e9f2;
+        background-color: var(--datepicker-cell-hover-color);
       }
 
       &.active {

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

@@ -5,115 +5,15 @@
   @b date-editor {
     position: relative;
     display: inline-block;
-    box-sizing: border-box;
-    height: 36px;
-    width: 182px;
-
-    @e editor {
-      border: 1px solid #c0ccda;
-      border-radius: 4px;
-      line-height: 18px;
-      height: 36px;
-      padding: 3px 10px;
-      width: 100%;
-      box-sizing: border-box;
-      transition: border 0.3s;
-      color: #666;
-      font-size: 14px;
-
-      @when disabled {
-        background-color: var(--disabled-fill-base);
-        border-color: var(--disabled-border-base);
-        color: var(--disabled-color-base);
-        cursor: not-allowed;
-
-        &::placeholder {
-          color: var(--input-disabled-placeholder-color);
-        }
-      }
-
-      &::placeholder {
-        color: #bbb;
-        font-size: 14px;
-      }
-    }
-
-    @e trigger {
-      &.el-icon {
-        cursor: pointer;
-        position: absolute;
-        display: inline-block;
-        width: 16px;
-        right: 10px;
-        top: 0;
-        bottom: 0;
-        color: var(--datepicker-trigger-color);
-        font-size: 16px;
-        line-height: 38px;
-      }
-    }
-
-    @e clear {
-      cursor: pointer;
-      position: absolute;
-      width: 20px;
-      right: 0;
-      top: 0;
-      bottom: 0;
-      line-height: 36px;
-      color: var(--datepicker-icon-color);
-
-      &:hover {
-        color: var(--datepicker-text-hover-color);
-      }
-    }
-
-    @when have-trigger {
-      .el-date-editor__editor {
-        padding-right: 20px;
-      }
-
-      .el-date-editor__clear {
-        right: 22px;
-      }
-    }
-
-    &.lg {
-      .el-date-editor__editor {
-        padding: 6px 4px;
-      }
-    }
-
-    &.sm {
-      .el-date-editor__editor {
-        padding: 1px 1px;
-      }
-    }
 
     .el-picker-panel {
       position: absolute;
       min-width: 180px;
       box-sizing: border-box;
       box-shadow: 0 2px 6px #ccc;
-      background: #fff;
+      background: var(--color-white);
       z-index: 10;
       top: 41px;
     }
   }
-
-  .el-date-editor__editor:focus,
-  .el-date-editor:hover > .el-date-editor__editor,
-  .el-date-editor.is-active > .el-date-editor__editor {
-    outline: none;
-    border-color: var(--datepicker-active-color);
-  }
-
-  .el-date-editor .el-date-editor__clear {
-    display: none;
-  }
-
-  .el-date-editor.is-filled:hover .el-date-editor__clear,
-  .el-date-editor.is-filled.is-active > .el-date-editor__clear {
-    display: inline-block;
-  }
 }

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

@@ -3,14 +3,14 @@
 @component-namespace el {
   @b time-panel {
     margin: 5px 0;
-    border: solid 1px #d3dce6;
-    background-color: #fff;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px 0 rgba(0, 0, 0, .04);
+    border: solid 1px var(--datepicker-border-color);
+    background-color: var(--color-white);
+    box-shadow: var(--box-shadow-base);
     border-radius: 2px;
     position: absolute;
     width: 180px;
     left: 0;
-    z-index: 1000;
+    z-index: var(--index-top);
     user-select: none;
 
     @e content {
@@ -21,12 +21,12 @@
       &::after, &::before {
         content: ":";
         top: 50%;
-        color: #fff;
+        color: var(--color-white);
         position: absolute;
         font-size: 14px;
         margin-top: -15px;
         line-height: 16px;
-        background-color: #20a0ff;
+        background-color: var(--datepicker-active-color);
         height: 32px;
         z-index: -1;
         left: 0;
@@ -69,7 +69,7 @@
 
       &.confirm {
         font-weight: 800;
-        color: #20a0ff;
+        color: var(--datepicker-active-color);
       }
     }
 

packages/theme-default/src/date-picker/time-spinner.css

@@ -37,12 +37,12 @@
       font-size: 12px;
 
       &:hover:not(.disabled):not(.active) {
-        background: #E5E9F2;
+        background: var(--datepicker-cell-hover-color);
         cursor: pointer;
       }
 
       &.active:not(.disabled) {
-        color: #fff;
+        color: var(--color-white);
       }
 
       &.disabled {

packages/theme-default/src/input.css

@@ -5,22 +5,23 @@
   @b input {
     position: relative;
     font-size: var(--font-size-base);
-    
+
     @e inner {
-      display: block;
-      padding: 3px 10px;
-      box-sizing: border-box;
-      width: 100%;
-      height: var(--input-height);
-      color: var(--input-color);
-      background-color: #fff;
+      appearance: none;
+      background-color: var(--color-white);
       background-image: none;
-      border: var(--input-border);
       border-radius: 4px;
-      transition: var(--border-transition-base);
-      outline: none;
+      border: var(--input-border);
+      box-sizing: border-box;
+      color: var(--input-color);
+      display: block;
       font-size: inherit;
+      height: var(--input-height);
       line-height: normal;
+      outline: none;
+      padding: 3px 10px;
+      transition: var(--border-transition-base);
+      width: 100%;
 
       &::placeholder {
         color: var(--input-placeholder-color);
@@ -29,6 +30,7 @@
       &:hover {
         border-color: var(--input-hover-border);
       }
+
       &:focus {
         outline: none;
         border-color: var(--input-focus-border);

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

@@ -82,7 +82,7 @@ describe('DatePicker', () => {
       const $el = vm.$refs.compo.picker.$el;
       $el.querySelector('td.available').click();
       vm.$nextTick(_ => {
-        vm.$el.querySelector('.el-date-editor__trigger').click();
+        vm.$el.querySelector('.el-input__icon').click();
         setTimeout(_ => {
           expect(vm.value).to.empty;
           done();
@@ -264,7 +264,7 @@ describe('DatePicker', () => {
       const input = vm.picker.$el.querySelectorAll('.el-date-picker__editor-wrap input')[1];
 
       input.value = '20:30:33';
-      triggerEvent(input, 'change');
+      triggerEvent(input, 'change', true);
       setTimeout(_ => {
         expect(vm.picker.date.getHours()).to.equal(20);
         expect(vm.picker.date.getMinutes()).to.equal(30);
@@ -277,7 +277,7 @@ describe('DatePicker', () => {
       const input = vm.picker.$el.querySelector('.el-date-picker__editor-wrap input');
 
       input.value = '2017-2-2';
-      triggerEvent(input, 'change');
+      triggerEvent(input, 'change', true);
       setTimeout(_ => {
         expect(vm.picker.date.getFullYear()).to.equal(2017);
         expect(vm.picker.date.getMonth()).to.equal(1);
@@ -432,7 +432,7 @@ describe('DatePicker', () => {
       const input = vm.picker.$el.querySelectorAll('.el-date-range-picker__editors-wrap input')[1];
 
       input.value = '10:22:14';
-      triggerEvent(input, 'change');
+      triggerEvent(input, 'change', true);
       setTimeout(_ => {
         expect(vm.picker.minDate.getHours()).to.equal(10);
         expect(vm.picker.minDate.getMinutes()).to.equal(22);
@@ -445,7 +445,7 @@ describe('DatePicker', () => {
       const input = vm.picker.$el.querySelectorAll('.el-date-range-picker__editors-wrap input')[3];
 
       input.value = '10:22:14';
-      triggerEvent(input, 'change');
+      triggerEvent(input, 'change', true);
       setTimeout(_ => {
         expect(vm.picker.maxDate.getHours()).to.equal(10);
         expect(vm.picker.maxDate.getMinutes()).to.equal(22);
@@ -547,7 +547,7 @@ describe('DatePicker', () => {
         setTimeout(_ => {
           triggerEvent(input, 'input');
           input.value = '1989-6-4';
-          triggerEvent(input, 'change');
+          triggerEvent(input, 'change', true);
 
           setTimeout(_ => {
             const minDate = vm.picker.minDate;
@@ -581,7 +581,7 @@ describe('DatePicker', () => {
           setTimeout(_ => {
             triggerEvent(input, 'input');
             input.value = '1989-6-4';
-            triggerEvent(input, 'change');
+            triggerEvent(input, 'change', true);
             setTimeout(_ => {
               expect(vm.picker.maxDate > vm.picker.minDate).to.true;
               done();