github
/
element
mirror of https://github.com/ElemeFE/element
1
0
Fork 0
Code Issues Releases Wiki Activity

Merge pull request #50 from eleme/feat/next-datepicker 

Feat/next datepicker
pull/2/head
FuryBean 2016-08-12 10:15:40 +08:00 committed by GitHub
parent af71d7b708 0c8159cd8a
commit cf16180a71
19 changed files with 677 additions and 692 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
examples/docs/date-picker.md
View File

@ -50,7 +50,14 @@
picker.$emit('pick', [start, end]);
}
}]
}
},
value1: '',
value2: '',
value3: '',
value4: '',
value5: '',
value6: '',
value7: ''
};
}
};
@ -63,12 +70,14 @@
以『日』为基本单位
<el-date-picker
v-model="value1"
type="date"
placeholder="选择日期">
</el-date-picker>
```html
<el-date-picker
v-model="value"
type="date"
placeholder="选择日期">
</el-date-picker>
@ -79,6 +88,7 @@
以『周』为基本单位
<el-date-picker
v-model="value2"
type="week"
format="yyyy 第 WW 周"
placeholder="选择周">
@ -86,6 +96,7 @@
```html
<el-date-picker
v-model="value"
type="week"
format="yyyy 第 WW 周"
placeholder="选择周">
@ -97,12 +108,14 @@
以『月』为基本单位
<el-date-picker
v-model="value3"
type="month"
placeholder="选择月">
</el-date-picker>
```html
<el-date-picker
v-model="value"
type="month"
placeholder="选择月">
</el-date-picker>
@ -113,12 +126,14 @@
以『年』为基本单位
<el-date-picker
v-model="value4"
type="year"
placeholder="选择日期">
</el-date-picker>
```html
<el-date-picker
v-model="value"
type="year"
placeholder="选择日期">
</el-date-picker>
@ -129,6 +144,7 @@
左侧区域可配置快捷选项，例如『今天』、『昨天』等
<el-date-picker
v-model="value5"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions1">
@ -136,6 +152,7 @@
```html
<el-date-picker
v-model="value"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions1">
@ -166,7 +183,8 @@
picker.$emit('pick', date);
}
}]
}
},
value: ''
};
}
};
@ -180,6 +198,7 @@
在一个选择器中选择
<el-date-picker
v-model="value6"
type="daterange"
placeholder="选择日期范围"
style="width: 220px">
@ -187,6 +206,7 @@
```html
<el-date-picker
v-model="value"
type="daterange"
placeholder="选择日期范围"
style="width: 220px">
@ -198,6 +218,7 @@
左侧区域可配置快捷选项，例如『最近一周』、『最近一个月』等
<el-date-picker
v-model="value7"
type="daterange"
placeholder="选择日期范围"
:picker-options="pickerOptions2"
@ -206,6 +227,7 @@
```html
<el-date-picker
v-model="value"
type="daterange"
placeholder="选择日期范围"
:picker-options="pickerOptions2"
@ -242,7 +264,8 @@
picker.$emit('pick', [start, end]);
}
}]
}
},
value: ''
};
}
};

61
examples/docs/datetime-picker.md
View File

@ -50,7 +50,23 @@
picker.$emit('pick', [start, end]);
}
}]
}
},
value1: '',
value2: '',
value3: new Date(),
value4: '',
value5: '',
value6: '',
value7: '',
value8: '',
value9: '',
value10: '',
value11: '',
value12: '',
value13: '',
value14: '',
value15: '',
value16: ''
};
}
};
@ -64,20 +80,24 @@
<div class="demo-box">
<el-date-picker
v-model="value1"
type="date"
placeholder="选择日期">
</el-date-picker>
<el-time-picker
v-model="value1"
placeholder="选择时间">
</el-date-picker>
</div>
```html
<el-date-picker
v-model="value"
type="date"
placeholder="选择日期">
</el-date-picker>
<el-time-picker
v-model="value"
placeholder="选择时间">
</el-time-picker>
```
@ -88,6 +108,7 @@
<div class="demo-box">
<el-date-picker
v-model="value2"
type="datetime"
placeholder="选择日期时间">
</el-date-picker>
@ -95,6 +116,7 @@
```html
<el-date-picker
v-model="value"
type="datetime"
placeholder="选择日期时间">
</el-date-picker>
@ -106,22 +128,26 @@
<div class="demo-box">
<el-date-picker
v-model="value3"
type="date"
:picker-options="pickerOptions1"
placeholder="选择日期">
</el-date-picker>
<el-time-picker
v-model="value3"
placeholder="选择时间">
</el-time-picker>
</div>
```html
<el-date-picker
v-model="value"
type="date"
placeholder="选择日期"
:picker-options="pickerOptions1">
</el-date-picker>
<el-time-picker
v-model="value"
placeholder="选择时间">
</el-time-picker>
@ -150,7 +176,8 @@
picker.$emit('pick', date);
}
}]
}
},
value: new Date()
};
}
};
@ -163,6 +190,7 @@
<div class="demo-box">
<el-date-picker
v-model="value4"
type="datetime"
placeholder="选择日期时间"
:picker-options="pickerOptions1">
@ -171,6 +199,7 @@
```html
<el-date-picker
v-model="value"
type="datetime"
placeholder="选择日期时间"
:picker-options="pickerOptions1"
@ -202,7 +231,8 @@
picker.$emit('pick', date);
}
}]
}
},
value: ''
};
}
};
@ -217,10 +247,12 @@
<div class="demo-box">
<el-date-picker
v-model="value5"
type="datetime"
placeholder="选择开始时间">
</el-date-picker>
<el-date-picker
v-model="value6"
type="datetime"
placeholder="选择结束时间">
</el-date-picker>
@ -228,10 +260,12 @@
```html
<el-date-picker
v-model="startTime"
type="datetime"
placeholder="选择开始时间">
</el-date-picker>
<el-date-picker
v-model="endTime"
type="datetime"
placeholder="选择结束时间">
</el-date-picker>
@ -243,6 +277,7 @@
<div class="demo-box">
<el-date-picker
v-model="value7"
type="datetimerange"
placeholder="选择时间范围"
style="width:340px">
@ -251,6 +286,7 @@
```html
<el-date-picker
v-model="value"
type="datetimerange"
placeholder="选择时间范围"
style="width:340px">
@ -263,6 +299,7 @@
<div class="demo-box">
<el-date-picker
v-model="value8"
type="datetimerange"
:picker-options="pickerOptions2"
placeholder="选择时间范围"
@ -272,6 +309,7 @@
```html
<el-date-picker
v-model="value"
type="datetimerange"
:picker-options="pickerOptions2"
placeholder="选择时间范围"
@ -282,6 +320,7 @@
module.exports = {
data() {
return {
value: '',
pickerOptions2: {
shortcuts: [{
text: '最近一周',
@ -321,11 +360,13 @@
<div class="demo-box">
<el-date-picker
v-model="value9"
type="daterange"
placeholder="选择日期范围"
style="width:220px">
</el-date-picker>
<el-time-picker
v-model="value10"
is-range
placeholder="选择时间范围">
</el-time-picker>
@ -333,11 +374,13 @@
```html
<el-date-picker
v-model="date"
type="daterange"
placeholder="选择日期范围"
style="width:220px">
</el-date-picker>
<el-time-picker
v-model="time"
is-range
placeholder="选择时间范围">
</el-time-picker>
@ -350,10 +393,12 @@
<div class="demo-box">
<el-date-picker
v-model="value11"
type="week"
placeholder="选择开始周">
</el-date-picker>
<el-date-picker
v-model="value12"
type="week"
placeholder="选择结束周">
</el-date-picker>
@ -361,10 +406,12 @@
```html
<el-date-picker
v-model="startWeek"
type="week"
placeholder="选择开始周">
</el-date-picker>
<el-date-picker
v-model="endWeek"
type="week"
placeholder="选择结束周">
</el-date-picker>
@ -374,10 +421,12 @@
<div class="demo-box">
<el-date-picker
v-model="value13"
type="month"
placeholder="选择开始月">
</el-date-picker>
<el-date-picker
v-model="value14"
type="month"
placeholder="选择结束月">
</el-date-picker>
@ -385,10 +434,12 @@
```html
<el-date-picker
v-model="startMonth"
type="month"
placeholder="选择开始月">
</el-date-picker>
<el-date-picker
v-model="endMonth"
type="month"
placeholder="选择结束月">
</el-date-picker>
@ -398,10 +449,12 @@
<div class="demo-box">
<el-date-picker
v-model="value15"
type="year"
placeholder="选择开始年">
</el-date-picker>
<el-date-picker
v-model="value16"
type="year"
placeholder="选择结束年">
</el-date-picker>
@ -409,10 +462,12 @@
```html
<el-date-picker
v-model="startYear"
type="year"
placeholder="选择开始年">
</el-date-picker>
<el-date-picker
v-model="endYear"
type="year"
placeholder="选择结束年">
</el-date-picker>

36
examples/docs/time-picker.md
View File

@ -8,9 +8,9 @@
## 固定时间点
提供几个固定的时间点供用户选择。
<div class="demo-box">
<el-time-select
v-model="value1"
:picker-options="{
start: '08:30',
step: '00:15',
@ -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="value2"
placeholder="任意时间点">
</el-time-picker>
</div>
```html
<el-time-picker
:value.sync="value"
v-model="value"
placeholder="任意时间点">
</el-time-picker>
```
@ -51,13 +52,14 @@
### 通用 - 手动输入规则
<div class="demo-box">
<el-time-picker
v-model="value3"
placeholder="任意时间点">
</el-time-picker>
</div>
```html
<el-time-picker
:value.sync="value"
v-model="value"
placeholder="任意时间点">
</el-time-picker>
```
@ -66,6 +68,7 @@
<div class="demo-box">
<el-time-picker
v-model="value4"
:picker-options="{
selectableRange: '18:30:00 - 20:30:00'
}"
@ -75,7 +78,7 @@
```html
<el-time-picker
:value.sync="value"
v-model="value"
:picker-options="{
selectableRange: '18:30:00 - 20:30:00'
}"
@ -92,7 +95,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 +104,7 @@
</el-time-select>
<el-time-select
placeholder="结束时间"
:value.sync="endTime"
v-model="endTime"
:picker-options="{
start: '08:30',
step: '00:15',
@ -114,7 +117,7 @@
```html
<el-time-select
placeholder="起始时间"
:value.sync="startTime"
v-model="startTime"
:picker-options="{
start: '08:30',
step: '00:15',
@ -123,7 +126,7 @@
</el-time-select>
<el-time-select
placeholder="结束时间"
:value.sync="endTime"
v-model="endTime"
:picker-options="{
start: '08:30',
step: '00:15',
@ -139,7 +142,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 +151,7 @@
</el-time-select>
<el-time-select
placeholder="结束时间"
:value.sync="endTime2"
v-model="endTime2"
:picker-options="{
start: '08:30',
step: '00:15',
@ -161,7 +164,7 @@
```html
<el-time-select
placeholder="起始时间"
:value.sync="startTime2"
v-model="startTime2"
:picker-options="{
start: '08:30',
step: '00:15',
@ -170,7 +173,7 @@
</el-time-select>
<el-time-select
placeholder="结束时间"
:value.sync="endTime2"
v-model="endTime2"
:picker-options="{
start: '08:30',
step: '00:15',
@ -186,6 +189,7 @@
<div class="demo-box">
<el-time-picker
is-range
v-model="value5"
placeholder="选择时间范围">
</el-time-picker>
</div>
@ -193,6 +197,7 @@
```html
<el-time-picker
is-range
v-model="value"
placeholder="选择时间范围">
</el-time-picker>
```
@ -201,6 +206,11 @@
export default {
data() {
return {
value1: '',
value2: '',
value3: '',
value4: '',
value5: '',
startTime: '',
endTime: '',
startTime2: '',

3
package.json
View File

@ -44,8 +44,9 @@
"purecss": "^0.6.0",
"q": "^1.4.1",
"uppercamelcase": "^1.1.0",
"vue": "^2.0.0-beta.7",
"vue-loader": "^9.3.2",
"vue": "^2.0.0-beta.8",
"vue-loader": "^9.2.3",
"vue-markdown-loader": "^0.4.0",
"vue-popup": "^0.2.1",
"vue-router": "^2.0.0-beta.2"

5
packages/date-picker/package.json
View File

@ -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-beta.7"
}
}

22
packages/date-picker/src/basic/date-table.vue
View File

@ -392,24 +392,30 @@
if (clickNormalCell && this.selectionMode === 'range') {
if (this.minDate && this.maxDate) {
this.minDate = new Date(newDate.getTime());
this.maxDate = null;
const minDate = new Date(newDate.getTime());
const maxDate = null;
this.$emit('pick', { minDate, maxDate }, false);
this.rangeState.selecting = true;
this.markRange(this.minDate);
} else if (this.minDate && !this.maxDate) {
if (newDate >= this.minDate) {
this.maxDate = new Date(newDate.getTime());
const maxDate = new Date(newDate.getTime());
this.rangeState.selecting = false;
this.$emit('pick', {
minDate: this.minDate,
maxDate: this.maxDate
maxDate
});
} else {
this.minDate = new Date(newDate.getTime());
const minDate = new Date(newDate.getTime());
this.$emit('pick', { minDate, maxDate: this.maxDate }, false);
}
} else if (!this.minDate) {
this.minDate = new Date(newDate.getTime());
const minDate = new Date(newDate.getTime());
this.$emit('pick', { minDate, maxDate: this.maxDate }, false);
this.rangeState.selecting = true;
this.markRange(this.minDate);
}
@ -420,11 +426,11 @@
} else if (selectionMode === 'week') {
var weekNumber = getWeekNumber(newDate);
this.value = newDate.getFullYear() + 'w' + weekNumber;
const value = newDate.getFullYear() + 'w' + weekNumber;
this.$emit('pick', {
year: newDate.getFullYear(),
week: weekNumber,
value: this.value,
value: value,
date: newDate
});
}

2
packages/date-picker/src/basic/month-table.vue
View File

@ -65,7 +65,7 @@
if (target.tagName !== 'A') return;
const column = target.parentNode.cellIndex;
const row = target.parentNode.parentNode.rowIndex;
const month = this.month = row * 4 + column;
const month = row * 4 + column;
this.$emit('pick', month);
}

