Skip to content

E
Element
Commit cf16180a authored by FuryBean's avatar FuryBean Committed by GitHub
Browse files
Options

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

Feat/next datepicker
parents af71d7b7 0c8159cd
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 671 additions and 686 deletions
examples/docs/date-picker.md
View file @ cf16180a
......@@ -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: ''
};
}
};
......
examples/docs/datetime-picker.md
View file @ cf16180a
......@@ -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>
......
examples/docs/time-picker.md
View file @ cf16180a
......@@ -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: '',
......
packages/date-picker/package.json
View file @ cf16180a
......@@ -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"
}
}
packages/date-picker/src/basic/date-table.vue
View file @ cf16180a
......@@ -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
});
}
......
packages/date-picker/src/basic/month-table.vue
View file @ cf16180a
......@@ -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);
}
......
packages/date-picker/src/basic/time-spinner.vue
View file @ cf16180a
<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);
}
}
};
......
packages/date-picker/src/basic/year-table.vue
View file @ cf16180a
......@@ -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);
}
}
......
packages/date-picker/src/panel/date.vue
View file @ cf16180a
<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">
<transition name="md-fade-bottom">
<div
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
@focus="timePickerVisible = true"
v-model="visibleTime"
placehoder="选择时间"
placehoder="选择日期"
type="text"
v-model="visibleDate"
class="el-date-picker__editor">
<time-picker
v-ref:timepicker
<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"
@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>
: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>
<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
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,
......
packages/date-picker/src/panel/time-range.vue
View file @ cf16180a
<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>
<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 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-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);
}
},
......
packages/date-picker/src/panel/time-select.vue
View file @ cf16180a
<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;
......
packages/date-picker/src/panel/time.vue
View file @ cf16180a
<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();
}
},
format: {
default: 'HH:mm:ss'
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 {
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 { hours, minutes, seconds } = spinner;
date.setHours(hours);
date.setMinutes(minutes);
date.setSeconds(seconds);
const date = new Date(limitRange(this.date, this.selectableRange));
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));
}
};
......
packages/date-picker/src/picker.vue
View file @ cf16180a
<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/date-picker/src/util/index.js
View file @ cf16180a
......@@ -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';
......
packages/pagination/src/pagination.js
View file @ cf16180a
......@@ -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>
)
}
......
packages/select/src/select.vue
View file @ cf16180a
......@@ -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();
});
......
packages/theme-default/src/spinner.css
View file @ cf16180a
......@@ -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 {
......
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