mirror of https://github.com/ElemeFE/element
DatePicker/TimePicker: add chalk theme (#7169)
* DatePicker/TimePicker: add chalk theme * minor updatespull/7206/head
杨奕
GitHub
parent
dda21ce96e
commit
9acdc8e4c3
|
|
@ -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 | — | — |
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 | — | — |
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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')
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -1,9 +1,5 @@
|
|||
<template>
|
||||
<div style="margin: 20px;">
|
||||
<el-pagination
|
||||
layout="prev, pager, next, jumper"
|
||||
:total="50">
|
||||
</el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -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());
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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: ''
|
||||
};
|
||||
},
|
||||
|
|
|
|||
|
|
@ -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];
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -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() {
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
&.disabled {
|
||||
background-color: #f4f4f4;
|
||||
&.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 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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
@import "../common/var";
|
||||
|
||||
@include b(time-range-picker) {
|
||||
min-width: 354px;
|
||||
width: 354px;
|
||||
overflow: visible;
|
||||
|
||||
@include e(content) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
.time-select-item {
|
||||
padding: 8px 10px;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.time-select-item.selected:not(.disabled) {
|
||||
|
|
|
|||
|
|
@ -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');
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
|
|
|
|||
Loading…
Reference in New Issue