123
packages/date-picker/src/basic/time-spinner.vue
View File

@ -1,43 +1,46 @@
<template>
<div
@mouseenter="emitSelectRange('hours')"
class="el-time-spinner__wrapper"
v-el:hour>
<ul class="el-time-spinner__list">
<li
@click="handleClick('hours', { value: hour, disabled: disabled }, true)"
v-for="(hour, disabled) in hoursList"
track-by="$index"
class="el-time-spinner__item"
:class="{ 'active': hour === hours, 'disabled': disabled }"
v-text="hour"></li>
</ul>
</div>
<div
@mouseenter="emitSelectRange('minutes')"
class="el-time-spinner__wrapper"
v-el:minute>
<ul class="el-time-spinner__list">
<li
@click="handleClick('minutes', minute, true)"
v-for="minute in 60"
class="el-time-spinner__item"
:class="{ 'active': minute === minutes }"
v-text="minute"></li>
</ul>
</div>
<div
@mouseenter="emitSelectRange('seconds')"
class="el-time-spinner__wrapper"
v-el:second>
<ul class="el-time-spinner__list">
<li
@click="handleClick('seconds', second, true)"
v-for="second in 60"
class="el-time-spinner__item"
:class="{ 'active': second === seconds }"
v-text="second"></li>
</ul>
<div class="el-time-spinner">
{{hours}}
<div
@mouseenter="emitSelectRange('hours')"
class="el-time-spinner__wrapper"
ref="hour">
<ul class="el-time-spinner__list">
<li
@click="handleClick('hours', { value: hour, disabled: disabled }, true)"
v-for="(disabled, hour) in hoursList"
track-by="hour"
class="el-time-spinner__item"
:class="{ 'active': hour === hours, 'disabled': disabled }"
v-text="hour"></li>
</ul>
</div>
<div
@mouseenter="emitSelectRange('minutes')"
class="el-time-spinner__wrapper"
ref="minute">
<ul class="el-time-spinner__list">
<li
@click="handleClick('minutes', key, true)"
v-for="(minute, key) in 60"
class="el-time-spinner__item"
:class="{ 'active': key === minutes }"
v-text="key"></li>
</ul>
</div>
<div
@mouseenter="emitSelectRange('seconds')"
class="el-time-spinner__wrapper"
ref="second">
<ul class="el-time-spinner__list">
<li
@click="handleClick('seconds', key, true)"
v-for="(second, key) in 60"
class="el-time-spinner__item"
:class="{ 'active': key === seconds }"
v-text="key"></li>
</ul>
</div>
</div>
</template>
@ -64,33 +67,32 @@
showSeconds: {
type: Boolean,
default: true
},
selectableRange: {}
}
},
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 +103,18 @@
}
},
data() {
return {
hoursPrivate: 0,
minutesPrivate: 0,
secondsPrivate: 0,
selectableRange: []
};
},
methods: {
focusEditor(type) {
const editor = this.$els[type + 'Editor'];
const editor = this.$refs[type + 'Editor'];
if (editor) {
editor.focus();
}
@ -114,7 +125,7 @@
return;
}
this[type] = value.value >= 0 ? value.value : value;
this[type + 'Private'] = value.value >= 0 ? value.value : value;
this.emitSelectRange(type);
},
@ -130,9 +141,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);
}
}
};

