DatePicker/TimePicker: add chalk theme

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());