From 33b5ea36f84ec1393029e37ca165ceba9dc534ce Mon Sep 17 00:00:00 2001 From: Leopoldthecoder Date: Fri, 22 Sep 2017 14:06:38 +0800 Subject: [PATCH 1/2] DatePicker/TimePicker: add chalk theme --- examples/docs/en-US/date-picker.md | 14 +- examples/docs/en-US/datetime-picker.md | 14 +- examples/docs/en-US/i18n.md | 2 +- examples/docs/en-US/time-picker.md | 9 +- examples/docs/zh-CN/date-picker.md | 18 ++- examples/docs/zh-CN/datetime-picker.md | 14 +- examples/docs/zh-CN/i18n.md | 2 +- examples/docs/zh-CN/time-picker.md | 8 +- packages/date-picker/src/basic/date-table.vue | 32 +++- packages/date-picker/src/panel/date-range.vue | 28 +--- packages/date-picker/src/panel/date.vue | 25 +--- packages/date-picker/src/panel/time-range.vue | 6 +- packages/date-picker/src/panel/time.vue | 10 +- packages/date-picker/src/picker.vue | 109 ++++++++++++-- .../date-picker/src/picker/date-picker.js | 14 +- .../date-picker/src/picker/time-picker.js | 10 +- .../src/date-picker/date-picker.scss | 23 ++- .../src/date-picker/date-range-picker.scss | 12 +- .../src/date-picker/date-table.scss | 96 +++++++++--- .../src/date-picker/month-table.scss | 14 +- .../src/date-picker/picker-panel.scss | 8 +- .../theme-chalk/src/date-picker/picker.scss | 137 ++++++++++++++++-- .../src/date-picker/time-range-picker.scss | 2 +- .../src/date-picker/year-table.scss | 14 +- packages/theme-chalk/src/input.scss | 13 ++ packages/theme-chalk/src/time-select.scss | 1 + test/unit/specs/date-picker.spec.js | 9 +- test/unit/specs/time-picker.spec.js | 8 +- 28 files changed, 463 insertions(+), 189 deletions(-) diff --git a/examples/docs/en-US/date-picker.md b/examples/docs/en-US/date-picker.md index 1419f48434..d930911cd6 100644 --- a/examples/docs/en-US/date-picker.md +++ b/examples/docs/en-US/date-picker.md @@ -215,7 +215,9 @@ Picking a date range is supported. + range-separator="To" + start-placeholder="Start date" + end-placeholder="End date">
@@ -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">
@@ -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 | — | — | diff --git a/examples/docs/en-US/datetime-picker.md b/examples/docs/en-US/datetime-picker.md index 27381fba5a..71f726546a 100644 --- a/examples/docs/en-US/datetime-picker.md +++ b/examples/docs/en-US/datetime-picker.md @@ -175,7 +175,9 @@ DateTimePicker is derived from DatePicker and TimePicker. For a more detailed ex + range-separator="To" + start-placeholder="Start date" + end-placeholder="End date">
@@ -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">
@@ -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 diff --git a/examples/docs/en-US/i18n.md b/examples/docs/en-US/i18n.md index a59044db07..6b98f0b4bf 100644 --- a/examples/docs/en-US/i18n.md +++ b/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') diff --git a/examples/docs/en-US/time-picker.md b/examples/docs/en-US/time-picker.md index 76a10278f6..e9aaab6cbe 100644 --- a/examples/docs/en-US/time-picker.md +++ b/examples/docs/en-US/time-picker.md @@ -118,7 +118,9 @@ Can pick an arbitrary time range. + range-separator="To" + start-placeholder="Start time" + end-placeholder="End time"> @@ -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 diff --git a/examples/docs/zh-CN/date-picker.md b/examples/docs/zh-CN/date-picker.md index 7ed483a8af..cccd98e09d 100644 --- a/examples/docs/zh-CN/date-picker.md +++ b/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 @@ + range-separator="至" + start-placeholder="开始日期" + end-placeholder="结束日期">
@@ -235,7 +237,9 @@ v-model="value7" type="daterange" align="right" - placeholder="选择日期范围" + range-separator="至" + start-placeholder="开始日期" + end-placeholder="结束日期" :picker-options="pickerOptions2">
@@ -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 | — | — | diff --git a/examples/docs/zh-CN/datetime-picker.md b/examples/docs/zh-CN/datetime-picker.md index 8b54cb1cb5..dd4bdb50c6 100644 --- a/examples/docs/zh-CN/datetime-picker.md +++ b/examples/docs/zh-CN/datetime-picker.md @@ -174,7 +174,9 @@ DateTimePicker 由 DatePicker 和 TimePicker 派生，`Picker Options` 或者其 + range-separator="至" + start-placeholder="开始日期" + end-placeholder="结束日期">
@@ -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">
@@ -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 diff --git a/examples/docs/zh-CN/i18n.md b/examples/docs/zh-CN/i18n.md index 27945dfe48..78a1eae4a0 100644 --- a/examples/docs/zh-CN/i18n.md +++ b/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') diff --git a/examples/docs/zh-CN/time-picker.md b/examples/docs/zh-CN/time-picker.md index 7177ee5c91..6b4dc2eb11 100644 --- a/examples/docs/zh-CN/time-picker.md +++ b/examples/docs/zh-CN/time-picker.md @@ -117,6 +117,9 @@ @@ -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 diff --git a/packages/date-picker/src/basic/date-table.vue b/packages/date-picker/src/basic/date-table.vue index 17216acc70..3752148ca9 100644 --- a/packages/date-picker/src/basic/date-table.vue +++ b/packages/date-picker/src/basic/date-table.vue @@ -17,8 +17,13 @@ :class="{ current: isWeekActive(row[1]) }"> + :class="getCellClasses(cell)"> +
+ + {{ cell.text }} + +
+ @@ -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()); diff --git a/packages/date-picker/src/panel/date-range.vue b/packages/date-picker/src/panel/date-range.vue index 60406d360d..c2cb142e22 100644 --- a/packages/date-picker/src/panel/date-range.vue +++ b/packages/date-picker/src/panel/date-range.vue @@ -2,7 +2,6 @@
{ - 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() { diff --git a/packages/date-picker/src/panel/date.vue b/packages/date-picker/src/panel/date.vue index 1aa2237f34..d40689c2b1 100644 --- a/packages/date-picker/src/panel/date.vue +++ b/packages/date-picker/src/panel/date.vue @@ -2,9 +2,6 @@
-
+