Skip to content

E
Element
Commit 9acdc8e4 authored by 杨奕's avatar 杨奕 Committed by GitHub
Browse files
Options

DatePicker/TimePicker: add chalk theme (#7169) 

* DatePicker/TimePicker: add chalk theme

* minor updates
parent dda21ce9
Hide whitespace changes
Inline Side-by-side
Showing with 478 additions and 250 deletions
examples/docs/en-US/date-picker.md
View file @ 9acdc8e4
......@@ -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
View file @ 9acdc8e4
......@@ -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
View file @ 9acdc8e4
......@@ -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
View file @ 9acdc8e4
......@@ -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
View file @ 9acdc8e4
......@@ -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
View file @ 9acdc8e4
......@@ -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
View file @ 9acdc8e4
......@@ -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
View file @ 9acdc8e4
......@@ -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
View file @ 9acdc8e4
......@@ -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
View file @ 9acdc8e4
<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
View file @ 9acdc8e4
......@@ -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
View file @ 9acdc8e4
......@@ -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
View file @ 9acdc8e4
......@@ -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
View file @ 9acdc8e4
......@@ -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
View file @ 9acdc8e4
......@@ -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
View file @ 9acdc8e4
......@@ -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
View file @ 9acdc8e4
......@@ -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
View file @ 9acdc8e4
......@@ -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
View file @ 9acdc8e4
......@@ -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
View file @ 9acdc8e4
......@@ -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
View file @ 9acdc8e4
@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
View file @ 9acdc8e4
......@@ -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
View file @ 9acdc8e4
......@@ -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
View file @ 9acdc8e4
......@@ -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
View file @ 9acdc8e4
......@@ -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
View file @ 9acdc8e4
@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
View file @ 9acdc8e4
......@@ -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
View file @ 9acdc8e4
......@@ -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
View file @ 9acdc8e4
......@@ -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
View file @ 9acdc8e4
......@@ -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
View file @ 9acdc8e4
......@@ -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
View file @ 9acdc8e4
......@@ -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
View file @ 9acdc8e4
......@@ -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);
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment