Skip to content

E
Element
Commit 096b3559 authored by qingwei.li's avatar qingwei.li
Browse files
Options

update time-picker

parent 82b4582c
Expand all Show whitespace changes
Inline Side-by-side
Showing with 285 additions and 288 deletions
examples/docs/time-picker.md
View file @ 096b3559
......@@ -8,7 +8,7 @@
## 固定时间点
提供几个固定的时间点供用户选择。
{{value}}
<div class="demo-box">
<el-time-select
:picker-options="{
......@@ -22,7 +22,7 @@
```html
<el-time-select
:value.sync="value"
v-model="value"
:picker-options="{
start: '08:30',
step: '00:15',
......@@ -37,13 +37,14 @@
<div class="demo-box">
<el-time-picker
v-model="value"
placeholder="任意时间点">
</el-time-picker>
</div>
```html
<el-time-picker
:value.sync="value"
v-model="value"
placeholder="任意时间点">
</el-time-picker>
```
......@@ -57,7 +58,7 @@
```html
<el-time-picker
:value.sync="value"
v-model="value"
placeholder="任意时间点">
</el-time-picker>
```
......@@ -75,7 +76,7 @@
```html
<el-time-picker
:value.sync="value"
v-model="value"
:picker-options="{
selectableRange: '18:30:00 - 20:30:00'
}"
......@@ -92,7 +93,7 @@
<div class="demo-box">
<el-time-select
placeholder="起始时间"
:value.sync="startTime"
v-model="startTime"
:picker-options="{
start: '08:30',
step: '00:15',
......@@ -101,7 +102,7 @@
</el-time-select>
<el-time-select
placeholder="结束时间"
:value.sync="endTime"
v-model="endTime"
:picker-options="{
start: '08:30',
step: '00:15',
......@@ -114,7 +115,7 @@
```html
<el-time-select
placeholder="起始时间"
:value.sync="startTime"
v-model="startTime"
:picker-options="{
start: '08:30',
step: '00:15',
......@@ -123,7 +124,7 @@
</el-time-select>
<el-time-select
placeholder="结束时间"
:value.sync="endTime"
v-model="endTime"
:picker-options="{
start: '08:30',
step: '00:15',
......@@ -139,7 +140,7 @@
<div class="demo-box">
<el-time-select
placeholder="起始时间"
:value.sync="startTime2"
v-model="startTime2"
:picker-options="{
start: '08:30',
step: '00:15',
......@@ -148,7 +149,7 @@
</el-time-select>
<el-time-select
placeholder="结束时间"
:value.sync="endTime2"
v-model="endTime2"
:picker-options="{
start: '08:30',
step: '00:15',
......@@ -161,7 +162,7 @@
```html
<el-time-select
placeholder="起始时间"
:value.sync="startTime2"
v-model="startTime2"
:picker-options="{
start: '08:30',
step: '00:15',
......@@ -170,7 +171,7 @@
</el-time-select>
<el-time-select
placeholder="结束时间"
:value.sync="endTime2"
v-model="endTime2"
:picker-options="{
start: '08:30',
step: '00:15',
......@@ -201,6 +202,7 @@
export default {
data() {
return {
value: '',
startTime: '',
endTime: '',
startTime2: '',
......
packages/date-picker/package.json
View file @ 096b3559
......@@ -12,10 +12,9 @@
"author": "long.zhang@ele.me",
"license": "MIT",
"dependencies": {
"wind-dom": "0.0.3",
"vue-clickoutside": "*"
"wind-dom": "0.0.3"
},
"devDependencies": {
"vue": "^1.0.0"
"vue": "^2.0.0"
}
}
packages/date-picker/src/basic/time-spinner.vue
View file @ 096b3559
<template>
<div class="el-time-spinner">
{{hours}}
<div
@mouseenter="emitSelectRange('hours')"
class="el-time-spinner__wrapper"
v-el:hour>
ref="hour">
<ul class="el-time-spinner__list">
<li
@click="handleClick('hours', { value: hour, disabled: disabled }, true)"
v-for="(hour, disabled) in hoursList"
v-for="(disabled, hour) in hoursList"
track-by="$index"
class="el-time-spinner__item"
:class="{ 'active': hour === hours, 'disabled': disabled }"
......@@ -16,29 +18,30 @@
<div
@mouseenter="emitSelectRange('minutes')"
class="el-time-spinner__wrapper"
v-el:minute>
ref="minute">
<ul class="el-time-spinner__list">
<li
@click="handleClick('minutes', minute, true)"
v-for="minute in 60"
@click="handleClick('minutes', key, true)"
v-for="(minute, key) in 60"
class="el-time-spinner__item"
:class="{ 'active': minute === minutes }"
v-text="minute"></li>
:class="{ 'active': key === minutes }"
v-text="key"></li>
</ul>
</div>
<div
@mouseenter="emitSelectRange('seconds')"
class="el-time-spinner__wrapper"
v-el:second>
ref="second">
<ul class="el-time-spinner__list">
<li
@click="handleClick('seconds', second, true)"
v-for="second in 60"
@click="handleClick('seconds', key, true)"
v-for="(second, key) in 60"
class="el-time-spinner__item"
:class="{ 'active': second === seconds }"
v-text="second"></li>
:class="{ 'active': key === seconds }"
v-text="key"></li>
</ul>
</div>
</div>
</template>
<script type="text/ecmascript-6">
......@@ -70,27 +73,28 @@
},
watch: {
hours(newVal, oldVal) {
hoursPrivate(newVal, oldVal) {
if (!(newVal >= 0 && newVal <= 23)) {
this.hours = oldVal;
this.hoursPrivate = oldVal;
}
this.$els.hour.scrollTop = Math.max(0, (this.hours - 2.5) * 32 + 80);
this.$refs.hour.scrollTop = Math.max(0, (this.hoursPrivate - 2.5) * 32 + 80);
this.$emit('change', { hours: newVal });
},
minutes(newVal, oldVal) {
minutesPrivate(newVal, oldVal) {
if (!(newVal >= 0 && newVal <= 59)) {
this.minutes = oldVal;
this.minutesPrivate = oldVal;
}
this.$els.minute.scrollTop = Math.max(0, (this.minutes - 2.5) * 32 + 80);
this.$refs.minute.scrollTop = Math.max(0, (this.minutesPrivate - 2.5) * 32 + 80);
this.$emit('change', { minutes: newVal });
},
seconds(newVal, oldVal) {
secondsPrivate(newVal, oldVal) {
if (!(newVal >= 0 && newVal <= 59)) {
this.seconds = oldVal;
this.secondsPrivate = oldVal;
}
this.$els.second.scrollTop = Math.max(0, (this.seconds - 2.5) * 32 + 80);
this.$refs.second.scrollTop = Math.max(0, (this.secondsPrivate - 2.5) * 32 + 80);
this.$emit('change', { seconds: newVal });
}
},
......@@ -101,9 +105,17 @@
}
},
data() {
return {
hoursPrivate: 0,
minutesPrivate: 0,
secondsPrivate: 0
};
},
methods: {
focusEditor(type) {
const editor = this.$els[type + 'Editor'];
const editor = this.$refs[type + 'Editor'];
if (editor) {
editor.focus();
}
......@@ -114,7 +126,7 @@
return;
}
this[type] = value.value >= 0 ? value.value : value;
this[type + 'Private'] = value.value >= 0 ? value.value : value;
this.emitSelectRange(type);
},
......@@ -130,9 +142,9 @@
},
ajustScrollTop() {
this.$els.hour.scrollTop = Math.max(0, (this.hours - 2.5) * 32 + 80);
this.$els.minute.scrollTop = Math.max(0, (this.minutes - 2.5) * 32 + 80);
this.$els.second.scrollTop = Math.max(0, (this.seconds - 2.5) * 32 + 80);
this.$refs.hour.scrollTop = Math.max(0, (this.hours - 2.5) * 32 + 80);
this.$refs.minute.scrollTop = Math.max(0, (this.minutes - 2.5) * 32 + 80);
this.$refs.second.scrollTop = Math.max(0, (this.seconds - 2.5) * 32 + 80);
}
}
};
......
packages/date-picker/src/panel/date.vue
View file @ 096b3559
......@@ -26,7 +26,7 @@
type="text"
class="el-date-picker__editor">
<time-picker
v-ref:timepicker
ref="timepicker"
:date="date"
@pick="handleTimePick"
v-show="timePickerVisible">
......@@ -75,7 +75,7 @@
:disabled-date="disabledDate">
</date-table>
<year-table
v-ref:year-table
ref="yearTable"
:year="year"
v-show="currentView === 'year'"
@pick="handleYearPick">
......
packages/date-picker/src/panel/time-range.vue
View file @ 096b3559
......@@ -8,7 +8,7 @@
<div class="el-time-range-picker__header">开始时间</div>
<div class="el-time-range-picker__body el-time-panel__content">
<time-spinner
v-ref:min-spinner
ref="minSpinner"
:show-seconds="showSeconds"
@change="handleMinChange"
@select-range="setMinSelectionRange"
......@@ -22,7 +22,7 @@
<div class="el-time-range-picker__header">结束时间</div>
<div class="el-time-range-picker__body el-time-panel__content">
<time-spinner
v-ref:max-spinner
ref="maxSpinner"
:show-seconds="showSeconds"
@change="handleMaxChange"
@select-range="setMaxSelectionRange"
......
packages/date-picker/src/panel/time-select.vue
View file @ 096b3559
......@@ -99,7 +99,6 @@
handleClick(item) {
if (!item.disabled) {
this.$emit('pick', item.value);
this.value = item.value;
}
}
},
......
packages/date-picker/src/panel/time.vue
View file @ 096b3559
......@@ -5,12 +5,12 @@
class="el-time-panel">
<div class="el-time-panel__content">
<time-spinner
v-ref:spinner
ref="spinner"
@change="handleChange"
:show-seconds="showSeconds"
@select-range="setSelectionRange"
:hours="hours"
:minutes="minutes"
@select-range="setSelectionRange"
:seconds="seconds">
</time-spinner>
</div>
......@@ -34,12 +34,6 @@
},
props: {
date: {
default() {
return new Date();
}
},
format: {
default: 'HH:mm:ss'
},
......@@ -61,51 +55,18 @@
}
},
data() {
return {
date: new Date(),
hours: 0,
minutes: 0,
seconds: 0
};
},
computed: {
showSeconds() {
return (this.format || '').indexOf('ss') !== -1;
},
hours: {
get() {
if (this.date) {
return this.date.getHours();
}
return 0;
},
set(hours) {
if (this.date) {
this.date.setHours(hours);
}
}
},
minutes: {
get() {
if (this.date) {
return this.date.getMinutes();
}
return 0;
},
set(minutes) {
if (this.date) {
this.date.setMinutes(minutes);
}
}
},
seconds: {
get() {
if (this.date) {
return this.date.getSeconds();
}
return 0;
},
set(seconds) {
if (this.date) {
this.date.setSeconds(seconds);
}
}
}
},
......@@ -115,9 +76,19 @@
},
handleChange(date) {
if (date.hours !== undefined) this.hours = date.hours;
if (date.minutes !== undefined) this.minutes = date.minutes;
if (date.seconds !== undefined) this.seconds = date.seconds;
if (date.hours !== undefined) {
this.date.setHours(date.hours);
this.hours = this.date.getHours();
}
if (date.minutes !== undefined) {
this.date.setMinutes(date.minutes);
this.minutes = this.date.getMinutes();
}
if (date.seconds !== undefined) {
this.date.setSeconds(date.seconds);
this.seconds = this.date.getSeconds();
}
this.handleConfirm(true);
},
......@@ -147,7 +118,13 @@
}
},
ready() {
created() {
this.hours = this.date.getHours();
this.minutes = this.date.getMinutes();
this.seconds = this.date.getSeconds();
},
mounted() {
this.$refs.spinner.selectableRange = this.selectableRange;
this.$nextTick(() => this.handleConfirm(true, true));
}
......
packages/date-picker/src/picker.vue
View file @ 096b3559
<template>
<span
class="el-date-editor"
v-clickoutside="pickerVisible = false"
v-clickoutside="handleClose"
:class="{
'is-have-trigger': haveTrigger,
'is-active': pickerVisible,
'is-filled': !!this.value,
'is-lg': size === 'lg', 'is-sm': size === 'sm'
'is-filled': !!this.value
}">
<input
lazy
class="el-date-editor__editor"
:readonly="readonly"
:type="editorType"
:placeholder="placeholder"
:style="{ height: height ? height + 'px' : '' }"
@focus="handleFocus"
@blur="handleBlur"
@keydown="handleKeydown($event)"
@keyup="handleKeyup($event)"
v-el:reference
v-model="visualValue" />
@keydown="handleKeydown"
@keyup="handleKeyup"
ref="reference"
v-model.lazy="visualValue" />
<span
@click="togglePicker()"
class="el-date-editor__trigger el-icon {{triggerClass}}"
class="el-date-editor__trigger el-icon"
:class="[triggerClass]"
v-if="haveTrigger">
</span>
</span>
......@@ -33,6 +31,7 @@
<script>
import Vue from 'vue';
import Clickoutside from 'main/utils/clickoutside';
import { merge, formatDate, parseDate, getWeekNumber } from './util';
import Popper from 'main/utils/popper.js';
......@@ -189,7 +188,7 @@ export default {
},
directives: {
clickoutside: require('vue-clickoutside')
Clickoutside
},
data() {
......@@ -254,11 +253,11 @@ export default {
const parsedValue = parser(value, this.format || DEFAULT_FORMATS[type]);
if (parsedValue) {
this.value = parsedValue;
this.$emit('input', parsedValue);
}
return;
}
this.value = value;
this.$emit('input', value);
}
},
......@@ -268,6 +267,10 @@ export default {
},
methods: {
handleClose() {
this.pickerVisible = false;
},
handleFocus() {
const type = this.type;
......@@ -331,7 +334,8 @@ export default {
const parsedValue = parser(value, this.format || DEFAULT_FORMATS[type]);
if (!parsedValue) return;
this.picker.value = this.value = parsedValue;
this.picker.value = parsedValue;
this.$emit('input', parsedValue);
if (this.type.indexOf('date') > -1) return;
......@@ -389,8 +393,7 @@ export default {
showPicker() {
if (!this.picker) {
this.picker = new Vue(merge({
el: document.createElement('div'),
replace: true
el: document.createElement('div')
}, this.panel));
this.picker.showTime = this.type === 'datetime' || this.type === 'datetimerange';
this.picker.selectionMode = this.selectionMode;
......@@ -427,7 +430,7 @@ export default {
this.picker.resetView && this.picker.resetView();
this.picker.$on('pick', (date, visible = false) => {
this.value = date;
this.$emit('input', date);
if (!visible) {
this.pickerVisible = this.picker.visible = false;
......@@ -437,8 +440,8 @@ export default {
this.picker.$on('select-range', (start, end) => {
setTimeout(() => {
this.$els.reference.setSelectionRange(start, end);
this.$els.reference.focus();
this.$refs.reference.setSelectionRange(start, end);
this.$refs.reference.focus();
}, 0);
});
} else {
......@@ -451,7 +454,7 @@ export default {
return;
}
this.popper = new Popper(this.$els.reference, this.picker.$el, {
this.popper = new Popper(this.$refs.reference, this.picker.$el, {
gpuAcceleration: false,
placement: 'bottom-start',
boundariesPadding: 0,
......
packages/theme-default/src/spinner.css
View file @ 096b3559
......@@ -2,6 +2,11 @@
@import "./common/var.css";
@component-namespace el {
@b time-spinner {
display: flex;
width: 100%;
}
@b spinner {
display: inline-block;
vertical-align: middle;
......
src/index.js
View file @ 096b3559
This diff is collapsed.
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