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

update time/date picker

pull/2/head
qingwei.li 2016-08-11 12:20:29 +08:00
parent 096b3559c6
commit 6ad98f7ec1
17 changed files with 552 additions and 565 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>

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

@ -8,9 +8,9 @@
## 固定时间点
提供几个固定的时间点供用户选择。
{{value}}
<div class="demo-box">
<el-time-select
v-model="value1"
:picker-options="{
start: '08:30',
step: '00:15',
@ -37,7 +37,7 @@
<div class="demo-box">
<el-time-picker
v-model="value"
v-model="value2"
placeholder="任意时间点">
</el-time-picker>
</div>
@ -52,6 +52,7 @@
### 通用 - 手动输入规则
<div class="demo-box">
<el-time-picker
v-model="value3"
placeholder="任意时间点">
</el-time-picker>
</div>
@ -67,6 +68,7 @@
<div class="demo-box">
<el-time-picker
v-model="value4"
:picker-options="{
selectableRange: '18:30:00 - 20:30:00'
}"
@ -187,6 +189,7 @@
<div class="demo-box">
<el-time-picker
is-range
v-model="value5"
placeholder="选择时间范围">
</el-time-picker>
</div>
@ -194,6 +197,7 @@
```html
<el-time-picker
is-range
v-model="value"
placeholder="选择时间范围">
</el-time-picker>
```
@ -202,7 +206,11 @@
export default {
data() {
return {
value: '',
value1: '',
value2: '',
value3: '',
value4: '',
value5: '',
startTime: '',
endTime: '',
startTime2: '',

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

@ -15,6 +15,6 @@
"wind-dom": "0.0.3"
},
"devDependencies": {
"vue": "^2.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);
}

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

@ -9,7 +9,7 @@
<li
@click="handleClick('hours', { value: hour, disabled: disabled }, true)"
v-for="(disabled, hour) in hoursList"
track-by="$index"
track-by="hour"
class="el-time-spinner__item"
:class="{ 'active': hour === hours, 'disabled': disabled }"
v-text="hour"></li>
@ -67,9 +67,7 @@
showSeconds: {
type: Boolean,
default: true
},
selectableRange: {}
}
},
watch: {
@ -109,7 +107,8 @@
return {
hoursPrivate: 0,
minutesPrivate: 0,
secondsPrivate: 0
secondsPrivate: 0,
selectableRange: []
};
},

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
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
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>
<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
ref="minSpinner"
: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
ref="maxSpinner"
: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);
}
},

56
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) {
@ -103,6 +84,17 @@
}
},
data() {
return {
start: '09:00',
end: '18:00',
step: '00:30',
value: '',
visible: false,
minTime: ''
};
},
computed: {
items() {
const start = this.start;

95
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
ref="spinner"
@change="handleChange"
:show-seconds="showSeconds"
@select-range="setSelectionRange"
:hours="hours"
:minutes="minutes"
: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: {
@ -34,33 +36,41 @@
},
props: {
format: {
default: 'HH:mm:ss'
date: {
default: new Date()
},
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 {
date: new Date(),
format: 'HH:mm:ss',
value: '',
hours: 0,
minutes: 0,
seconds: 0
seconds: 0,
selectableRange: []
};
},
@ -97,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() {
@ -119,13 +122,15 @@
},
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.$refs.spinner.selectableRange = this.selectableRange;
this.$nextTick(() => this.handleConfirm(true, true));
}
};

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();
});

18
src/index.js
View File

@ -1,6 +1,6 @@
// import Group from '../packages/group/index.js';
// import SelectDropdown from '../packages/select-dropdown/index.js';
// import Pagination from '../packages/pagination/index.js';
import Pagination from '../packages/pagination/index.js';
// import Dialog from '../packages/dialog/index.js';
// import Cascader from '../packages/cascader/index.js';
// import Autocomplete from '../packages/autocomplete/index.js';
@ -20,7 +20,7 @@
// import Switch from '../packages/switch/index.js';
import Select from '../packages/select/index.js';
import Option from '../packages/option/index.js';
// import OptionGroup from '../packages/option-group/index.js';
import OptionGroup from '../packages/option-group/index.js';
// import Button from '../packages/button/index.js';
// import ButtonGroup from '../packages/button-group/index.js';
// import Table from '../packages/table/index.js';
@ -37,7 +37,7 @@ import TimePicker from '../packages/time-picker/index.js';
// import FormItem from '../packages/form-item/index.js';
// import Tabs from '../packages/tabs/index.js';
// import TabPane from '../packages/tab-pane/index.js';
// import Tag from '../packages/tag/index.js';
import Tag from '../packages/tag/index.js';
// import Tree from '../packages/tree/index.js';
// import Alert from '../packages/alert/index.js';
// import Notification from '../packages/notification/index.js';
@ -55,7 +55,7 @@ const install = function(Vue) {
// Vue.component(Group.name, Group);
// Vue.component(SelectDropdown.name, SelectDropdown);
// Vue.component(Pagination.name, Pagination);
Vue.component(Pagination.name, Pagination);
// Vue.component(Dialog.name, Dialog);
// Vue.component(Cascader.name, Cascader);
// Vue.component(Autocomplete.name, Autocomplete);
@ -75,7 +75,7 @@ const install = function(Vue) {
// Vue.component(Switch.name, Switch);
Vue.component(Select.name, Select);
Vue.component(Option.name, Option);
// Vue.component(OptionGroup.name, OptionGroup);
Vue.component(OptionGroup.name, OptionGroup);
// Vue.component(Button.name, Button);
// Vue.component(ButtonGroup.name, ButtonGroup);
// Vue.component(Table.name, Table);
@ -91,7 +91,7 @@ const install = function(Vue) {
// Vue.component(FormItem.name, FormItem);
// Vue.component(Tabs.name, Tabs);
// Vue.component(TabPane.name, TabPane);
// Vue.component(Tag.name, Tag);
Vue.component(Tag.name, Tag);
// Vue.component(Tree.name, Tree);
// Vue.component(Alert.name, Alert);
// Vue.component(Slider.name, Slider);
@ -120,7 +120,7 @@ module.exports = {
install,
// Group,
// SelectDropdown,
// Pagination,
Pagination,
// Dialog,
// Cascader,
// Autocomplete,
@ -140,7 +140,7 @@ module.exports = {
// Switch,
Select,
Option,
// OptionGroup,
OptionGroup,
// Button,
// ButtonGroup,
// Table,
@ -157,7 +157,7 @@ module.exports = {
// FormItem,
// Tabs,
// TabPane,
// Tag,
Tag
// Tree,
// Alert,
// Notification,