6
packages/date-picker/src/basic/year-table.vue
View File

@ -59,17 +59,17 @@
methods: {
nextTenYear() {
this.year += 10;
this.$emit('pick', this.year + 10, false);
},
prevTenYear() {
this.year -= 10;
this.$emit('pick', this.year - 10, false);
},
handleYearTableClick(event) {
const target = event.target;
if (target.tagName === 'A') {
const year = this.year = parseInt(target.textContent || target.innerText, 10);
const year = parseInt(target.textContent || target.innerText, 10);
this.$emit('pick', year);
}
}

265
packages/date-picker/src/panel/date-range.vue
View File

@ -1,161 +1,128 @@
<template>
<div
v-show="visible"
transition="md-fade-bottom"
class="el-picker-panel el-date-range-picker">
<div class="el-picker-panel__body-wrapper">
<slot name="sidebar" class="el-picker-panel__sidebar"></slot>
<div class="el-picker-panel__sidebar" v-if="shortcuts">
<button
class="el-picker-panel__shortcut"
v-for="shortcut in shortcuts"
@click="handleShortcutClick(shortcut)">{{shortcut.text}}</button>
</div>
<div class="el-picker-panel__body">
<div class="el-date-range-picker__time-header" v-if="showTime">
<span class="el-date-range-picker__editors-wrap">
<input
placeholder="开始日期"
class="el-date-range-picker__editor"
v-model="leftVisibleDate"
@input="handleDateInput($event, 'min')"
@change="handleDateChange($event, 'min')"/>
<span class="el-date-range-picker__time-picker-wrap">
<transition name="md-fade-bottom">
<div
v-show="visible"
class="el-picker-panel el-date-range-picker">
<div class="el-picker-panel__body-wrapper">
<slot name="sidebar" class="el-picker-panel__sidebar"></slot>
<div class="el-picker-panel__sidebar" v-if="shortcuts">
<button
class="el-picker-panel__shortcut"
v-for="shortcut in shortcuts"
@click="handleShortcutClick(shortcut)">{{shortcut.text}}</button>
</div>
<div class="el-picker-panel__body">
<div class="el-date-range-picker__time-header" v-if="showTime">
<span class="el-date-range-picker__editors-wrap">
<input
placeholder="开始时间"
placeholder="开始日期"
class="el-date-range-picker__editor"
v-model="leftVisibleTime"
@focus="leftTimePickerVisible = true"
@change="handleTimeChange($event, 'min')"/>
<time-picker
v-ref:lefttimepicker
:date="minDate"
@pick="handleLeftTimePick"
v-show="leftTimePickerVisible">
</time-picker>
v-model="leftVisibleDate"
@input="handleDateInput($event, 'min')"
@change="handleDateChange($event, 'min')"/>
<span class="el-date-range-picker__time-picker-wrap">
<input
placeholder="开始时间"
class="el-date-range-picker__editor"
v-model="leftVisibleTime"
@focus="leftTimePickerVisible = true"
@change="handleTimeChange($event, 'min')"/>
<time-picker
v-ref:lefttimepicker
:date="minDate"
@pick="handleLeftTimePick"
v-show="leftTimePickerVisible">
</time-picker>
</span>
</span>
</span>
<span class="el-icon-arrow-right"></span>
<span class="el-date-range-picker__editors-wrap is-right">
<input
placeholder="结束日期"
class="el-date-range-picker__editor"
v-model="rightVisibleDate"
:readonly="!minDate"
@input="handleDateInput($event, 'max')"
@change="handleDateChange($event, 'max')" />
<span class="el-date-range-picker__time-picker-wrap">
<span class="el-icon-arrow-right"></span>
<span class="el-date-range-picker__editors-wrap is-right">
<input
placeholder="结束时间"
placeholder="结束日期"
class="el-date-range-picker__editor"
v-model="rightVisibleTime"
@focus="minDate && (rightTimePickerVisible = true)"
v-model="rightVisibleDate"
:readonly="!minDate"
@change="handleTimeChange($event, 'max')" />
<time-picker
v-ref:righttimepicker
:date="maxDate"
@pick="handleRightTimePick"
v-show="rightTimePickerVisible"></time-picker>
@input="handleDateInput($event, 'max')"
@change="handleDateChange($event, 'max')" />
<span class="el-date-range-picker__time-picker-wrap">
<input
placeholder="结束时间"
class="el-date-range-picker__editor"
v-model="rightVisibleTime"
@focus="minDate && (rightTimePickerVisible = true)"
:readonly="!minDate"
@change="handleTimeChange($event, 'max')" />
<time-picker
v-ref:righttimepicker
:date="maxDate"
@pick="handleRightTimePick"
v-show="rightTimePickerVisible"></time-picker>
</span>
</span>
</span>
</div>
<div class="el-picker-panel__content el-date-range-picker__content is-left">
<div class="el-date-range-picker__header">
<button
@click="prevYear"
class="el-picker-panel__icon-btn el-icon-d-arrow-left"></button>
<button
@click="prevMonth"
class="el-picker-panel__icon-btn el-icon-arrow-left"></button>
<div>{{ leftLabel }}</div>
</div>
<date-table
selection-mode="range"
:date="date"
:year="leftYear"
:month="leftMonth"
:min-date="minDate"
:max-date="maxDate"
:range-state="rangeState"
@changerange="handleChangeRange"
@pick="handleRangePick">
</date-table>
</div>
<div class="el-picker-panel__content el-date-range-picker__content is-right">
<div class="el-date-range-picker__header">
<button
@click="nextYear"
class="el-picker-panel__icon-btn el-icon-d-arrow-right"></button>
<button
@click="nextMonth"
class="el-picker-panel__icon-btn el-icon-arrow-right"></button>
<div>{{ rightLabel }}</div>
<div class="el-picker-panel__content el-date-range-picker__content is-left">
<div class="el-date-range-picker__header">
<button
@click="prevYear"
class="el-picker-panel__icon-btn el-icon-d-arrow-left"></button>
<button
@click="prevMonth"
class="el-picker-panel__icon-btn el-icon-arrow-left"></button>
<div>{{ leftLabel }}</div>
</div>
<date-table
selection-mode="range"
:date="date"
:year="leftYear"
:month="leftMonth"
:min-date="minDate"
:max-date="maxDate"
:range-state="rangeState"
@changerange="handleChangeRange"
@pick="handleRangePick">
</date-table>
</div>
<div class="el-picker-panel__content el-date-range-picker__content is-right">
<div class="el-date-range-picker__header">
<button
@click="nextYear"
class="el-picker-panel__icon-btn el-icon-d-arrow-right"></button>
<button
@click="nextMonth"
class="el-picker-panel__icon-btn el-icon-arrow-right"></button>
<div>{{ rightLabel }}</div>
</div>
<date-table
selection-mode="range"
:date="rightDate"
:year="rightYear"
:month="rightMonth"
:min-date="minDate"
:max-date="maxDate"
:range-state="rangeState"
@changerange="handleChangeRange"
@pick="handleRangePick"></date-table>
</div>
<date-table
selection-mode="range"
:date="rightDate"
:year="rightYear"
:month="rightMonth"
:min-date="minDate"
:max-date="maxDate"
:range-state="rangeState"
@changerange="handleChangeRange"
@pick="handleRangePick"></date-table>
</div>
</div>
<div class="el-picker-panel__footer" v-if="showTime">
<a
href="JavaScript:"
class="el-picker-panel__link-btn"
@click="changeToToday">{{ $t('datepicker.today') }}</a>
<button
class="el-picker-panel__btn"
@click="handleConfirm"
:disabled="btnDisabled">确定</button>
</div>
</div>
<div class="el-picker-panel__footer" v-if="showTime">
<a
href="JavaScript:"
class="el-picker-panel__link-btn"
@click="changeToToday">{{ $t('datepicker.today') }}</a>
<button
class="el-picker-panel__btn"
@click="handleConfirm"
:disabled="btnDisabled">确定</button>
</div>
</div>
</transition>
</template>
<script type="text/ecmascript-6">
import { nextMonth, prevMonth, $t, formatDate, parseDate } from '../util';
export default {
props: {
date: {
default() {
return new Date();
}
},
minDate: {},
maxDate: {},
rangeState: {
default() {
return {
endDate: null,
selecting: false,
row: null,
column: null
};
}
},
showTime: {
type: Boolean,
default: false
},
shortcuts: {},
value: {},
visible: Boolean
},
computed: {
btnDisabled() {
return !(this.minDate && this.maxDate && !this.selecting);
@ -272,6 +239,19 @@
data() {
return {
date: new Date(),
minDate: '',
maxDate: '',
rangeState: {
endDate: null,
selecting: false,
row: null,
column: null
},
showTime: false,
shortcuts: '',
value: '',
visible: '',
leftTimePickerVisible: false,
rightTimePickerVisible: false
};
@ -286,9 +266,6 @@
});
},
maxDate() {
},
leftTimePickerVisible(val) {
if (val) this.$refs.lefttimepicker.ajustScrollTop();
},
@ -377,9 +354,11 @@
}
},
handleRangePick(val) {
handleRangePick(val, close = true) {
this.maxDate = val.maxDate;
this.minDate = val.minDate;
if (!close) return;
if (!this.showTime) {
this.$emit('pick', [this.minDate, this.maxDate]);
}

260
packages/date-picker/src/panel/date.vue
View File

@ -1,139 +1,113 @@
<template>
<div
v-show="visible"
transition="md-fade-bottom"
class="el-picker-panel el-date-picker">
<div class="el-picker-panel__body-wrapper">
<slot name="sidebar" class="el-picker-panel__sidebar"></slot>
<div class="el-picker-panel__sidebar" v-if="shortcuts">
<button
class="el-picker-panel__shortcut"
v-for="shortcut in shortcuts"
@click="handleShortcutClick(shortcut)">{{ shortcut.text }}</button>
</div>
<div class="el-picker-panel__body">
<div class="el-date-picker__time-header" v-if="showTime">
<input
placehoder="选择日期"
type="text"
v-model="visibleDate"
class="el-date-picker__editor">
<span class="el-date-picker__editor">
<input
@focus="timePickerVisible = true"
v-model="visibleTime"
placehoder="选择时间"
type="text"
class="el-date-picker__editor">
<time-picker
v-ref:timepicker
:date="date"
@pick="handleTimePick"
v-show="timePickerVisible">
</time-picker>
</span>
</div>
<div class="el-date-picker__header" v-show="currentView !== 'time'">
<button
@click="prevYear"
class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left">
</button>
<button
@click="prevMonth"
v-show="currentView === 'date'"
class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-arrow-left">
</button>
<span
@click="showYearPicker"
class="el-date-picker__header-label">{{ yearLabel }}</span>
<span
@click="showMonthPicker"
v-show="currentView === 'date'"
class="el-date-picker__header-label"
:class="{ active: currentView === 'month' }">{{ month + 1 }}月</span>
<button
@click="nextYear"
class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right">
</button>
<button
@click="nextMonth"
v-show="currentView === 'date'"
class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-arrow-right">
</button>
</div>
<div class="el-picker-panel__content">
<date-table
v-show="currentView === 'date'"
@pick="handleDatePick"
:year="year"
:month="month"
:date="date"
:value="value"
:week="week"
:selection-mode="selectionMode"
:disabled-date="disabledDate">
</date-table>
<year-table
v-ref:year-table
:year="year"
v-show="currentView === 'year'"
@pick="handleYearPick">
</year-table>
<month-table
:month="month"
v-show="currentView === 'month'"
@pick="handleMonthPick">
</month-table>
</div>
</div>
</div>
<transition name="md-fade-bottom">
<div
class="el-picker-panel__footer"
v-show="footerVisible && currentView === 'date'">
<a
href="JavaScript:"
class="el-picker-panel__link-btn"
@click="changeToToday">{{ $t('datepicker.today') }}</a>
<button
class="el-picker-panel__btn"
@click="confirm">{{ $t('datepicker.confirm') }}</button>
v-show="visible"
class="el-picker-panel el-date-picker">
<div class="el-picker-panel__body-wrapper">
<slot name="sidebar" class="el-picker-panel__sidebar"></slot>
<div class="el-picker-panel__sidebar" v-if="shortcuts">
<button
class="el-picker-panel__shortcut"
v-for="shortcut in shortcuts"
@click="handleShortcutClick(shortcut)">{{ shortcut.text }}</button>
</div>
<div class="el-picker-panel__body">
<div class="el-date-picker__time-header" v-if="showTime">
<input
placehoder="选择日期"
type="text"
v-model="visibleDate"
class="el-date-picker__editor">
<span style="position: relative" v-clickoutside="closeTimePicker">
<input
@focus="timePickerVisible = true"
v-model="visibleTime"
placehoder="选择时间"
type="text"
class="el-date-picker__editor">
<time-picker
ref="timepicker"
:date="date"
@pick="handleTimePick"
:visible="timePickerVisible">
</time-picker>
</span>
</div>
<div class="el-date-picker__header" v-show="currentView !== 'time'">
<button
@click="prevYear"
class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left">
</button>
<button
@click="prevMonth"
v-show="currentView === 'date'"
class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-arrow-left">
</button>
<span
@click="showYearPicker"
class="el-date-picker__header-label">{{ yearLabel }}</span>
<span
@click="showMonthPicker"
v-show="currentView === 'date'"
class="el-date-picker__header-label"
:class="{ active: currentView === 'month' }">{{ month + 1 }}月</span>
<button
@click="nextYear"
class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right">
</button>
<button
@click="nextMonth"
v-show="currentView === 'date'"
class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-arrow-right">
</button>
</div>
<div class="el-picker-panel__content">
<date-table
v-show="currentView === 'date'"
@pick="handleDatePick"
:year="year"
:month="month"
:date="date"
:value="value"
:week="week"
:selection-mode="selectionMode"
:disabled-date="disabledDate">
</date-table>
<year-table
ref="yearTable"
:year="year"
v-show="currentView === 'year'"
@pick="handleYearPick">
</year-table>
<month-table
:month="month"
v-show="currentView === 'month'"
@pick="handleMonthPick">
</month-table>
</div>
</div>
</div>
<div
class="el-picker-panel__footer"
v-show="footerVisible && currentView === 'date'">
<a
href="JavaScript:"
class="el-picker-panel__link-btn"
@click="changeToToday">{{ $t('datepicker.today') }}</a>
<button
class="el-picker-panel__btn"
@click="confirm">{{ $t('datepicker.confirm') }}</button>
</div>
</div>
</div>
</transition>
</template>
<script type="text/ecmascript-6">
import { $t, formatDate, parseDate } from '../util';
export default {
props: {
currentView: {
default: 'date'
},
date: {
default() {
return new Date();
}
},
disabledDate: {},
value: {},
showTime: Boolean,
selectionMode: {
type: String,
default: 'day'
},
shortcuts: {},
visible: Boolean
},
watch: {
value(newVal) {
if (this.selectionMode === 'day' && newVal instanceof Date) {
@ -144,7 +118,7 @@
},
timePickerVisible(val) {
if (val) this.$refs.timepicker.ajustScrollTop();
if (val) this.$nextTick(() => this.$refs.timepicker.ajustScrollTop());
},
selectionMode(newVal) {
@ -163,11 +137,8 @@
}
},
ready() {
if (this.date && !this.year) {
this.year = this.date.getFullYear();
this.month = this.date.getMonth();
}
directives: {
Clickoutside: require('main/utils/clickoutside').default
},
methods: {
@ -276,8 +247,10 @@
this.resetDate();
},
handleYearPick(year) {
handleYearPick(year, close = true) {
this.year = year;
if (!close) return;
this.date.setFullYear(year);
if (this.selectionMode === 'year') {
this.$emit('pick', year);
@ -311,6 +284,10 @@
this.year = this.date.getFullYear();
this.month = this.date.getMonth();
}
},
closeTimePicker() {
this.timePickerVisible = false;
}
},
@ -321,14 +298,27 @@
DateTable: require('../basic/date-table')
},
compiled() {
mounted() {
if (this.selectionMode === 'month') {
this.currentView = 'month';
}
if (this.date && !this.year) {
this.year = this.date.getFullYear();
this.month = this.date.getMonth();
}
},
data() {
return {
date: new Date(),
value: '',
showTime: false,
selectionMode: 'day',
shortcuts: '',
visible: false,
currentView: 'date',
disabledDate: '',
year: null,
month: null,
week: null,

241
packages/date-picker/src/panel/time-range.vue
View File

@ -1,48 +1,49 @@
<template>
<div
v-show="visible"
transition="md-fade-bottom"
class="el-time-range-picker el-picker-panel">
<div class="el-time-range-picker__content">
<div class="el-time-range-picker__cell">
<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
:show-seconds="showSeconds"
@change="handleMinChange"
@select-range="setMinSelectionRange"
:hours="minHours"
:minutes="minMinutes"
:seconds="minSeconds">
</time-spinner>
<transition name="md-fade-bottom">
<div
v-show="visible"
class="el-time-range-picker el-picker-panel">
<div class="el-time-range-picker__content">
<div class="el-time-range-picker__cell">
<div class="el-time-range-picker__header">开始时间</div>
<div class="el-time-range-picker__body el-time-panel__content">
<time-spinner
ref="minSpinner"
:show-seconds="showSeconds"
@change="handleMinChange"
@select-range="setMinSelectionRange"
:hours="minHours"
:minutes="minMinutes"
:seconds="minSeconds">
</time-spinner>
</div>
</div>
<div class="el-time-range-picker__cell">
<div class="el-time-range-picker__header">结束时间</div>
<div class="el-time-range-picker__body el-time-panel__content">
<time-spinner
ref="maxSpinner"
:show-seconds="showSeconds"
@change="handleMaxChange"
@select-range="setMaxSelectionRange"
:hours="maxHours"
:minutes="maxMinutes"
:seconds="maxSeconds">
</time-spinner>
</div>
</div>
</div>
<div class="el-time-range-picker__cell">
<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
:show-seconds="showSeconds"
@change="handleMaxChange"
@select-range="setMaxSelectionRange"
:hours="maxHours"
:minutes="maxMinutes"
:seconds="maxSeconds">
</time-spinner>
</div>
<div class="el-time-panel__footer">
<button
class="el-time-panel__btn cancel"
@click="handleCancel()">取消</button>
<button
class="el-time-panel__btn confirm"
@click="handleConfirm()"
:disabled="btnDisabled">确定</button>
</div>
</div>
<div class="el-time-panel__footer">
<button
class="el-time-panel__btn cancel"
@click="handleCancel()">取消</button>
<button
class="el-time-panel__btn confirm"
@click="handleConfirm()"
:disabled="btnDisabled">确定</button>
</div>
</div>
</transition>
</template>
<script type="text/ecmascript-6">
@ -62,127 +63,36 @@
TimeSpinner: require('../basic/time-spinner')
},
props: {
minTime: {
default() {
return new Date();
}
},
maxTime: {
default() {
const date = new Date();
date.setHours(date.getHours() + 1);
return date;
}
},
format: {
default: 'HH:mm:ss'
},
visible: Boolean
},
computed: {
showSeconds() {
return (this.format || '').indexOf('ss') !== -1;
},
minHours: {
get() {
if (this.minTime) {
return this.minTime.getHours();
}
return 0;
},
set(hours) {
if (this.minTime) {
this.minTime.setHours(hours);
}
}
},
minMinutes: {
get() {
if (this.minTime) {
return this.minTime.getMinutes();
}
return 0;
},
set(minutes) {
if (this.minTime) {
this.minTime.setMinutes(minutes);
}
}
},
minSeconds: {
get() {
if (this.minTime) {
return this.minTime.getSeconds();
}
return 0;
},
set(seconds) {
if (this.minTime) {
this.minTime.setSeconds(seconds);
}
}
},
maxHours: {
get() {
if (this.maxTime) {
return this.maxTime.getHours();
}
return 0;
},
set(hours) {
if (this.maxTime) {
this.maxTime.setHours(hours);
}
}
},
maxMinutes: {
get() {
if (this.maxTime) {
return this.maxTime.getMinutes();
}
return 0;
},
set(minutes) {
if (this.maxTime) {
this.maxTime.setMinutes(minutes);
}
}
},
maxSeconds: {
get() {
if (this.maxTime) {
return this.maxTime.getSeconds();
}
return 0;
},
set(seconds) {
if (this.maxTime) {
this.maxTime.setSeconds(seconds);
}
}
}
},
data() {
const minTime = new Date();
const date = new Date();
date.setHours(date.getHours() + 1);
const maxTime = date;
return {
btnDisabled: isDisabled(this.minTime, this.maxTime)
minTime: minTime,
maxTime: maxTime,
btnDisabled: isDisabled(minTime, maxTime),
maxHours: minTime.getHours(),
maxMinutes: minTime.getMinutes(),
maxSeconds: minTime.getSeconds(),
minHours: maxTime.getHours(),
minMinutes: maxTime.getMinutes(),
minSeconds: maxTime.getSeconds(),
format: 'HH:mm:ss',
visible: false
};
},
methods: {
handleCancel() {
this.$emit('pick', null);
this.$emit('pick');
},
handleChange() {
@ -192,16 +102,35 @@
},
handleMaxChange(date) {
if (date.hours !== undefined) this.maxHours = date.hours;
if (date.minutes !== undefined) this.maxMinutes = date.minutes;
if (date.seconds !== undefined) this.maxSeconds = date.seconds;
if (date.hours !== undefined) {
this.maxTime.setHours(date.hours);
this.maxHours = this.maxTime.getHours();
}
if (date.minutes !== undefined) {
this.maxTime.setMinutes(date.minutes);
this.maxMinutes = this.maxTime.getMinutes();
}
if (date.seconds !== undefined) {
this.maxTime.setSeconds(date.seconds);
this.maxSeconds = this.maxTime.getSeconds();
}
this.handleChange();
},
handleMinChange(date) {
if (date.hours !== undefined) this.minHours = date.hours;
if (date.minutes !== undefined) this.minMinutes = date.minutes;
if (date.seconds !== undefined) this.minSeconds = date.seconds;
if (date.hours !== undefined) {
this.minTime.setHours(date.hours);
this.minHours = this.minTime.getHours();
}
if (date.minutes !== undefined) {
this.minTime.setMinutes(date.minutes);
this.minMinutes = this.minTime.getMinutes();
}
if (date.seconds !== undefined) {
this.minTime.setSeconds(date.seconds);
this.minSeconds = this.minTime.getSeconds();
}
this.handleChange();
},
@ -228,8 +157,8 @@
this.$refs.maxSpinner.ajustScrollTop();
},
focusEditor(...args) {
return this.$refs.minSpinner.focusEditor(...args);
focusEditor(val) {
return this.$refs.minSpinner.focusEditor(val);
}
},

57
packages/date-picker/src/panel/time-select.vue
View File

@ -1,18 +1,19 @@
<template>
<div
v-show="visible"
class="el-picker-panel time-select"
transition="md-fade-bottom">
<div class="el-picker-panel__content">
<div class="time-select-item"
v-for="item in items"
:class="{ selected: value === item.value, disabled: item.disabled }"
:disabled="item.disabled"
@click="handleClick(item)">
{{ item.value }}
<transition name="md-fade-bottom">
<div
v-show="visible"
class="el-picker-panel time-select">
<div class="el-picker-panel__content">
<div class="time-select-item"
v-for="item in items"
:class="{ selected: value === item.value, disabled: item.disabled }"
:disabled="item.disabled"
@click="handleClick(item)">
{{ item.value }}
</div>
</div>
</div>
</div>
</transition>
</template>
<script type="text/ecmascript-6">
@ -67,26 +68,6 @@
};
export default {
props: {
start: {
default: '09:00'
},
end: {
default: '18:00'
},
step: {
default: '00:30'
},
value: {},
visible: Boolean,
minTime: {}
},
watch: {
minTime(val) {
if (this.value && val && compareTime(this.value, val) === -1) {
@ -99,11 +80,21 @@
handleClick(item) {
if (!item.disabled) {
this.$emit('pick', item.value);
this.value = item.value;
}
}
},
data() {
return {
start: '09:00',
end: '18:00',
step: '00:30',
value: '',
visible: false,
minTime: ''
};
},
computed: {
items() {
const start = this.start;

170
packages/date-picker/src/panel/time.vue
View File

@ -1,32 +1,34 @@
<template>
<div
v-show="visible"
transition="md-fade-bottom"
class="el-time-panel">
<div class="el-time-panel__content">
<time-spinner
v-ref:spinner
@change="handleChange"
:show-seconds="showSeconds"
:hours="hours"
:minutes="minutes"
@select-range="setSelectionRange"
:seconds="seconds">
</time-spinner>
<transition name="md-fade-bottom">
<div
v-show="visible"
class="el-time-panel">
<div class="el-time-panel__content">
<time-spinner
ref="spinner"
@change="handleChange"
:show-seconds="showSeconds"
@select-range="setSelectionRange"
:hours="hours"
:minutes="minutes"
:seconds="seconds">
</time-spinner>
</div>
<div class="el-time-panel__footer">
<button
class="el-time-panel__btn cancel"
@click="handleCancel()">取消</button>
<button
class="el-time-panel__btn confirm"
@click="handleConfirm()">确定</button>
</div>
</div>
<div class="el-time-panel__footer">
<button
class="el-time-panel__btn
cancel" @click="handleCancel()">取消</button>
<button
class="el-time-panel__btn confirm"
@click="handleConfirm()">确定</button>
</div>
</div>
</transition>
</template>
<script type="text/ecmascript-6">
import { limitRange } from '../util';
import Vue from 'vue';
export default {
components: {
@ -35,77 +37,46 @@
props: {
date: {
default() {
return new Date();
}
default: new Date()
},
format: {
default: 'HH:mm:ss'
},
value: {},
visible: Boolean,
selectableRange: {}
visible: false
},
watch: {
value(newVal) {
let date;
if (newVal instanceof Date) {
this.date = newVal;
date = limitRange(newVal, this.selectableRange);
} else if (!newVal) {
this.date = new Date();
date = new Date();
}
this.hours = date.getHours();
this.minutes = date.getMinutes();
this.seconds = date.getSeconds();
this.handleConfirm(true);
},
selectableRange(val) {
this.$refs.spinner.selectableRange = val;
}
},
data() {
return {
format: 'HH:mm:ss',
value: '',
hours: 0,
minutes: 0,
seconds: 0,
selectableRange: []
};
},
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 +86,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);
},
@ -126,20 +107,13 @@
},
handleConfirm(visible = false, first) {
const spinner = this.$refs.spinner;
let date = new Date();
const date = new Date(limitRange(this.date, this.selectableRange));
const { hours, minutes, seconds } = spinner;
date.setHours(hours);
date.setMinutes(minutes);
date.setSeconds(seconds);
this.date = date = limitRange(date, this.selectableRange);
this.$emit('pick', date, visible, first);
},
focusEditor(...args) {
return this.$refs.spinner.focusEditor(...args);
focusEditor(val) {
return this.$refs.spinner.focusEditor(val);
},
ajustScrollTop() {
@ -147,8 +121,16 @@
}
},
ready() {
this.$refs.spinner.selectableRange = this.selectableRange;
created() {
!this.date && Vue.set(this, 'date', new Date());
!this.visible && Vue.set(this, 'visible', false);
this.hours = this.date.getHours();
this.minutes = this.date.getMinutes();
this.seconds = this.date.getSeconds();
},
mounted() {
this.$nextTick(() => this.handleConfirm(true, true));
}
};

43
packages/date-picker/src/picker.vue
View File

@ -1,31 +1,29 @@
<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,

2
packages/date-picker/src/util/index.js
View File

@ -143,7 +143,7 @@ export const getRangeHours = function(ranges) {
};
export const limitRange = function(date, ranges) {
if (!ranges) return date;
if (!ranges || !ranges.length) return date;
const len = ranges.length;
const format = 'HH:mm:ss';

12
packages/pagination/src/pagination.js
View File

@ -49,7 +49,7 @@ export default {
const TEMPLATE_MAP = {
prev: <prev></prev>,
jumper: <jumper></jumper>,
pager: <pager prop-currentPage={ this.internalCurrentPage } prop-pageCount={ this.pageCount } on-currentChange={ this.handleCurrentChange }></pager>,
pager: <pager currentPage={ this.internalCurrentPage } pageCount={ this.pageCount } on-currentChange={ this.handleCurrentChange }></pager>,
next: <next></next>,
sizes: <sizes></sizes>,
slot: <slot></slot>,
@ -118,15 +118,15 @@ export default {
return (
<span class="el-pagination__sizes">
<el-select
prop-size="small"
prop-value={ this.$parent.internalPageSize }
size="small"
value={ this.$parent.internalPageSize }
on-change={ this.handleChange }
prop-width={ 110 }>
width={ 110 }>
{
this.$parent.pageSizes.map(item =>
<el-option
prop-value={ item }
prop-label={ item + ' 条/页' }>
value={ item }
label={ item + ' 条/页' }>
</el-option>
)
}

23
packages/select/src/select.vue
View File

@ -46,16 +46,17 @@
:style="{ 'width': inputWidth + 'px' }"
v-element-clickoutside="handleClose">
</el-input>
<el-select-menu
ref="popper"
v-show="visible && nodataText !== false"
transition="fade"
:style="{ 'width': dropdownWidth ? dropdownWidth + 'px' : '100%' }">
<ul class="el-select-dropdown__list" v-show="options.length > 0 && filteredOptionsCount > 0">
<slot></slot>
</ul>
<p class="el-select-dropdown__nodata" v-if="nodataText">{{ nodataText }}</p>
</el-select-menu>
<transition name="md-fade-bottom">
<el-select-menu
ref="popper"
v-show="visible && nodataText !== false"
:style="{ 'width': dropdownWidth ? dropdownWidth + 'px' : '100%' }">
<ul class="el-select-dropdown__list" v-show="options.length > 0 && filteredOptionsCount > 0">
<slot></slot>
</ul>
<p class="el-select-dropdown__nodata" v-if="nodataText">{{ nodataText }}</p>
</el-select-menu>
</transition>
</div>
</template>
@ -195,7 +196,7 @@
this.valueChangeBySelected = false;
return;
}
if (this.multiple && Object.prototype.toString.call(val) === '[object Array]') {
if (this.multiple && Array.isArray(val)) {
this.$nextTick(() => {
this.resetInputHeight();
});

9
packages/theme-default/src/spinner.css
View File

@ -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;
@ -10,13 +15,13 @@
animation: rotate 2s linear infinite;
width: 50px;
height: 50px;
& .path {
stroke: #ececec;
stroke-linecap: round;
animation: dash 1.5s ease-in-out infinite;
}
}
}
@keyframes rotate {