DatePicker/TimePicker: add chalk theme (#7169)

* DatePicker/TimePicker: add chalk theme

* minor updates

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

@@ -215,7 +215,9 @@ Picking a date range is supported.
     <el-date-picker
       v-model="value6"
       type="daterange"
-      placeholder="Pick a range">
+      range-separator="To"
+      start-placeholder="Start date"
+      end-placeholder="End date">
     </el-date-picker>
   </div>
   <div class="block">
@@ -224,7 +226,9 @@ Picking a date range is supported.
       v-model="value7"
       type="daterange"
       align="right"
-      placeholder="Pick a range"
+      range-separator="To"
+      start-placeholder="Start date"
+      end-placeholder="End date"
       :picker-options="pickerOptions2">
     </el-date-picker>
   </div>
@@ -279,13 +283,15 @@ Picking a date range is supported.
 |size | size of Input | string | large/small/mini | — |
 | editable | whether the input is editable | boolean | — | true |
 | clearable | Whether to show clear button | boolean | — | true |
-| placeholder | placeholder | string | — | — |
+| placeholder | placeholder in non-range mode | string | — | — |
+| start-placeholder | placeholder for the start date in range mode | string | — | — |
+| end-placeholder | placeholder for the end date in range mode | 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`, hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |
 | align | alignment | left/center/right | left |
 | popper-class | custom class name for DatePicker's dropdown | string | — | — |
 | picker-options | additional options, check the table below | object | — | {} |
-| range-separator | range separator | string | - | ' - ' |
+| range-separator | range separator | string | - | '-' |
 | default-value | optional default time of the picker | Date | anything accepted by `new Date()` | - |
 |name | same as `name` in native input | string | — | — |
 

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

@@ -175,7 +175,9 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
     <el-date-picker
       v-model="value3"
       type="datetimerange"
-      placeholder="Select time range">
+      range-separator="To"
+      start-placeholder="Start date"
+      end-placeholder="End date">
     </el-date-picker>
   </div>
   <div class="block">
@@ -184,7 +186,9 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
       v-model="value4"
       type="datetimerange"
       :picker-options="pickerOptions2"
-      placeholder="Select time range"
+      range-separator="To"
+      start-placeholder="Start date"
+      end-placeholder="End date"
       align="right">
     </el-date-picker>
   </div>
@@ -238,13 +242,15 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex
 | editable | whether the input is editable | boolean | — | true |
 | clearable | Whether to show clear button | boolean | — | true |
 |size | size of Input | string | large/small/mini | — |
-| placeholder | placeholder | string | — | — |
+| placeholder | placeholder in non-range mode | string | — | — |
+| start-placeholder | placeholder for the start date in range mode | string | — | — |
+| end-placeholder | placeholder for the end date in range mode | 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`, hour `HH`, minute `mm`, second `ss` | yyyy-MM-dd |
 | align | alignment | left/center/right | left |
 | popper-class | custom class name for DateTimePicker's dropdown | string | — | — |
 | picker-options | additional options, check the table below | object | — | {} |
-| range-separator | range separator | string | - | ' - ' |
+| range-separator | range separator | string | - | '-' |
 |name | same as `name` in native input | string | — | — |
 
 ### Picker Options

examples/docs/en-US/i18n.md

@@ -102,7 +102,7 @@ const i18n = new VueI18n({
 })
 
 Vue.use(Element, {
-  i18n: (key, value) => i18n.t(key. value)
+  i18n: (key, value) => i18n.t(key, value)
 })
 
 new Vue({ i18n }).$mount('#app')

examples/docs/en-US/input-number.md

@@ -127,7 +127,7 @@ Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
 
 ### Controls Position
 
-:::demo Set `controls-position` to decide controls position
+:::demo Set `controls-position` to decide the position of control buttons.
 ```html
 <template>
   <el-input-number v-model="num8" controls-position="right" @change="handleChange" :min="1" :max="10"></el-input-number>

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

@@ -118,7 +118,9 @@ Can pick an arbitrary time range.
   <el-time-picker
     is-range
     v-model="value3"
-    placeholder="Pick a time range">
+    range-separator="To"
+    start-placeholder="Start time"
+    end-placeholder="End time">
   </el-time-picker>
 </template>
 
@@ -156,11 +158,14 @@ Can pick an arbitrary time range.
 | editable | whether the input is editable | boolean | — | true |
 | clearable | Whether to show clear button | boolean | — | true |
 | size | size of Input | string | medium / small / mini | — |
-| placeholder | placeholder | string | — | — |
+| placeholder | placeholder in non-range mode | string | — | — |
+| start-placeholder | placeholder for the start time in range mode | string | — | — |
+| end-placeholder | placeholder for the end time in range mode | string | — | — |
 | value | value of the picker | date for Time Picker, and string for Time Select | hour `HH`, minute `mm`, second `ss` | HH:mm:ss |
 | align | alignment | left / center / right | left |
 | popper-class | custom class name for TimePicker's dropdown | string | — | — |
 | picker-options | additional options, check the table below | object | — | {} |
+| range-separator | range separator | string | - | '-' |
 |name | same as `name` in native input | string | — | — |
 
 ### Time Select Options

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

@@ -4,7 +4,7 @@
       return {
         pickerOptions0: {
           disabledDate(time) {
-            return time.getTime() < Date.now() - 8.64e7;
+            return time.getTime() > Date.now();
           }
         },
         pickerOptions1: {
@@ -133,7 +133,7 @@
       return {
         pickerOptions0: {
           disabledDate(time) {
-            return time.getTime() < Date.now() - 8.64e7;
+            return time.getTime() > Date.now();
           }
         },
         pickerOptions1: {
@@ -226,7 +226,9 @@
     <el-date-picker
       v-model="value6"
       type="daterange"
-      placeholder="选择日期范围">
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期">
     </el-date-picker>
   </div>
   <div class="block">
@@ -235,7 +237,9 @@
       v-model="value7"
       type="daterange"
       align="right"
-      placeholder="选择日期范围"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
       :picker-options="pickerOptions2">
     </el-date-picker>
   </div>
@@ -289,13 +293,15 @@
 | editable | 文本框可输入 | boolean | — | true |
 | clearable | 是否显示清除按钮 | boolean | — | true |
 | size          | 输入框尺寸     | string          | large, small, mini  | — |
-| placeholder | 占位内容 | string | — | — |
+| placeholder | 非范围选择时的占位内容 | string | — | — |
+| start-placeholder | 范围选择时开始日期的占位内容 | string | — | — |
+| end-placeholder | 范围选择时结束日期的占位内容 | string | — | — |
 | type | 显示类型 | string | year/month/date/week/ datetime/datetimerange/daterange | date |
 | format | 时间日期格式化 | string | 年 `yyyy`，月 `MM`，日 `dd`，小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd |
 | align | 对齐方式 | string | left, center, right | left |
 | popper-class | DatePicker 下拉框的类名 | string | — | — |
 |picker-options | 当前时间日期选择器特有的选项参考下表 | object |  — | {} |
-| range-separator | 选择范围时的分隔符 | string | - | ' - ' |
+| range-separator | 选择范围时的分隔符 | string | - | '-' |
 | default-value | 可选，DatePicker打开时默认显示的时间 | Date | 可被new Date()解析 | - |
 | name | 原生属性 | string | — | — |
 

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

@@ -174,7 +174,9 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
     <el-date-picker
       v-model="value3"
       type="datetimerange"
-      placeholder="选择时间范围">
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期">
     </el-date-picker>
   </div>
   <div class="block">
@@ -183,7 +185,9 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
       v-model="value4"
       type="datetimerange"
       :picker-options="pickerOptions2"
-      placeholder="选择时间范围"
+      range-separator="至"
+      start-placeholder="开始日期"
+      end-placeholder="结束日期"
       align="right">
     </el-date-picker>
   </div>
@@ -237,13 +241,15 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其
 | editable | 文本框可输入 | boolean | — | true |
 | clearable | 是否显示清除按钮 | boolean | — | true |
 | size          | 输入框尺寸     | string          | large, small, mini  | — |
-| placeholder | 占位内容 | string | — | — |
+| placeholder | 非范围选择时的占位内容 | string | — | — |
+| start-placeholder | 范围选择时开始日期的占位内容 | string | — | — |
+| end-placeholder | 范围选择时结束日期的占位内容 | string | — | — |
 | type | 显示类型 | string | year/month/date/week/ datetime/datetimerange/daterange | date |
 | format | 时间日期格式化 | string | 年 `yyyy`，月 `MM`，日 `dd`，小时 `HH`，分 `mm`，秒 `ss` | yyyy-MM-dd |
 | align | 对齐方式 | string | left, center, right | left |
 | popper-class | DateTimePicker 下拉框的类名 | string | — | — |
 | picker-options | 当前时间日期选择器特有的选项参考下表 | object |  — | {} |
-| range-separator | 选择范围时的分隔符 | string | - | ' - ' |
+| range-separator | 选择范围时的分隔符 | string | - | '-' |
 | name | 原生属性 | string | — | — |
 
 ### Picker Options

examples/docs/zh-CN/i18n.md

@@ -114,7 +114,7 @@ const i18n = new VueI18n({
 })
 
 Vue.use(Element, {
-  i18n: (key, value) => i18n.vm._t(key, value)
+  i18n: (key, value) => i18n._t(key, value)
 })
 
 new Vue({ i18n }).$mount('#app')

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

@@ -117,6 +117,9 @@
   <el-time-picker
     is-range
     v-model="value3"
+    range-separator="至"
+    start-placeholder="开始时间"
+    end-placeholder="结束时间"
     placeholder="选择时间范围">
   </el-time-picker>
 </template>
@@ -155,11 +158,14 @@
 | editable | 文本框可输入 | boolean | — | true |
 | clearable | 是否显示清除按钮 | boolean | — | true |
 | size          | 输入框尺寸     | string          | medium / small / mini  | — |
-| placeholder | 占位内容 | string | — | — |
+| placeholder | 非范围选择时的占位内容 | string | — | — |
+| start-placeholder | 范围选择时开始日期的占位内容 | string | — | — |
+| end-placeholder | 范围选择时开始日期的占位内容 | string | — | — |
 | value | 绑定值 | date(TimePicker) / string(TimeSelect) | — | — |
 | align | 对齐方式 | string | left / center / right | left |
 | popper-class | TimePicker 下拉框的类名 | string | — | — |
 | picker-options | 当前时间日期选择器特有的选项参考下表 | object | — | {} |
+| range-separator | 选择范围时的分隔符 | string | - | '-' |
 | name | 原生属性 | string | — | — |
 
 ### Time Select Options

examples/play/index.vue

@@ -1,9 +1,5 @@
 <template>
   <div style="margin: 20px;">
-    <el-pagination
-        layout="prev, pager, next, jumper"
-        :total="50">
-    </el-pagination>
   </div>
 </template>
 <script>

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

@@ -17,8 +17,13 @@
       :class="{ current: isWeekActive(row[1]) }">
       <td
         v-for="cell in row"
-        :class="getCellClasses(cell)"
-        v-text="cell.type === 'today' ? t('el.datepicker.today') : cell.text"></td>
+        :class="getCellClasses(cell)">
+        <div>
+          <span>
+            {{ cell.text }}
+          </span>
+        </div>
+      </td>
     </tr>
     </tbody>
   </table>
@@ -313,9 +318,9 @@
 
         const rows = this.rows;
         const minDate = this.minDate;
-        for (var i = 0, k = rows.length; i < k; i++) {
+        for (let i = 0, k = rows.length; i < k; i++) {
           const row = rows[i];
-          for (var j = 0, l = row.length; j < l; j++) {
+          for (let j = 0, l = row.length; j < l; j++) {
             if (this.showWeekNumber && j === 0) continue;
 
             const cell = row[j];
@@ -338,7 +343,13 @@
           rangeState: this.rangeState
         });
 
-        const target = event.target;
+        let target = event.target;
+        if (target.tagName === 'SPAN') {
+          target = target.parentNode.parentNode;
+        }
+        if (target.tagName === 'DIV') {
+          target = target.parentNode;
+        }
         if (target.tagName !== 'TD') return;
 
         const column = target.cellIndex;
@@ -355,11 +366,17 @@
 
       handleClick(event) {
         let target = event.target;
+        if (target.tagName === 'SPAN') {
+          target = target.parentNode.parentNode;
+        }
+        if (target.tagName === 'DIV') {
+          target = target.parentNode;
+        }
 
         if (target.tagName !== 'TD') return;
         if (hasClass(target, 'disabled') || hasClass(target, 'week')) return;
 
-        var selectionMode = this.selectionMode;
+        const selectionMode = this.selectionMode;
 
         if (selectionMode === 'week') {
           target = target.parentNode.cells[1];
@@ -407,6 +424,9 @@
             this.$emit('pick', { minDate, maxDate }, false);
             this.rangeState.selecting = true;
             this.markRange(this.minDate);
+            this.$nextTick(() => {
+              this.handleMouseMove(event);
+            });
           } else if (this.minDate && !this.maxDate) {
             if (newDate >= this.minDate) {
               const maxDate = new Date(newDate.getTime());

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

@@ -2,7 +2,6 @@
   <transition name="el-zoom-in-top" @after-leave="$emit('dodestroy')">
     <div
       v-show="visible"
-      :style="{ width: width + 'px' }"
       class="el-picker-panel el-date-range-picker el-popper"
       :class="[{
         'has-sidebar': $slots.sidebar || shortcuts,
@@ -39,7 +38,6 @@
                   @focus="minTimePickerVisible = !minTimePickerVisible"
                   @change.native="handleTimeChange($event, 'min')" />
                 <time-picker
-                  :picker-width="minPickerWidth"
                   ref="minTimePicker"
                   :date="minDate"
                   @pick="handleMinTimePick"
@@ -71,7 +69,6 @@
                   :readonly="!minDate"
                   @change.native="handleTimeChange($event, 'max')" />
                 <time-picker
-                  :picker-width="maxPickerWidth"
                   ref="maxTimePicker"
                   :date="maxDate"
                   @pick="handleMaxTimePick"
@@ -238,8 +235,6 @@
     data() {
       return {
         popperClass: '',
-        minPickerWidth: 0,
-        maxPickerWidth: 0,
         date: this.$options.defaultValue ? calcDefaultValue(this.$options.defaultValue) : new Date(),
         minDate: '',
         maxDate: '',
@@ -257,26 +252,11 @@
         firstDayOfWeek: 7,
         minTimePickerVisible: false,
         maxTimePickerVisible: false,
-        width: 0,
         format: ''
       };
     },
 
     watch: {
-      showTime(val) {
-        if (!val) return;
-        this.$nextTick(_ => {
-          const minInputElm = this.$refs.minInput.$el;
-          const maxInputElm = this.$refs.maxInput.$el;
-          if (minInputElm) {
-            this.minPickerWidth = minInputElm.getBoundingClientRect().width + 10;
-          }
-          if (maxInputElm) {
-            this.maxPickerWidth = maxInputElm.getBoundingClientRect().width + 10;
-          }
-        });
-      },
-
       minDate() {
         this.$nextTick(() => {
           if (this.maxDate && this.maxDate < this.minDate) {
@@ -429,7 +409,7 @@
         return new Date(oldDate.getTime());
       },
 
-      handleMinTimePick(value, visible, first) {
+      handleMinTimePick(value, visible, user, first) {
         this.minDate = this.minDate || new Date();
         if (value) {
           this.minDate = this.setTime(this.minDate, value);
@@ -440,7 +420,7 @@
         }
       },
 
-      handleMaxTimePick(value, visible, first) {
+      handleMaxTimePick(value, visible, user, first) {
         if (!this.maxDate) {
           const now = new Date();
           if (now >= this.minDate) {
@@ -478,9 +458,7 @@
       },
 
       handleConfirm(visible = false, user = true) {
-        if (this.minDate && this.maxDate) {
-          this.$emit('pick', [this.minDate, this.maxDate], visible, user);
-        }
+        this.$emit('pick', [this.minDate, this.maxDate], visible, user);
       },
 
       resetDate() {

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

@@ -2,9 +2,6 @@
   <transition name="el-zoom-in-top" @after-enter="handleEnter" @after-leave="handleLeave">
     <div
       v-show="visible"
-      :style="{
-        width: width + 'px'
-      }"
       class="el-picker-panel el-date-picker el-popper"
       :class="[{
         'has-sidebar': $slots.sidebar || shortcuts,
@@ -39,14 +36,16 @@
               <time-picker
                 ref="timepicker"
                 :date="date"
-                :picker-width="pickerWidth"
                 @pick="handleTimePick"
                 :visible="timePickerVisible"
                 @mounted="$refs.timepicker.format=timeFormat">
               </time-picker>
             </span>
           </div>
-          <div class="el-date-picker__header" v-show="currentView !== 'time'">
+          <div
+            class="el-date-picker__header"
+            :class="{ 'el-date-picker__header--bordered': currentView === 'year' || currentView === 'month' }"
+            v-show="currentView !== 'time'">
             <button
               type="button"
               @click="prevYear"
@@ -139,17 +138,6 @@
     mixins: [Locale],
 
     watch: {
-      showTime(val) {
-        /* istanbul ignore if */
-        if (!val) return;
-        this.$nextTick(_ => {
-          const inputElm = this.$refs.input.$el;
-          if (inputElm) {
-            this.pickerWidth = inputElm.getBoundingClientRect().width + 10;
-          }
-        });
-      },
-
       value(newVal) {
         if (!newVal) return;
         newVal = new Date(newVal);
@@ -190,7 +178,7 @@
     methods: {
       handleClear() {
         this.date = this.$options.defaultValue ? new Date(this.$options.defaultValue) : new Date();
-        this.$emit('pick', this.date);
+        this.$emit('pick');
       },
 
       resetDate() {
@@ -328,7 +316,6 @@
       },
 
       confirm() {
-        console.log(111);
         this.date.setMilliseconds(0);
         this.$emit('pick', this.date);
       },
@@ -421,7 +408,6 @@
     data() {
       return {
         popperClass: '',
-        pickerWidth: 0,
         date: this.$options.defaultValue ? new Date(this.$options.defaultValue) : new Date(),
         value: '',
         showTime: false,
@@ -436,7 +422,6 @@
         week: null,
         showWeekNumber: false,
         timePickerVisible: false,
-        width: 0,
         format: ''
       };
     },

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

@@ -5,7 +5,6 @@
     @after-leave="$emit('dodestroy')">
     <div
       v-show="visible"
-      :style="{ width: width + 'px' }"
       class="el-time-range-picker el-picker-panel el-popper"
       :class="popperClass">
       <div class="el-time-range-picker__content">
@@ -118,7 +117,6 @@
         minSeconds: time.minTime.getSeconds(),
         format: 'HH:mm:ss',
         visible: false,
-        width: 0,
         selectionRange: [0, 2]
       };
     },
@@ -208,12 +206,12 @@
       },
 
       setMinSelectionRange(start, end) {
-        this.$emit('select-range', start, end);
+        this.$emit('select-range', start, end, 'min');
         this.selectionRange = [start, end];
       },
 
       setMaxSelectionRange(start, end) {
-        this.$emit('select-range', start + this.offset, end + this.offset);
+        this.$emit('select-range', start, end, 'max');
         this.selectionRange = [start + this.offset, end + this.offset];
       },
 

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

@@ -2,7 +2,6 @@
   <transition name="el-zoom-in-top" @after-leave="$emit('dodestroy')">
     <div
       v-show="currentVisible"
-      :style="{width: width + 'px'}"
       class="el-time-panel el-popper"
       :class="popperClass">
       <div class="el-time-panel__content" :class="{ 'has-seconds': showSeconds }">
@@ -43,7 +42,6 @@
     },
 
     props: {
-      pickerWidth: {},
       date: {
         default() {
           return new Date();
@@ -63,10 +61,6 @@
         }
       },
 
-      pickerWidth(val) {
-        this.width = val;
-      },
-
       value(newVal) {
         let date;
         if (newVal instanceof Date) {
@@ -88,6 +82,7 @@
       },
 
       date(val) {
+        if (!val) return;
         this.currentDate = val;
         this.reinitDate();
       }
@@ -107,7 +102,6 @@
         selectableRange: [],
         currentDate: this.$options.defaultValue || this.date || new Date(),
         currentVisible: this.visible || false,
-        width: this.pickerWidth || 0,
         selectionRange: [0, 2],
         disabled: false
       };
@@ -159,7 +153,7 @@
       handleConfirm(visible = false, first, notUser = false) {
         if (first) return;
         const date = new Date(limitRange(this.currentDate, this.selectableRange, 'HH:mm:ss'));
-        this.$emit('pick', date, visible, !notUser);
+        this.$emit('pick', date, visible, !notUser, false);
       },
 
       adjustScrollTop() {

packages/date-picker/src/picker.vue

@@ -6,6 +6,7 @@
     :disabled="disabled"
     :size="size"
     :name="name"
+    v-if="!ranged"
     v-clickoutside="handleClose"
     :placeholder="placeholder"
     @focus="handleFocus"
@@ -25,6 +26,40 @@
       v-if="haveTrigger">
     </i>
   </el-input>
+  <div
+    class="el-date-editor el-range-editor el-input__inner"
+    :class="[
+      'el-date-editor--' + type,
+      'el-range-editor--' + size,
+      pickerVisible ? 'is-active' : ''
+    ]"
+    @click="handleRangeClick"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="showClose = false"
+    ref="reference"
+    v-clickoutside="handleClose"
+    v-else>
+    <i :class="['el-input__icon', 'el-range__icon', triggerClass]"></i>
+    <input
+      :placeholder="startPlaceholder"
+      :value="displayValue && displayValue[0]"
+      @keydown="handleKeydown"
+      @change="handleStartChange"
+      class="el-range-input">
+    <span class="el-range-separator">{{ rangeSeparator }}</span>
+    <input
+      :placeholder="endPlaceholder"
+      :value="displayValue && displayValue[1]"
+      @keydown="handleKeydown"
+      @change="handleEndChange"
+      class="el-range-input">
+    <i
+      @click="handleClickIcon"
+      v-if="haveTrigger"
+      :class="{ 'el-icon-circle-close': showClose }"
+      class="el-input__icon el-range__close-icon">
+    </i>
+  </div>
 </template>
 
 <script>
@@ -79,19 +114,21 @@ const DATE_FORMATTER = function(value, format) {
 const DATE_PARSER = function(text, format) {
   return parseDate(text, format);
 };
-const RANGE_FORMATTER = function(value, format, separator) {
+const RANGE_FORMATTER = function(value, format) {
   if (Array.isArray(value) && value.length === 2) {
     const start = value[0];
     const end = value[1];
 
     if (start && end) {
-      return formatDate(start, format) + separator + formatDate(end, format);
+      return [formatDate(start, format), formatDate(end, format)];
     }
   }
   return '';
 };
-const RANGE_PARSER = function(text, format, separator) {
-  const array = text.split(separator);
+const RANGE_PARSER = function(array, format, separator) {
+  if (!Array.isArray(array)) {
+    array = array.split(separator);
+  }
   if (array.length === 2) {
     const range1 = array[0];
     const range2 = array[1];
@@ -210,6 +247,8 @@ export default {
     format: String,
     readonly: Boolean,
     placeholder: String,
+    startPlaceholder: String,
+    endPlaceholder: String,
     name: String,
     disabled: Boolean,
     clearable: {
@@ -228,7 +267,7 @@ export default {
     value: {},
     defaultValue: {},
     rangeSeparator: {
-      default: ' - '
+      default: '-'
     },
     pickerOptions: {}
   },
@@ -272,13 +311,20 @@ export default {
   },
 
   computed: {
+    ranged() {
+      return this.type.indexOf('range') > -1;
+    },
+
     reference() {
-      return this.$refs.reference.$el;
+      const reference = this.$refs.reference;
+      return reference.$el || reference;
     },
 
     refInput() {
-      if (this.reference) return this.reference.querySelector('input');
-      return {};
+      if (this.reference) {
+        return [].slice.call(this.reference.querySelectorAll('input'));
+      }
+      return [];
     },
 
     valueIsEmpty() {
@@ -330,7 +376,7 @@ export default {
         ).formatter;
         const format = DEFAULT_FORMATS[this.type];
 
-        return formatter(value, this.format || format, this.rangeSeparator);
+        return formatter(value, this.format || format);
       },
 
       set(value) {
@@ -340,7 +386,7 @@ export default {
             TYPE_VALUE_RESOLVER_MAP[type] ||
             TYPE_VALUE_RESOLVER_MAP['default']
           ).parser;
-          const parsedValue = parser(value, this.format || DEFAULT_FORMATS[type], this.rangeSeparator);
+          const parsedValue = parser(value, this.format || DEFAULT_FORMATS[type]);
 
           if (parsedValue && this.picker) {
             this.picker.value = parsedValue;
@@ -371,11 +417,28 @@ export default {
       }
     },
 
-    handleClickIcon() {
+    handleStartChange(event) {
+      if (this.displayValue && this.displayValue[1]) {
+        this.displayValue = [event.target.value, this.displayValue[1]];
+      } else {
+        this.displayValue = [event.target.value, event.target.value];
+      }
+    },
+
+    handleEndChange(event) {
+      if (this.displayValue && this.displayValue[0]) {
+        this.displayValue = [this.displayValue[0], event.target.value];
+      } else {
+        this.displayValue = [event.target.value, event.target.value];
+      }
+    },
+
+    handleClickIcon(event) {
       if (this.readonly || this.disabled) return;
       if (this.showClose) {
         this.currentValue = this.$options.defaultValue || '';
         this.showClose = false;
+        event.stopPropagation();
       } else {
         this.pickerVisible = !this.pickerVisible;
       }
@@ -397,6 +460,9 @@ export default {
 
     handleClose() {
       this.pickerVisible = false;
+      if (this.ranged) {
+        this.$emit('blur', this);
+      }
     },
 
     handleFocus() {
@@ -422,6 +488,15 @@ export default {
       }
     },
 
+    handleRangeClick() {
+      const type = this.type;
+
+      if (HAVE_TRIGGER_TYPES.indexOf(type) !== -1 && !this.pickerVisible) {
+        this.pickerVisible = true;
+      }
+      this.$emit('focus', this);
+    },
+
     hidePicker() {
       if (this.picker) {
         this.picker.resetView && this.picker.resetView();
@@ -503,9 +578,15 @@ export default {
         this.picker.resetView && this.picker.resetView();
       });
 
-      this.picker.$on('select-range', (start, end) => {
-        this.refInput.setSelectionRange(start, end);
-        this.refInput.focus();
+      this.picker.$on('select-range', (start, end, pos) => {
+        if (this.refInput.length === 0) return;
+        if (!pos || pos === 'min') {
+          this.refInput[0].setSelectionRange(start, end);
+          this.refInput[0].focus();
+        } else if (pos === 'max') {
+          this.refInput[1].setSelectionRange(start, end);
+          this.refInput[1].focus();
+        }
       });
     },
 

packages/date-picker/src/picker/date-picker.js

@@ -43,11 +43,17 @@ export default {
 
       // TAB or ESC or Enter
       if (keyCode === 9 || keyCode === 27 || keyCode === 13) {
-        this.pickerVisible = false;
+        !this.ranged && (this.pickerVisible = false);
         event.stopPropagation();
-        this.picker.confirm();
-        this.currentValue = this.picker.date;
-        this.$refs.reference.$refs.input.blur();
+        this.picker.confirm && this.picker.confirm();
+        !this.ranged && (this.currentValue = this.picker.date);
+        if (this.$refs.reference.$refs) {
+          this.$refs.reference.$refs.input.blur();
+        } else {
+          [].slice.call(this.$refs.reference.querySelectorAll('input')).forEach(input => {
+            input.blur();
+          });
+        }
         return;
       }
 

packages/date-picker/src/picker/time-picker.js

@@ -66,8 +66,14 @@ export default {
       }
 
       if (keyCode === 13) {
-        this.picker.handleConfirm();
-        this.$refs.reference.$refs.input.blur();
+        !this.isRange && this.picker.handleConfirm();
+        if (this.$refs.reference.$refs) {
+          this.$refs.reference.$refs.input.blur();
+        } else {
+          [].slice.call(this.$refs.reference.querySelectorAll('input')).forEach(input => {
+            input.blur();
+          });
+        }
         event.preventDefault();
         return;
       }

packages/popover/src/main.vue

@@ -52,6 +52,12 @@ export default {
   watch: {
     showPopper(newVal, oldVal) {
       newVal ? this.$emit('show') : this.$emit('hide');
+    },
+    '$refs.reference': {
+      deep: true,
+      handler(val) {
+        console.log(val);
+      }
     }
   },
 

packages/theme-chalk/src/date-picker/date-picker.scss

@@ -3,22 +3,18 @@
 @import "./picker-panel.scss";
 
 @include b(date-picker) {
-  min-width: 254px;
+  width: 322px;
 
   &.has-sidebar.has-time {
-    min-width: 434px;
+    width: 434px;
   }
 
   &.has-sidebar {
-    min-width: 370px;
-  }
-
-  &.has-time {
-    min-width: 324px;
+    width: 438px;
   }
 
   .el-picker-panel__content {
-    min-width: 224px;
+    width: 292px;
   }
 
   table {
@@ -45,6 +41,16 @@
   @include e(header) {
     margin: 12px;
     text-align: center;
+
+    @include m(bordered) {
+      margin-bottom: 0;
+      padding-bottom: 12px;
+      border-bottom: solid 1px $--border-color-lighter;
+
+      & + .el-picker-panel__content {
+        margin-top: 0;
+      }
+    }
   }
 
   @include e(header-label) {
@@ -53,6 +59,7 @@
     line-height: 22px;
     text-align: center;
     cursor: pointer;
+    color: $--color-text-regular;
 
     &:hover {
       color: $--datepicker-text-hover-color;

packages/theme-chalk/src/date-picker/date-range-picker.scss

@@ -1,18 +1,10 @@
 @import "../common/var";
 
 @include b(date-range-picker) {
-  min-width: 520px;
-
-  &.has-sidebar.has-time {
-    min-width: 766px;
-  }
+  width: 646px;
 
   &.has-sidebar {
-    min-width: 620px;
-  }
-
-  &.has-time {
-    min-width: 660px;
+    width: 756px;
   }
 
   table {

packages/theme-chalk/src/date-picker/date-table.scss

@@ -3,16 +3,30 @@
 
 @include b(date-table) {
   font-size: 12px;
-  min-width: 224px;
   user-select: none;
 
   @include when(week-mode) {
     .el-date-table__row {
       &:hover {
-        background-color: $--datepicker-cell-hover-color;
+        div {
+          background-color: $--datepicker-inrange-color;
+        }
+        td.available:hover {
+          color: $--datepicker-color;
+        }
+        td:first-child div {
+          margin-left: 5px;
+          border-top-left-radius: 15px;
+          border-bottom-left-radius: 15px;
+        }
+        td:last-child div {
+          margin-right: 5px;
+          border-top-right-radius: 15px;
+          border-bottom-right-radius: 15px;
+        }
       }
 
-      &.current {
+      &.current div {
         background-color: $--datepicker-inrange-color;
       }
     }
@@ -20,10 +34,30 @@
 
   td {
     width: 32px;
-    height: 32px;
+    height: 30px;
+    padding: 4px 0;
     box-sizing: border-box;
     text-align: center;
     cursor: pointer;
+    position: relative;
+
+    & div {
+      height: 30px;
+      padding: 3px 0;
+      box-sizing: border-box;
+    }
+
+    & span {
+      width: 24px;
+      height: 24px;
+      display: block;
+      margin: 0 auto;
+      line-height: 24px;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      border-radius: 50%;
+    }
 
     &.next-month,
     &.prev-month {
@@ -31,43 +65,58 @@
     }
 
     &.today {
-      color: $--datepicker-text-hover-color;
       position: relative;
-      &:before {
-        content: " ";
-        position: absolute;
-        top: 0;
-        right: 0;
-        width: 0;
-        height: 0;
-        border-top: 0.5em solid $--datepicker-active-color;
-        border-left: .5em solid transparent;
+      span {
+        color: $--color-primary;
+      }
+      &.start-date span,
+      &.end-date span {
+        color: $--color-white;
       }
     }
 
     &.available:hover {
-      background-color: $--datepicker-cell-hover-color;
+      color: $--datepicker-text-hover-color;
     }
 
-    &.in-range {
+    &.in-range div {
       background-color: $--datepicker-inrange-color;
       &:hover {
         background-color: $--datepicker-inrange-hover-color;
       }
     }
 
-    &.current:not(.disabled),
-    &.start-date,
-    &.end-date {
-      background-color: $--datepicker-active-color !important;
+    &.current:not(.disabled) span {
       color: $--color-white;
+      background-color: $--datepicker-active-color;
+    }
+    &.start-date div,
+    &.end-date div {
+      color: $--color-white;
+    }
+
+    &.start-date span,
+    &.end-date span {
+      background-color: $--datepicker-active-color;
+    }
+
+    &.start-date div {
+      margin-left: 5px;
+      border-top-left-radius: 15px;
+      border-bottom-left-radius: 15px;
+    }
+
+    &.end-date div {
+      margin-right: 5px;
+      border-top-right-radius: 15px;
+      border-bottom-right-radius: 15px;
     }
 
-    &.disabled {
-      background-color: #f4f4f4;
+    &.disabled div {
+      background-color: $--background-color-base;
       opacity: 1;
       cursor: not-allowed;
-      color: #ccc;
+      color: $--color-text-placeholder;
     }
 
     &.week {
@@ -80,5 +129,6 @@
     padding: 5px;
     color: $--datepicker-header-color;
     font-weight: 400;
+    border-bottom: solid 1px $--border-color-lighter;
   }
 }

packages/theme-chalk/src/date-picker/month-table.scss

@@ -11,9 +11,13 @@
     cursor: pointer;
 
     &.disabled .cell {
-      background-color: #f4f4f4;
+      background-color: $--background-color-base;
       cursor: not-allowed;
-      color: #ccc;
+      color: $--color-text-placeholder;
+
+      &:hover {
+        color: $--color-text-placeholder;
+      }
     }
 
     .cell {
@@ -22,15 +26,15 @@
       display: block;
       line-height: 32px;
       color: $--datepicker-color;
+      margin: 0 auto;
 
       &:hover {
-        background-color: $--datepicker-cell-hover-color;
+        color: $--datepicker-text-hover-color;
       }
     }
 
     &.current:not(.disabled) .cell {
-      background-color: $--datepicker-active-color !important;
-      color: $--color-white;
+      color: $--datepicker-active-color;
     }
   }
 }

packages/theme-chalk/src/date-picker/picker-panel.scss

@@ -6,7 +6,7 @@
   box-shadow: $--box-shadow-light;
   background: $--color-white;
   border-radius: $--border-radius-base;
-  line-height: 20px;
+  line-height: 30px;
   margin: 5px 0;
 
   @include e((body, body-wrapper)) {
@@ -44,7 +44,7 @@
     cursor: pointer;
 
     &:hover {
-      background-color: $--datepicker-cell-hover-color;
+      color: $--datepicker-text-hover-color;
     }
 
     &.active {
@@ -77,7 +77,7 @@
     background: transparent;
     cursor: pointer;
     outline: none;
-    margin-top: 3px;
+    margin-top: 8px;
 
     &:hover {
       color: $--datepicker-text-hover-color;
@@ -106,7 +106,7 @@
   border-right: 1px solid $--datepicker-inner-border-color;
   box-sizing: border-box;
   padding-top: 6px;
-  background-color: $--color-black;
+  background-color: $--color-white;
   overflow: auto;
 }
 

packages/theme-chalk/src/date-picker/picker.scss

@@ -5,30 +5,144 @@
 @include b(date-editor) {
   position: relative;
   display: inline-block;
+  text-align: left;
 
-  &.el-input {
-    width: 193px;
+  &.el-input,
+  &.el-input__inner {
+    width: 220px;
   }
 
-  @include m(daterange) {
-    &.el-input {
-      width: 220px;
+  @include m((daterange, timerange)) {
+    &.el-input,
+    &.el-input__inner {
+      width: 320px;
     }
   }
 
   @include m(datetimerange) {
-    &.el-input {
-      width: 350px;
+    &.el-input,
+    &.el-input__inner {
+      width: 370px;
     }
   }
 
-  .el-picker-panel {
-    position: absolute;
-    min-width: 180px;
-    box-sizing: border-box;
-    box-shadow: 0 2px 6px #ccc;
-    background: $--color-white;
-    z-index: 10;
-    top: 41px;
+  .el-range__icon {
+    font-size: 14px;
+    margin-left: -5px;
+    color: $--color-text-placeholder;
+    float: left;
+    line-height: 32px;
+  }
+
+  .el-range-input {
+    appearance: none;
+    border: none;
+    outline: none;
+    display: inline-block;
+    height: 100%;
+    margin: 0;
+    padding: 0;
+    width: 38%;
+    text-align: center;
+    font-size: $--font-size-base;
+    color: $--color-text-regular;
+
+    &::placeholder {
+      color: $--color-text-placeholder;
+    }
+  }
+
+  .el-range-separator {
+    display: inline-block;
+    height: 100%;
+    padding: 0 5px;
+    margin: 0;
+    line-height: 32px;
+    color: $--color-text-primary;
+    font-size: 14px;
+    width: 5%;
+  }
+
+  .el-range__close-icon {
+    font-size: 14px;
+    color: $--color-text-placeholder;
+    width: 25px;
+    display: inline-block;
+    float: right;
+    line-height: 32px;
+  }
+}
+
+@include b(range-editor) {
+  &.el-input__inner {
+    padding: 3px 10px;
+  }
+
+  @include when(active) {
+    border-color: $--color-primary;
+
+    &:hover {
+      border-color: $--color-primary;
+    }
+  }
+
+  @include m(medium) {
+    &.el-input__inner {
+      height: $--input-medium-height;
+    }
+
+    .el-range-separator {
+      line-height: 28px;
+      font-size: $--input-medium-font-size;
+    }
+
+    .el-range-input {
+      font-size: $--input-medium-font-size;
+    }
+
+    .el-range__icon,
+    .el-range__close-icon {
+      line-height: 28px;
+    }
+  }
+
+  @include m(small) {
+    &.el-input__inner {
+      height: $--input-small-height;
+    }
+
+    .el-range-separator {
+      line-height: 24px;
+      font-size: $--input-small-font-size;
+    }
+
+    .el-range-input {
+      font-size: $--input-small-font-size;
+    }
+
+    .el-range__icon,
+    .el-range__close-icon {
+      line-height: 24px;
+    }
+  }
+
+  @include m(mini) {
+    &.el-input__inner {
+      height: $--input-mini-height;
+    }
+
+    .el-range-separator {
+      line-height: 20px;
+      font-size: $--input-mini-font-size;
+    }
+
+    .el-range-input {
+      font-size: $--input-mini-font-size;
+    }
+
+    .el-range__icon,
+    .el-range__close-icon {
+      line-height: 20px;
+    }
   }
 }

packages/theme-chalk/src/date-picker/time-range-picker.scss

@@ -1,7 +1,7 @@
 @import "../common/var";
 
 @include b(time-range-picker) {
-  min-width: 354px;
+  width: 354px;
   overflow: visible;
 
   @include e(content) {

packages/theme-chalk/src/date-picker/year-table.scss

@@ -15,9 +15,13 @@
     cursor: pointer;
 
     &.disabled .cell {
-      background-color: #f4f4f4;
+      background-color: $--background-color-base;
       cursor: not-allowed;
-      color: #ccc;
+      color: $--color-text-placeholder;
+
+      &:hover {
+        color: $--color-text-placeholder;
+      }
     }
 
     .cell {
@@ -26,15 +30,15 @@
       display: block;
       line-height: 32px;
       color: $--datepicker-color;
+      margin: 0 auto;
 
       &:hover {
-        background-color: $--datepicker-cell-hover-color;
+        color: $--datepicker-text-hover-color;
       }
     }
 
     &.current:not(.disabled) .cell {
-      background-color: $--datepicker-active-color !important;
-      color: $--color-white;
+      color: $--datepicker-active-color;
     }
   }
 }

packages/theme-chalk/src/input.scss

@@ -69,6 +69,7 @@
     width: 25px;
     text-align: center;
     transition: all .3s;
+    line-height: $--input-height;
 
     &:after {
       content: '';
@@ -125,6 +126,10 @@
     @include e(inner) {
       height: $--input-medium-height;
     }
+
+    .el-input__icon {
+      line-height: $--input-medium-height;
+    }
   }
   @include m(small) {
     font-size: $--input-small-font-size;
@@ -132,6 +137,10 @@
     @include e(inner) {
       height: $--input-small-height;
     }
+
+    .el-input__icon {
+      line-height: $--input-small-height;
+    }
   }
   @include m(mini) {
     font-size: $--input-mini-font-size;
@@ -139,6 +148,10 @@
     @include e(inner) {
       height: $--input-mini-height;
     }
+
+    .el-input__icon {
+      line-height: $--input-mini-height;
+    }
   }
 }
 

packages/theme-chalk/src/table.scss

@@ -44,7 +44,7 @@
     color: #666;
     font-size: 12px;
     transition: transform 0.2s ease-in-out;
-    height: 40px;
+    height: 20px;
 
     @include m(expanded) {
       transform: rotate(90deg);

packages/theme-chalk/src/time-select.scss

@@ -16,6 +16,7 @@
 .time-select-item {
   padding: 8px 10px;
   font-size: 14px;
+  line-height: 20px;
 }
 
 .time-select-item.selected:not(.disabled) {

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

@@ -302,8 +302,7 @@ describe('DatePicker', () => {
 
       const input = vm.$el.querySelector('input');
 
-      input.blur();
-      input.focus();
+      input.click();
 
       setTimeout(_ => {
         const picker = vm.$refs.compo.picker;
@@ -628,8 +627,7 @@ describe('DatePicker', () => {
     }, true);
     const input = vm.$el.querySelector('input');
 
-    input.blur();
-    input.focus();
+    input.click();
 
     setTimeout(_ => {
       const panels = vm.picker.$el.querySelectorAll('.el-date-range-picker__content');
@@ -659,10 +657,8 @@ describe('DatePicker', () => {
         type: 'datetimerange',
         value: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)]
       }, true);
-      const input = vm.$el.querySelector('input');
 
-      input.blur();
-      input.focus();
+      vm.$el.click();
 
       setTimeout(done, DELAY);
     });
@@ -673,56 +669,6 @@ describe('DatePicker', () => {
       expect(Array.prototype.slice.call(vm.picker.$el.querySelectorAll('.el-time-panel'))).to.length(2);
     });
 
-    it('click timepicker', done => {
-      const input = vm.picker.$el.querySelectorAll('.el-date-range-picker__editors-wrap input')[1];
-      input.blur();
-      input.focus();
-      input.blur();
-
-      setTimeout(_ => {
-        expect(vm.picker.$el.querySelector('.el-date-range-picker__time-picker-wrap .el-time-panel')).to.have.deep.property('style.display').to.equal('');
-        done();
-      }, DELAY);
-    });
-
-    it('click timepicker in right', done => {
-      const input = vm.picker.$el.querySelectorAll('.el-date-range-picker__editors-wrap input')[3];
-      input.blur();
-      input.focus();
-      input.blur();
-
-      setTimeout(_ => {
-        expect(vm.picker.$el.querySelectorAll('.el-date-range-picker__time-picker-wrap .el-time-panel')[1]).to.have.deep.property('style.display').to.equal('');
-        done();
-      }, DELAY);
-    });
-
-    it('input timepicker', done => {
-      const input = vm.picker.$el.querySelectorAll('.el-date-range-picker__editors-wrap input')[1];
-
-      input.value = '10:22:14';
-      triggerEvent(input, 'change', true);
-      setTimeout(_ => {
-        expect(vm.picker.minDate.getHours()).to.equal(10);
-        expect(vm.picker.minDate.getMinutes()).to.equal(22);
-        expect(vm.picker.minDate.getSeconds()).to.equal(14);
-        done();
-      }, DELAY);
-    });
-
-    it('input timepicker in right', done => {
-      const input = vm.picker.$el.querySelectorAll('.el-date-range-picker__editors-wrap input')[3];
-
-      input.value = '10:22:14';
-      triggerEvent(input, 'change', true);
-      setTimeout(_ => {
-        expect(vm.picker.maxDate.getHours()).to.equal(10);
-        expect(vm.picker.maxDate.getMinutes()).to.equal(22);
-        expect(vm.picker.maxDate.getSeconds()).to.equal(14);
-        done();
-      }, DELAY);
-    });
-
     it('select daterange', done => {
       const pickers = vm.picker.$el.querySelectorAll('.el-date-range-picker__content');
       const leftCell = pickers[0].querySelector('td.available');

test/unit/specs/dropdown.spec.js

@@ -34,7 +34,6 @@ describe('Dropdown', () => {
       triggerEvent(triggerElm, 'mouseleave');
       setTimeout(_ => {
         expect(dropdown.visible).to.not.true;
-        destroyVM(vm);
         done();
       }, 300);
     }, 400);
@@ -75,7 +74,6 @@ describe('Dropdown', () => {
       setTimeout(_ => {
         expect(dropdown.visible).to.not.true;
         expect(callback.calledWith(myCommandObject)).to.be.true;
-        destroyVM(vm);
         done();
       }, 300);
     }, 300);
@@ -108,7 +106,6 @@ describe('Dropdown', () => {
       triggerElm.click();
       dropdown.$nextTick(_ => {
         expect(dropdown.visible).to.be.true;
-        destroyVM(vm);
         done();
       });
     });
@@ -148,7 +145,6 @@ describe('Dropdown', () => {
       triggerEvent(triggerElm, 'mouseleave');
       setTimeout(_ => {
         expect(dropdown.visible).to.not.true;
-        destroyVM(vm);
         done();
       }, 300);
     }, 300);

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

@@ -236,9 +236,7 @@ describe('TimePicker(range)', () => {
     }, true);
     const input = vm.$el.querySelector('input');
 
-    input.blur();
-    input.focus();
-    input.blur();
+    input.click();
     setTimeout(done, 20);
   });
 
@@ -260,9 +258,7 @@ describe('TimePicker(range)', () => {
     }, true);
     const input = vm2.$el.querySelector('input');
 
-    input.blur();
-    input.focus();
-    input.blur();
+    input.click();
     setTimeout(() => {
       expect(vm2.picker.maxTime >= vm2.picker.minTime).to.true;
       destroyVM(vm2);