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
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 @@ ...@@ -50,7 +50,14 @@
picker.$emit('pick', [start, end]); picker.$emit('pick', [start, end]);
} }
}] }]
} },
value1: '',
value2: '',
value3: '',
value4: '',
value5: '',
value6: '',
value7: ''
}; };
} }
}; };
...@@ -63,12 +70,14 @@ ...@@ -63,12 +70,14 @@
以『日』为基本单位 以『日』为基本单位
<el-date-picker <el-date-picker
v-model="value1"
type="date" type="date"
placeholder="选择日期"> placeholder="选择日期">
</el-date-picker> </el-date-picker>
```html ```html
<el-date-picker <el-date-picker
v-model="value"
type="date" type="date"
placeholder="选择日期"> placeholder="选择日期">
</el-date-picker> </el-date-picker>
...@@ -79,6 +88,7 @@ ...@@ -79,6 +88,7 @@
以『周』为基本单位 以『周』为基本单位
<el-date-picker <el-date-picker
v-model="value2"
type="week" type="week"
format="yyyy 第 WW 周" format="yyyy 第 WW 周"
placeholder="选择周"> placeholder="选择周">
...@@ -86,6 +96,7 @@ ...@@ -86,6 +96,7 @@
```html ```html
<el-date-picker <el-date-picker
v-model="value"
type="week" type="week"
format="yyyy 第 WW 周" format="yyyy 第 WW 周"
placeholder="选择周"> placeholder="选择周">
...@@ -97,12 +108,14 @@ ...@@ -97,12 +108,14 @@
以『月』为基本单位 以『月』为基本单位
<el-date-picker <el-date-picker
v-model="value3"
type="month" type="month"
placeholder="选择月"> placeholder="选择月">
</el-date-picker> </el-date-picker>
```html ```html
<el-date-picker <el-date-picker
v-model="value"
type="month" type="month"
placeholder="选择月"> placeholder="选择月">
</el-date-picker> </el-date-picker>
...@@ -113,12 +126,14 @@ ...@@ -113,12 +126,14 @@
以『年』为基本单位 以『年』为基本单位
<el-date-picker <el-date-picker
v-model="value4"
type="year" type="year"
placeholder="选择日期"> placeholder="选择日期">
</el-date-picker> </el-date-picker>
```html ```html
<el-date-picker <el-date-picker
v-model="value"
type="year" type="year"
placeholder="选择日期"> placeholder="选择日期">
</el-date-picker> </el-date-picker>
...@@ -129,6 +144,7 @@ ...@@ -129,6 +144,7 @@
左侧区域可配置快捷选项，例如『今天』、『昨天』等 左侧区域可配置快捷选项，例如『今天』、『昨天』等
<el-date-picker <el-date-picker
v-model="value5"
type="date" type="date"
placeholder="选择日期" placeholder="选择日期"
:picker-options="pickerOptions1"> :picker-options="pickerOptions1">
...@@ -136,6 +152,7 @@ ...@@ -136,6 +152,7 @@
```html ```html
<el-date-picker <el-date-picker
v-model="value"
type="date" type="date"
placeholder="选择日期" placeholder="选择日期"
:picker-options="pickerOptions1"> :picker-options="pickerOptions1">
...@@ -166,7 +183,8 @@ ...@@ -166,7 +183,8 @@
picker.$emit('pick', date); picker.$emit('pick', date);
} }
}] }]
} },
value: ''
}; };
} }
}; };
...@@ -180,6 +198,7 @@ ...@@ -180,6 +198,7 @@
在一个选择器中选择 在一个选择器中选择
<el-date-picker <el-date-picker
v-model="value6"
type="daterange" type="daterange"
placeholder="选择日期范围" placeholder="选择日期范围"
style="width: 220px"> style="width: 220px">
...@@ -187,6 +206,7 @@ ...@@ -187,6 +206,7 @@
```html ```html
<el-date-picker <el-date-picker
v-model="value"
type="daterange" type="daterange"
placeholder="选择日期范围" placeholder="选择日期范围"
style="width: 220px"> style="width: 220px">
...@@ -198,6 +218,7 @@ ...@@ -198,6 +218,7 @@
左侧区域可配置快捷选项，例如『最近一周』、『最近一个月』等 左侧区域可配置快捷选项，例如『最近一周』、『最近一个月』等
<el-date-picker <el-date-picker
v-model="value7"
type="daterange" type="daterange"
placeholder="选择日期范围" placeholder="选择日期范围"
:picker-options="pickerOptions2" :picker-options="pickerOptions2"
...@@ -206,6 +227,7 @@ ...@@ -206,6 +227,7 @@
```html ```html
<el-date-picker <el-date-picker
v-model="value"
type="daterange" type="daterange"
placeholder="选择日期范围" placeholder="选择日期范围"
:picker-options="pickerOptions2" :picker-options="pickerOptions2"
...@@ -242,7 +264,8 @@ ...@@ -242,7 +264,8 @@
picker.$emit('pick', [start, end]); picker.$emit('pick', [start, end]);
} }
}] }]
} },
value: ''
}; };
} }
}; };
......
examples/docs/datetime-picker.md
View file @ cf16180a
...@@ -50,7 +50,23 @@ ...@@ -50,7 +50,23 @@
picker.$emit('pick', [start, end]); 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 @@ ...@@ -64,20 +80,24 @@
<div class="demo-box"> <div class="demo-box">
<el-date-picker <el-date-picker
v-model="value1"
type="date" type="date"
placeholder="选择日期"> placeholder="选择日期">
</el-date-picker> </el-date-picker>
<el-time-picker <el-time-picker
v-model="value1"
placeholder="选择时间"> placeholder="选择时间">
</el-date-picker> </el-date-picker>
</div> </div>
```html ```html
<el-date-picker <el-date-picker
v-model="value"
type="date" type="date"
placeholder="选择日期"> placeholder="选择日期">
</el-date-picker> </el-date-picker>
<el-time-picker <el-time-picker
v-model="value"
placeholder="选择时间"> placeholder="选择时间">
</el-time-picker> </el-time-picker>
``` ```
...@@ -88,6 +108,7 @@ ...@@ -88,6 +108,7 @@
<div class="demo-box"> <div class="demo-box">
<el-date-picker <el-date-picker
v-model="value2"
type="datetime" type="datetime"
placeholder="选择日期时间"> placeholder="选择日期时间">
</el-date-picker> </el-date-picker>
...@@ -95,6 +116,7 @@ ...@@ -95,6 +116,7 @@
```html ```html
<el-date-picker <el-date-picker
v-model="value"
type="datetime" type="datetime"
placeholder="选择日期时间"> placeholder="选择日期时间">
</el-date-picker> </el-date-picker>
...@@ -106,22 +128,26 @@ ...@@ -106,22 +128,26 @@
<div class="demo-box"> <div class="demo-box">
<el-date-picker <el-date-picker
v-model="value3"
type="date" type="date"
:picker-options="pickerOptions1" :picker-options="pickerOptions1"
placeholder="选择日期"> placeholder="选择日期">
</el-date-picker> </el-date-picker>
<el-time-picker <el-time-picker
v-model="value3"
placeholder="选择时间"> placeholder="选择时间">
</el-time-picker> </el-time-picker>
</div> </div>
```html ```html
<el-date-picker <el-date-picker
v-model="value"
type="date" type="date"
placeholder="选择日期" placeholder="选择日期"
:picker-options="pickerOptions1"> :picker-options="pickerOptions1">
</el-date-picker> </el-date-picker>
<el-time-picker <el-time-picker
v-model="value"
placeholder="选择时间"> placeholder="选择时间">
</el-time-picker> </el-time-picker>
...@@ -150,7 +176,8 @@ ...@@ -150,7 +176,8 @@
picker.$emit('pick', date); picker.$emit('pick', date);
} }
}] }]
} },
value: new Date()
}; };
} }
}; };
...@@ -163,6 +190,7 @@ ...@@ -163,6 +190,7 @@
<div class="demo-box"> <div class="demo-box">
<el-date-picker <el-date-picker
v-model="value4"
type="datetime" type="datetime"
placeholder="选择日期时间" placeholder="选择日期时间"
:picker-options="pickerOptions1"> :picker-options="pickerOptions1">
...@@ -171,6 +199,7 @@ ...@@ -171,6 +199,7 @@
```html ```html
<el-date-picker <el-date-picker
v-model="value"
type="datetime" type="datetime"
placeholder="选择日期时间" placeholder="选择日期时间"
:picker-options="pickerOptions1" :picker-options="pickerOptions1"
...@@ -202,7 +231,8 @@ ...@@ -202,7 +231,8 @@
picker.$emit('pick', date); picker.$emit('pick', date);
} }
}] }]
} },
value: ''
}; };
} }
}; };
...@@ -217,10 +247,12 @@ ...@@ -217,10 +247,12 @@
<div class="demo-box"> <div class="demo-box">
<el-date-picker <el-date-picker
v-model="value5"
type="datetime" type="datetime"
placeholder="选择开始时间"> placeholder="选择开始时间">
</el-date-picker> </el-date-picker>
<el-date-picker <el-date-picker
v-model="value6"
type="datetime" type="datetime"
placeholder="选择结束时间"> placeholder="选择结束时间">
</el-date-picker> </el-date-picker>
...@@ -228,10 +260,12 @@ ...@@ -228,10 +260,12 @@
```html ```html
<el-date-picker <el-date-picker
v-model="startTime"
type="datetime" type="datetime"
placeholder="选择开始时间"> placeholder="选择开始时间">
</el-date-picker> </el-date-picker>
<el-date-picker <el-date-picker
v-model="endTime"
type="datetime" type="datetime"
placeholder="选择结束时间"> placeholder="选择结束时间">
</el-date-picker> </el-date-picker>
...@@ -243,6 +277,7 @@ ...@@ -243,6 +277,7 @@
<div class="demo-box"> <div class="demo-box">
<el-date-picker <el-date-picker
v-model="value7"
type="datetimerange" type="datetimerange"
placeholder="选择时间范围" placeholder="选择时间范围"
style="width:340px"> style="width:340px">
...@@ -251,6 +286,7 @@ ...@@ -251,6 +286,7 @@
```html ```html
<el-date-picker <el-date-picker
v-model="value"
type="datetimerange" type="datetimerange"
placeholder="选择时间范围" placeholder="选择时间范围"
style="width:340px"> style="width:340px">
...@@ -263,6 +299,7 @@ ...@@ -263,6 +299,7 @@
<div class="demo-box"> <div class="demo-box">
<el-date-picker <el-date-picker
v-model="value8"
type="datetimerange" type="datetimerange"
:picker-options="pickerOptions2" :picker-options="pickerOptions2"
placeholder="选择时间范围" placeholder="选择时间范围"
...@@ -272,6 +309,7 @@ ...@@ -272,6 +309,7 @@
```html ```html
<el-date-picker <el-date-picker
v-model="value"
type="datetimerange" type="datetimerange"
:picker-options="pickerOptions2" :picker-options="pickerOptions2"
placeholder="选择时间范围" placeholder="选择时间范围"
...@@ -282,6 +320,7 @@ ...@@ -282,6 +320,7 @@
module.exports = { module.exports = {
data() { data() {
return { return {
value: '',
pickerOptions2: { pickerOptions2: {
shortcuts: [{ shortcuts: [{
text: '最近一周', text: '最近一周',
...@@ -321,11 +360,13 @@ ...@@ -321,11 +360,13 @@
<div class="demo-box"> <div class="demo-box">
<el-date-picker <el-date-picker
v-model="value9"
type="daterange" type="daterange"
placeholder="选择日期范围" placeholder="选择日期范围"
style="width:220px"> style="width:220px">
</el-date-picker> </el-date-picker>
<el-time-picker <el-time-picker
v-model="value10"
is-range is-range
placeholder="选择时间范围"> placeholder="选择时间范围">
</el-time-picker> </el-time-picker>
...@@ -333,11 +374,13 @@ ...@@ -333,11 +374,13 @@
```html ```html
<el-date-picker <el-date-picker
v-model="date"
type="daterange" type="daterange"
placeholder="选择日期范围" placeholder="选择日期范围"
style="width:220px"> style="width:220px">
</el-date-picker> </el-date-picker>
<el-time-picker <el-time-picker
v-model="time"
is-range is-range
placeholder="选择时间范围"> placeholder="选择时间范围">
</el-time-picker> </el-time-picker>
...@@ -350,10 +393,12 @@ ...@@ -350,10 +393,12 @@
<div class="demo-box"> <div class="demo-box">
<el-date-picker <el-date-picker
v-model="value11"
type="week" type="week"
placeholder="选择开始周"> placeholder="选择开始周">
</el-date-picker> </el-date-picker>
<el-date-picker <el-date-picker
v-model="value12"
type="week" type="week"
placeholder="选择结束周"> placeholder="选择结束周">
</el-date-picker> </el-date-picker>
...@@ -361,10 +406,12 @@ ...@@ -361,10 +406,12 @@
```html ```html
<el-date-picker <el-date-picker
v-model="startWeek"
type="week" type="week"
placeholder="选择开始周"> placeholder="选择开始周">
</el-date-picker> </el-date-picker>
<el-date-picker <el-date-picker
v-model="endWeek"
type="week" type="week"
placeholder="选择结束周"> placeholder="选择结束周">
</el-date-picker> </el-date-picker>
...@@ -374,10 +421,12 @@ ...@@ -374,10 +421,12 @@
<div class="demo-box"> <div class="demo-box">
<el-date-picker <el-date-picker
v-model="value13"
type="month" type="month"
placeholder="选择开始月"> placeholder="选择开始月">
</el-date-picker> </el-date-picker>
<el-date-picker <el-date-picker
v-model="value14"
type="month" type="month"
placeholder="选择结束月"> placeholder="选择结束月">
</el-date-picker> </el-date-picker>
...@@ -385,10 +434,12 @@ ...@@ -385,10 +434,12 @@
```html ```html
<el-date-picker <el-date-picker
v-model="startMonth"
type="month" type="month"
placeholder="选择开始月"> placeholder="选择开始月">
</el-date-picker> </el-date-picker>
<el-date-picker <el-date-picker
v-model="endMonth"
type="month" type="month"
placeholder="选择结束月"> placeholder="选择结束月">
</el-date-picker> </el-date-picker>
...@@ -398,10 +449,12 @@ ...@@ -398,10 +449,12 @@
<div class="demo-box"> <div class="demo-box">
<el-date-picker <el-date-picker
v-model="value15"
type="year" type="year"
placeholder="选择开始年"> placeholder="选择开始年">
</el-date-picker> </el-date-picker>
<el-date-picker <el-date-picker
v-model="value16"
type="year" type="year"
placeholder="选择结束年"> placeholder="选择结束年">
</el-date-picker> </el-date-picker>
...@@ -409,10 +462,12 @@ ...@@ -409,10 +462,12 @@
```html ```html
<el-date-picker <el-date-picker
v-model="startYear"
type="year" type="year"
placeholder="选择开始年"> placeholder="选择开始年">
</el-date-picker> </el-date-picker>
<el-date-picker <el-date-picker
v-model="endYear"
type="year" type="year"
placeholder="选择结束年"> placeholder="选择结束年">
</el-date-picker> </el-date-picker>
......
examples/docs/time-picker.md
View file @ cf16180a
...@@ -8,9 +8,9 @@ ...@@ -8,9 +8,9 @@
## 固定时间点 ## 固定时间点
提供几个固定的时间点供用户选择。 提供几个固定的时间点供用户选择。
<div class="demo-box"> <div class="demo-box">
<el-time-select <el-time-select
v-model="value1"
:picker-options="{ :picker-options="{
start: '08:30', start: '08:30',
step: '00:15', step: '00:15',
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
```html ```html
<el-time-select <el-time-select
:value.sync="value" v-model="value"
:picker-options="{ :picker-options="{
start: '08:30', start: '08:30',
step: '00:15', step: '00:15',
...@@ -37,13 +37,14 @@ ...@@ -37,13 +37,14 @@
<div class="demo-box"> <div class="demo-box">
<el-time-picker <el-time-picker
v-model="value2"
placeholder="任意时间点"> placeholder="任意时间点">
</el-time-picker> </el-time-picker>
</div> </div>
```html ```html
<el-time-picker <el-time-picker
:value.sync="value" v-model="value"
placeholder="任意时间点"> placeholder="任意时间点">
</el-time-picker> </el-time-picker>
``` ```
...@@ -51,13 +52,14 @@ ...@@ -51,13 +52,14 @@
### 通用 - 手动输入规则 ### 通用 - 手动输入规则
<div class="demo-box"> <div class="demo-box">
<el-time-picker <el-time-picker
v-model="value3"
placeholder="任意时间点"> placeholder="任意时间点">
</el-time-picker> </el-time-picker>
</div> </div>
```html ```html
<el-time-picker <el-time-picker
:value.sync="value" v-model="value"
placeholder="任意时间点"> placeholder="任意时间点">
</el-time-picker> </el-time-picker>
``` ```
...@@ -66,6 +68,7 @@ ...@@ -66,6 +68,7 @@
<div class="demo-box"> <div class="demo-box">
<el-time-picker <el-time-picker
v-model="value4"
:picker-options="{ :picker-options="{
selectableRange: '18:30:00 - 20:30:00' selectableRange: '18:30:00 - 20:30:00'
}" }"
...@@ -75,7 +78,7 @@ ...@@ -75,7 +78,7 @@
```html ```html
<el-time-picker <el-time-picker
:value.sync="value" v-model="value"
:picker-options="{ :picker-options="{
selectableRange: '18:30:00 - 20:30:00' selectableRange: '18:30:00 - 20:30:00'
}" }"
...@@ -92,7 +95,7 @@ ...@@ -92,7 +95,7 @@
<div class="demo-box"> <div class="demo-box">
<el-time-select <el-time-select
placeholder="起始时间" placeholder="起始时间"
:value.sync="startTime" v-model="startTime"
:picker-options="{ :picker-options="{
start: '08:30', start: '08:30',
step: '00:15', step: '00:15',
...@@ -101,7 +104,7 @@ ...@@ -101,7 +104,7 @@
</el-time-select> </el-time-select>
<el-time-select <el-time-select
placeholder="结束时间" placeholder="结束时间"
:value.sync="endTime" v-model="endTime"
:picker-options="{ :picker-options="{
start: '08:30', start: '08:30',
step: '00:15', step: '00:15',
...@@ -114,7 +117,7 @@ ...@@ -114,7 +117,7 @@
```html ```html
<el-time-select <el-time-select
placeholder="起始时间" placeholder="起始时间"
:value.sync="startTime" v-model="startTime"
:picker-options="{ :picker-options="{
start: '08:30', start: '08:30',
step: '00:15', step: '00:15',
...@@ -123,7 +126,7 @@ ...@@ -123,7 +126,7 @@
</el-time-select> </el-time-select>
<el-time-select <el-time-select
placeholder="结束时间" placeholder="结束时间"
:value.sync="endTime" v-model="endTime"
:picker-options="{ :picker-options="{
start: '08:30', start: '08:30',
step: '00:15', step: '00:15',
...@@ -139,7 +142,7 @@ ...@@ -139,7 +142,7 @@
<div class="demo-box"> <div class="demo-box">
<el-time-select <el-time-select
placeholder="起始时间" placeholder="起始时间"
:value.sync="startTime2" v-model="startTime2"
:picker-options="{ :picker-options="{
start: '08:30', start: '08:30',
step: '00:15', step: '00:15',
...@@ -148,7 +151,7 @@ ...@@ -148,7 +151,7 @@
</el-time-select> </el-time-select>
<el-time-select <el-time-select
placeholder="结束时间" placeholder="结束时间"
:value.sync="endTime2" v-model="endTime2"
:picker-options="{ :picker-options="{
start: '08:30', start: '08:30',
step: '00:15', step: '00:15',
...@@ -161,7 +164,7 @@ ...@@ -161,7 +164,7 @@
```html ```html
<el-time-select <el-time-select
placeholder="起始时间" placeholder="起始时间"
:value.sync="startTime2" v-model="startTime2"
:picker-options="{ :picker-options="{
start: '08:30', start: '08:30',
step: '00:15', step: '00:15',
...@@ -170,7 +173,7 @@ ...@@ -170,7 +173,7 @@
</el-time-select> </el-time-select>
<el-time-select <el-time-select
placeholder="结束时间" placeholder="结束时间"
:value.sync="endTime2" v-model="endTime2"
:picker-options="{ :picker-options="{
start: '08:30', start: '08:30',
step: '00:15', step: '00:15',
...@@ -186,6 +189,7 @@ ...@@ -186,6 +189,7 @@
<div class="demo-box"> <div class="demo-box">
<el-time-picker <el-time-picker
is-range is-range
v-model="value5"
placeholder="选择时间范围"> placeholder="选择时间范围">
</el-time-picker> </el-time-picker>
</div> </div>
...@@ -193,6 +197,7 @@ ...@@ -193,6 +197,7 @@
```html ```html
<el-time-picker <el-time-picker
is-range is-range
v-model="value"
placeholder="选择时间范围"> placeholder="选择时间范围">
</el-time-picker> </el-time-picker>
``` ```
...@@ -201,6 +206,11 @@ ...@@ -201,6 +206,11 @@
export default { export default {
data() { data() {
return { return {
value1: '',
value2: '',
value3: '',
value4: '',
value5: '',
startTime: '', startTime: '',
endTime: '', endTime: '',
startTime2: '', startTime2: '',
......
packages/date-picker/package.json
View file @ cf16180a
...@@ -12,10 +12,9 @@ ...@@ -12,10 +12,9 @@
"author": "long.zhang@ele.me", "author": "long.zhang@ele.me",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"wind-dom": "0.0.3", "wind-dom": "0.0.3"
"vue-clickoutside": "*"
}, },
"devDependencies": { "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 @@ ...@@ -392,24 +392,30 @@
if (clickNormalCell && this.selectionMode === 'range') { if (clickNormalCell && this.selectionMode === 'range') {
if (this.minDate && this.maxDate) { if (this.minDate && this.maxDate) {
this.minDate = new Date(newDate.getTime()); const minDate = new Date(newDate.getTime());
this.maxDate = null; const maxDate = null;
this.$emit('pick', { minDate, maxDate }, false);
this.rangeState.selecting = true; this.rangeState.selecting = true;
this.markRange(this.minDate); this.markRange(this.minDate);
} else if (this.minDate && !this.maxDate) { } else if (this.minDate && !this.maxDate) {
if (newDate >= this.minDate) { if (newDate >= this.minDate) {
this.maxDate = new Date(newDate.getTime()); const maxDate = new Date(newDate.getTime());
this.rangeState.selecting = false; this.rangeState.selecting = false;
this.$emit('pick', { this.$emit('pick', {
minDate: this.minDate, minDate: this.minDate,
maxDate: this.maxDate maxDate
}); });
} else { } 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) { } 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.rangeState.selecting = true;
this.markRange(this.minDate); this.markRange(this.minDate);
} }
...@@ -420,11 +426,11 @@ ...@@ -420,11 +426,11 @@
} else if (selectionMode === 'week') { } else if (selectionMode === 'week') {
var weekNumber = getWeekNumber(newDate); var weekNumber = getWeekNumber(newDate);
this.value = newDate.getFullYear() + 'w' + weekNumber; const value = newDate.getFullYear() + 'w' + weekNumber;
this.$emit('pick', { this.$emit('pick', {
year: newDate.getFullYear(), year: newDate.getFullYear(),
week: weekNumber, week: weekNumber,
value: this.value, value: value,
date: newDate date: newDate
}); });
} }
......
packages/date-picker/src/basic/month-table.vue
View file @ cf16180a
...@@ -65,7 +65,7 @@ ...@@ -65,7 +65,7 @@
if (target.tagName !== 'A') return; if (target.tagName !== 'A') return;
const column = target.parentNode.cellIndex; const column = target.parentNode.cellIndex;
const row = target.parentNode.parentNode.rowIndex; const row = target.parentNode.parentNode.rowIndex;
const month = this.month = row * 4 + column; const month = row * 4 + column;
this.$emit('pick', month); this.$emit('pick', month);
} }
......
packages/date-picker/src/basic/time-spinner.vue
View file @ cf16180a
<template> <template>
<div <div class="el-time-spinner">
@mouseenter="emitSelectRange('hours')" {{hours}}
class="el-time-spinner__wrapper" <div
v-el:hour> @mouseenter="emitSelectRange('hours')"
<ul class="el-time-spinner__list"> class="el-time-spinner__wrapper"
<li ref="hour">
@click="handleClick('hours', { value: hour, disabled: disabled }, true)" <ul class="el-time-spinner__list">
v-for="(hour, disabled) in hoursList" <li
track-by="$index" @click="handleClick('hours', { value: hour, disabled: disabled }, true)"
class="el-time-spinner__item" v-for="(disabled, hour) in hoursList"
:class="{ 'active': hour === hours, 'disabled': disabled }" track-by="hour"
v-text="hour"></li> class="el-time-spinner__item"
</ul> :class="{ 'active': hour === hours, 'disabled': disabled }"
</div> v-text="hour"></li>
<div </ul>
@mouseenter="emitSelectRange('minutes')" </div>
class="el-time-spinner__wrapper" <div
v-el:minute> @mouseenter="emitSelectRange('minutes')"
<ul class="el-time-spinner__list"> class="el-time-spinner__wrapper"
<li ref="minute">
@click="handleClick('minutes', minute, true)" <ul class="el-time-spinner__list">
v-for="minute in 60" <li
class="el-time-spinner__item" @click="handleClick('minutes', key, true)"
:class="{ 'active': minute === minutes }" v-for="(minute, key) in 60"
v-text="minute"></li> class="el-time-spinner__item"
</ul> :class="{ 'active': key === minutes }"
</div> v-text="key"></li>
<div </ul>
@mouseenter="emitSelectRange('seconds')" </div>
class="el-time-spinner__wrapper" <div
v-el:second> @mouseenter="emitSelectRange('seconds')"
<ul class="el-time-spinner__list"> class="el-time-spinner__wrapper"
<li ref="second">
@click="handleClick('seconds', second, true)" <ul class="el-time-spinner__list">
v-for="second in 60" <li
class="el-time-spinner__item" @click="handleClick('seconds', key, true)"
:class="{ 'active': second === seconds }" v-for="(second, key) in 60"
v-text="second"></li> class="el-time-spinner__item"
</ul> :class="{ 'active': key === seconds }"
v-text="key"></li>
</ul>
</div>
</div> </div>
</template> </template>
...@@ -64,33 +67,32 @@ ...@@ -64,33 +67,32 @@
showSeconds: { showSeconds: {
type: Boolean, type: Boolean,
default: true default: true
}, }
selectableRange: {}
}, },
watch: { watch: {
hours(newVal, oldVal) { hoursPrivate(newVal, oldVal) {
if (!(newVal >= 0 && newVal <= 23)) { 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 }); this.$emit('change', { hours: newVal });
}, },
minutes(newVal, oldVal) { minutesPrivate(newVal, oldVal) {
if (!(newVal >= 0 && newVal <= 59)) { 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 }); this.$emit('change', { minutes: newVal });
}, },
seconds(newVal, oldVal) { secondsPrivate(newVal, oldVal) {
if (!(newVal >= 0 && newVal <= 59)) { 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 }); this.$emit('change', { seconds: newVal });
} }
}, },
...@@ -101,9 +103,18 @@ ...@@ -101,9 +103,18 @@
} }
}, },
data() {
return {
hoursPrivate: 0,
minutesPrivate: 0,
secondsPrivate: 0,
selectableRange: []
};
},
methods: { methods: {
focusEditor(type) { focusEditor(type) {
const editor = this.$els[type + 'Editor']; const editor = this.$refs[type + 'Editor'];
if (editor) { if (editor) {
editor.focus(); editor.focus();
} }
...@@ -114,7 +125,7 @@ ...@@ -114,7 +125,7 @@
return; return;
} }
this[type] = value.value >= 0 ? value.value : value; this[type + 'Private'] = value.value >= 0 ? value.value : value;
this.emitSelectRange(type); this.emitSelectRange(type);
}, },
...@@ -130,9 +141,9 @@ ...@@ -130,9 +141,9 @@
}, },
ajustScrollTop() { ajustScrollTop() {
this.$els.hour.scrollTop = Math.max(0, (this.hours - 2.5) * 32 + 80); this.$refs.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.$refs.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.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 @@ ...@@ -59,17 +59,17 @@
methods: { methods: {
nextTenYear() { nextTenYear() {
this.year += 10; this.$emit('pick', this.year + 10, false);
}, },
prevTenYear() { prevTenYear() {
this.year -= 10; this.$emit('pick', this.year - 10, false);
}, },
handleYearTableClick(event) { handleYearTableClick(event) {
const target = event.target; const target = event.target;
if (target.tagName === 'A') { 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); this.$emit('pick', year);
} }
} }
......
packages/date-picker/src/panel/date-range.vue
View file @ cf16180a
<template> <template>
<div <transition name="md-fade-bottom">
v-show="visible" <div
transition="md-fade-bottom" v-show="visible"
class="el-picker-panel el-date-range-picker"> class="el-picker-panel el-date-range-picker">
<div class="el-picker-panel__body-wrapper"> <div class="el-picker-panel__body-wrapper">
<slot name="sidebar" class="el-picker-panel__sidebar"></slot> <slot name="sidebar" class="el-picker-panel__sidebar"></slot>
<div class="el-picker-panel__sidebar" v-if="shortcuts"> <div class="el-picker-panel__sidebar" v-if="shortcuts">
<button <button
class="el-picker-panel__shortcut" class="el-picker-panel__shortcut"
v-for="shortcut in shortcuts" v-for="shortcut in shortcuts"
@click="handleShortcutClick(shortcut)">{{shortcut.text}}</button> @click="handleShortcutClick(shortcut)">{{shortcut.text}}</button>
</div> </div>
<div class="el-picker-panel__body"> <div class="el-picker-panel__body">
<div class="el-date-range-picker__time-header" v-if="showTime"> <div class="el-date-range-picker__time-header" v-if="showTime">
<span class="el-date-range-picker__editors-wrap"> <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">
<input <input
placeholder="开始时间" placeholder="开始日期"
class="el-date-range-picker__editor" class="el-date-range-picker__editor"
v-model="leftVisibleTime" v-model="leftVisibleDate"
@focus="leftTimePickerVisible = true" @input="handleDateInput($event, 'min')"
@change="handleTimeChange($event, 'min')"/> @change="handleDateChange($event, 'min')"/>
<time-picker <span class="el-date-range-picker__time-picker-wrap">
v-ref:lefttimepicker <input
:date="minDate" placeholder="开始时间"
@pick="handleLeftTimePick" class="el-date-range-picker__editor"
v-show="leftTimePickerVisible"> v-model="leftVisibleTime"
</time-picker> @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> <span class="el-icon-arrow-right"></span>
<span class="el-icon-arrow-right"></span> <span class="el-date-range-picker__editors-wrap is-right">
<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">
<input <input
placeholder="结束时间" placeholder="结束日期"
class="el-date-range-picker__editor" class="el-date-range-picker__editor"
v-model="rightVisibleTime" v-model="rightVisibleDate"
@focus="minDate && (rightTimePickerVisible = true)"
:readonly="!minDate" :readonly="!minDate"
@change="handleTimeChange($event, 'max')" /> @input="handleDateInput($event, 'max')"
<time-picker @change="handleDateChange($event, 'max')" />
v-ref:righttimepicker <span class="el-date-range-picker__time-picker-wrap">
:date="maxDate" <input
@pick="handleRightTimePick" placeholder="结束时间"
v-show="rightTimePickerVisible"></time-picker> 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>
</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> </div>
<date-table <div class="el-picker-panel__content el-date-range-picker__content is-left">
selection-mode="range" <div class="el-date-range-picker__header">
:date="date" <button
:year="leftYear" @click="prevYear"
:month="leftMonth" class="el-picker-panel__icon-btn el-icon-d-arrow-left"></button>
:min-date="minDate" <button
:max-date="maxDate" @click="prevMonth"
:range-state="rangeState" class="el-picker-panel__icon-btn el-icon-arrow-left"></button>
@changerange="handleChangeRange" <div>{{ leftLabel }}</div>
@pick="handleRangePick"> </div>
</date-table> <date-table
</div> selection-mode="range"
<div class="el-picker-panel__content el-date-range-picker__content is-right"> :date="date"
<div class="el-date-range-picker__header"> :year="leftYear"
<button :month="leftMonth"
@click="nextYear" :min-date="minDate"
class="el-picker-panel__icon-btn el-icon-d-arrow-right"></button> :max-date="maxDate"
<button :range-state="rangeState"
@click="nextMonth" @changerange="handleChangeRange"
class="el-picker-panel__icon-btn el-icon-arrow-right"></button> @pick="handleRangePick">
<div>{{ rightLabel }}</div> </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> </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> </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>
<div class="el-picker-panel__footer" v-if="showTime"> </transition>
<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>
</template> </template>
<script type="text/ecmascript-6"> <script type="text/ecmascript-6">
import { nextMonth, prevMonth, $t, formatDate, parseDate } from '../util'; import { nextMonth, prevMonth, $t, formatDate, parseDate } from '../util';
export default { 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: { computed: {
btnDisabled() { btnDisabled() {
return !(this.minDate && this.maxDate && !this.selecting); return !(this.minDate && this.maxDate && !this.selecting);
...@@ -272,6 +239,19 @@ ...@@ -272,6 +239,19 @@
data() { data() {
return { return {
date: new Date(),
minDate: '',
maxDate: '',
rangeState: {
endDate: null,
selecting: false,
row: null,
column: null
},
showTime: false,
shortcuts: '',
value: '',
visible: '',
leftTimePickerVisible: false, leftTimePickerVisible: false,
rightTimePickerVisible: false rightTimePickerVisible: false
}; };
...@@ -286,9 +266,6 @@ ...@@ -286,9 +266,6 @@
}); });
}, },
maxDate() {
},
leftTimePickerVisible(val) { leftTimePickerVisible(val) {
if (val) this.$refs.lefttimepicker.ajustScrollTop(); if (val) this.$refs.lefttimepicker.ajustScrollTop();
}, },
...@@ -377,9 +354,11 @@ ...@@ -377,9 +354,11 @@
} }
}, },
handleRangePick(val) { handleRangePick(val, close = true) {
this.maxDate = val.maxDate; this.maxDate = val.maxDate;
this.minDate = val.minDate; this.minDate = val.minDate;
if (!close) return;
if (!this.showTime) { if (!this.showTime) {
this.$emit('pick', [this.minDate, this.maxDate]); this.$emit('pick', [this.minDate, this.maxDate]);
} }
......
packages/date-picker/src/panel/date.vue
View file @ cf16180a
<template> <template>
<div <transition name="md-fade-bottom">
v-show="visible" <div
transition="md-fade-bottom" v-show="visible"
class="el-picker-panel el-date-picker"> class="el-picker-panel el-date-picker">
<div class="el-picker-panel__body-wrapper"> <div class="el-picker-panel__body-wrapper">
<slot name="sidebar" class="el-picker-panel__sidebar"></slot> <slot name="sidebar" class="el-picker-panel__sidebar"></slot>
<div class="el-picker-panel__sidebar" v-if="shortcuts"> <div class="el-picker-panel__sidebar" v-if="shortcuts">
<button <button
class="el-picker-panel__shortcut" class="el-picker-panel__shortcut"
v-for="shortcut in shortcuts" v-for="shortcut in shortcuts"
@click="handleShortcutClick(shortcut)">{{ shortcut.text }}</button> @click="handleShortcutClick(shortcut)">{{ shortcut.text }}</button>
</div> </div>
<div class="el-picker-panel__body"> <div class="el-picker-panel__body">
<div class="el-date-picker__time-header" v-if="showTime"> <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 <input
@focus="timePickerVisible = true" placehoder="选择日期"
v-model="visibleTime"
placehoder="选择时间"
type="text" type="text"
v-model="visibleDate"
class="el-date-picker__editor"> class="el-date-picker__editor">
<time-picker <span style="position: relative" v-clickoutside="closeTimePicker">
v-ref:timepicker <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" :date="date"
@pick="handleTimePick" :value="value"
v-show="timePickerVisible"> :week="week"
</time-picker> :selection-mode="selectionMode"
</span> :disabled-date="disabledDate">
</div> </date-table>
<div class="el-date-picker__header" v-show="currentView !== 'time'"> <year-table
<button ref="yearTable"
@click="prevYear" :year="year"
class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left"> v-show="currentView === 'year'"
</button> @pick="handleYearPick">
<button </year-table>
@click="prevMonth" <month-table
v-show="currentView === 'date'" :month="month"
class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-arrow-left"> v-show="currentView === 'month'"
</button> @pick="handleMonthPick">
<span </month-table>
@click="showYearPicker" </div>
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> </div>
</div>
<div <div
class="el-picker-panel__footer" class="el-picker-panel__footer"
v-show="footerVisible && currentView === 'date'"> v-show="footerVisible && currentView === 'date'">
<a <a
href="JavaScript:" href="JavaScript:"
class="el-picker-panel__link-btn" class="el-picker-panel__link-btn"
@click="changeToToday">{{ $t('datepicker.today') }}</a> @click="changeToToday">{{ $t('datepicker.today') }}</a>
<button <button
class="el-picker-panel__btn" class="el-picker-panel__btn"
@click="confirm">{{ $t('datepicker.confirm') }}</button> @click="confirm">{{ $t('datepicker.confirm') }}</button>
</div>
</div> </div>
</div> </transition>
</template> </template>
<script type="text/ecmascript-6"> <script type="text/ecmascript-6">
import { $t, formatDate, parseDate } from '../util'; import { $t, formatDate, parseDate } from '../util';
export default { export default {
props: {
currentView: {
default: 'date'
},
date: {
default() {
return new Date();
}
},
disabledDate: {},
value: {},
showTime: Boolean,
selectionMode: {
type: String,
default: 'day'
},
shortcuts: {},
visible: Boolean
},
watch: { watch: {
value(newVal) { value(newVal) {
if (this.selectionMode === 'day' && newVal instanceof Date) { if (this.selectionMode === 'day' && newVal instanceof Date) {
...@@ -144,7 +118,7 @@ ...@@ -144,7 +118,7 @@
}, },
timePickerVisible(val) { timePickerVisible(val) {
if (val) this.$refs.timepicker.ajustScrollTop(); if (val) this.$nextTick(() => this.$refs.timepicker.ajustScrollTop());
}, },
selectionMode(newVal) { selectionMode(newVal) {
...@@ -163,11 +137,8 @@ ...@@ -163,11 +137,8 @@
} }
}, },
ready() { directives: {
if (this.date && !this.year) { Clickoutside: require('main/utils/clickoutside').default
this.year = this.date.getFullYear();
this.month = this.date.getMonth();
}
}, },
methods: { methods: {
...@@ -276,8 +247,10 @@ ...@@ -276,8 +247,10 @@
this.resetDate(); this.resetDate();
}, },
handleYearPick(year) { handleYearPick(year, close = true) {
this.year = year; this.year = year;
if (!close) return;
this.date.setFullYear(year); this.date.setFullYear(year);
if (this.selectionMode === 'year') { if (this.selectionMode === 'year') {
this.$emit('pick', year); this.$emit('pick', year);
...@@ -311,6 +284,10 @@ ...@@ -311,6 +284,10 @@
this.year = this.date.getFullYear(); this.year = this.date.getFullYear();
this.month = this.date.getMonth(); this.month = this.date.getMonth();
} }
},
closeTimePicker() {
this.timePickerVisible = false;
} }
}, },
...@@ -321,14 +298,27 @@ ...@@ -321,14 +298,27 @@
DateTable: require('../basic/date-table') DateTable: require('../basic/date-table')
}, },
compiled() { mounted() {
if (this.selectionMode === 'month') { if (this.selectionMode === 'month') {
this.currentView = 'month'; this.currentView = 'month';
} }
if (this.date && !this.year) {
this.year = this.date.getFullYear();
this.month = this.date.getMonth();
}
}, },
data() { data() {
return { return {
date: new Date(),
value: '',
showTime: false,
selectionMode: 'day',
shortcuts: '',
visible: false,
currentView: 'date',
disabledDate: '',
year: null, year: null,
month: null, month: null,
week: null, week: null,
......
packages/date-picker/src/panel/time-range.vue
View file @ cf16180a
<template> <template>
<div <transition name="md-fade-bottom">
v-show="visible" <div
transition="md-fade-bottom" v-show="visible"
class="el-time-range-picker el-picker-panel"> class="el-time-range-picker el-picker-panel">
<div class="el-time-range-picker__content"> <div class="el-time-range-picker__content">
<div class="el-time-range-picker__cell"> <div class="el-time-range-picker__cell">
<div class="el-time-range-picker__header">开始时间</div> <div class="el-time-range-picker__header">开始时间</div>
<div class="el-time-range-picker__body el-time-panel__content"> <div class="el-time-range-picker__body el-time-panel__content">
<time-spinner <time-spinner
v-ref:min-spinner ref="minSpinner"
:show-seconds="showSeconds" :show-seconds="showSeconds"
@change="handleMinChange" @change="handleMinChange"
@select-range="setMinSelectionRange" @select-range="setMinSelectionRange"
:hours="minHours" :hours="minHours"
:minutes="minMinutes" :minutes="minMinutes"
:seconds="minSeconds"> :seconds="minSeconds">
</time-spinner> </time-spinner>
</div>
</div> </div>
</div> <div class="el-time-range-picker__cell">
<div class="el-time-range-picker__cell"> <div class="el-time-range-picker__header">结束时间</div>
<div class="el-time-range-picker__header">结束时间</div> <div class="el-time-range-picker__body el-time-panel__content">
<div class="el-time-range-picker__body el-time-panel__content"> <time-spinner
<time-spinner ref="maxSpinner"
v-ref:max-spinner :show-seconds="showSeconds"
:show-seconds="showSeconds" @change="handleMaxChange"
@change="handleMaxChange" @select-range="setMaxSelectionRange"
@select-range="setMaxSelectionRange" :hours="maxHours"
:hours="maxHours" :minutes="maxMinutes"
:minutes="maxMinutes" :seconds="maxSeconds">
:seconds="maxSeconds"> </time-spinner>
</time-spinner> </div>
</div> </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>
<div class="el-time-panel__footer"> </transition>
<button
class="el-time-panel__btn cancel"
@click="handleCancel()">取消</button>
<button
class="el-time-panel__btn confirm"
@click="handleConfirm()"
:disabled="btnDisabled">确定</button>
</div>
</div>
</template> </template>
<script type="text/ecmascript-6"> <script type="text/ecmascript-6">
...@@ -62,127 +63,36 @@ ...@@ -62,127 +63,36 @@
TimeSpinner: require('../basic/time-spinner') 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: { computed: {
showSeconds() { showSeconds() {
return (this.format || '').indexOf('ss') !== -1; 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() { data() {
const minTime = new Date();
const date = new Date();
date.setHours(date.getHours() + 1);
const maxTime = date;
return { 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: { methods: {
handleCancel() { handleCancel() {
this.$emit('pick', null); this.$emit('pick');
}, },
handleChange() { handleChange() {
...@@ -192,16 +102,35 @@ ...@@ -192,16 +102,35 @@
}, },
handleMaxChange(date) { handleMaxChange(date) {
if (date.hours !== undefined) this.maxHours = date.hours; if (date.hours !== undefined) {
if (date.minutes !== undefined) this.maxMinutes = date.minutes; this.maxTime.setHours(date.hours);
if (date.seconds !== undefined) this.maxSeconds = date.seconds; 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(); this.handleChange();
}, },
handleMinChange(date) { handleMinChange(date) {
if (date.hours !== undefined) this.minHours = date.hours; if (date.hours !== undefined) {
if (date.minutes !== undefined) this.minMinutes = date.minutes; this.minTime.setHours(date.hours);
if (date.seconds !== undefined) this.minSeconds = date.seconds; 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(); this.handleChange();
}, },
...@@ -228,8 +157,8 @@ ...@@ -228,8 +157,8 @@
this.$refs.maxSpinner.ajustScrollTop(); this.$refs.maxSpinner.ajustScrollTop();
}, },
focusEditor(...args) { focusEditor(val) {
return this.$refs.minSpinner.focusEditor(...args); return this.$refs.minSpinner.focusEditor(val);
} }
}, },
......
packages/date-picker/src/panel/time-select.vue
View file @ cf16180a
<template> <template>
<div <transition name="md-fade-bottom">
v-show="visible" <div
class="el-picker-panel time-select" v-show="visible"
transition="md-fade-bottom"> class="el-picker-panel time-select">
<div class="el-picker-panel__content"> <div class="el-picker-panel__content">
<div class="time-select-item" <div class="time-select-item"
v-for="item in items" v-for="item in items"
:class="{ selected: value === item.value, disabled: item.disabled }" :class="{ selected: value === item.value, disabled: item.disabled }"
:disabled="item.disabled" :disabled="item.disabled"
@click="handleClick(item)"> @click="handleClick(item)">
{{ item.value }} {{ item.value }}
</div>
</div> </div>
</div> </div>
</div> </transition>
</template> </template>
<script type="text/ecmascript-6"> <script type="text/ecmascript-6">
...@@ -67,26 +68,6 @@ ...@@ -67,26 +68,6 @@
}; };
export default { export default {
props: {
start: {
default: '09:00'
},
end: {
default: '18:00'
},
step: {
default: '00:30'
},
value: {},
visible: Boolean,
minTime: {}
},
watch: { watch: {
minTime(val) { minTime(val) {
if (this.value && val && compareTime(this.value, val) === -1) { if (this.value && val && compareTime(this.value, val) === -1) {
...@@ -99,11 +80,21 @@ ...@@ -99,11 +80,21 @@
handleClick(item) { handleClick(item) {
if (!item.disabled) { if (!item.disabled) {
this.$emit('pick', item.value); 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: { computed: {
items() { items() {
const start = this.start; const start = this.start;
......
packages/date-picker/src/panel/time.vue
View file @ cf16180a
<template> <template>
<div <transition name="md-fade-bottom">
v-show="visible" <div
transition="md-fade-bottom" v-show="visible"
class="el-time-panel"> class="el-time-panel">
<div class="el-time-panel__content"> <div class="el-time-panel__content">
<time-spinner <time-spinner
v-ref:spinner ref="spinner"
@change="handleChange" @change="handleChange"
:show-seconds="showSeconds" :show-seconds="showSeconds"
:hours="hours" @select-range="setSelectionRange"
:minutes="minutes" :hours="hours"
@select-range="setSelectionRange" :minutes="minutes"
:seconds="seconds"> :seconds="seconds">
</time-spinner> </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>
<div class="el-time-panel__footer"> </transition>
<button
class="el-time-panel__btn
cancel" @click="handleCancel()">取消</button>
<button
class="el-time-panel__btn confirm"
@click="handleConfirm()">确定</button>
</div>
</div>
</template> </template>
<script type="text/ecmascript-6"> <script type="text/ecmascript-6">
import { limitRange } from '../util'; import { limitRange } from '../util';
import Vue from 'vue';
export default { export default {
components: { components: {
...@@ -35,77 +37,46 @@ ...@@ -35,77 +37,46 @@
props: { props: {
date: { date: {
default() { default: new Date()
return new Date();
}
},
format: {
default: 'HH:mm:ss'
}, },
value: {}, visible: false
visible: Boolean,
selectableRange: {}
}, },
watch: { watch: {
value(newVal) { value(newVal) {
let date;
if (newVal instanceof Date) { if (newVal instanceof Date) {
this.date = newVal; date = limitRange(newVal, this.selectableRange);
} else if (!newVal) { } 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: { computed: {
showSeconds() { showSeconds() {
return (this.format || '').indexOf('ss') !== -1; 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 @@ ...@@ -115,9 +86,19 @@
}, },
handleChange(date) { handleChange(date) {
if (date.hours !== undefined) this.hours = date.hours; if (date.hours !== undefined) {
if (date.minutes !== undefined) this.minutes = date.minutes; this.date.setHours(date.hours);
if (date.seconds !== undefined) this.seconds = date.seconds; 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); this.handleConfirm(true);
}, },
...@@ -126,20 +107,13 @@ ...@@ -126,20 +107,13 @@
}, },
handleConfirm(visible = false, first) { handleConfirm(visible = false, first) {
const spinner = this.$refs.spinner; const date = new Date(limitRange(this.date, this.selectableRange));
let date = new Date();
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); this.$emit('pick', date, visible, first);
}, },
focusEditor(...args) { focusEditor(val) {
return this.$refs.spinner.focusEditor(...args); return this.$refs.spinner.focusEditor(val);
}, },
ajustScrollTop() { ajustScrollTop() {
...@@ -147,8 +121,16 @@ ...@@ -147,8 +121,16 @@
} }
}, },
ready() { created() {
this.$refs.spinner.selectableRange = this.selectableRange; !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)); this.$nextTick(() => this.handleConfirm(true, true));
} }
}; };
......
packages/date-picker/src/picker.vue
View file @ cf16180a
<template> <template>
<span <span
class="el-date-editor" class="el-date-editor"
v-clickoutside="pickerVisible = false" v-clickoutside="handleClose"
:class="{ :class="{
'is-have-trigger': haveTrigger, 'is-have-trigger': haveTrigger,
'is-active': pickerVisible, 'is-active': pickerVisible,
'is-filled': !!this.value, 'is-filled': !!this.value
'is-lg': size === 'lg', 'is-sm': size === 'sm'
}"> }">
<input <input
lazy
class="el-date-editor__editor" class="el-date-editor__editor"
:readonly="readonly" :readonly="readonly"
:type="editorType" :type="editorType"
:placeholder="placeholder" :placeholder="placeholder"
:style="{ height: height ? height + 'px' : '' }"
@focus="handleFocus" @focus="handleFocus"
@blur="handleBlur" @blur="handleBlur"
@keydown="handleKeydown($event)" @keydown="handleKeydown"
@keyup="handleKeyup($event)" @keyup="handleKeyup"
v-el:reference ref="reference"
v-model="visualValue" /> v-model.lazy="visualValue" />
<span <span
@click="togglePicker()" @click="togglePicker()"
class="el-date-editor__trigger el-icon {{triggerClass}}" class="el-date-editor__trigger el-icon"
:class="[triggerClass]"
v-if="haveTrigger"> v-if="haveTrigger">
</span> </span>
</span> </span>
...@@ -33,6 +31,7 @@ ...@@ -33,6 +31,7 @@
<script> <script>
import Vue from 'vue'; import Vue from 'vue';
import Clickoutside from 'main/utils/clickoutside';
import { merge, formatDate, parseDate, getWeekNumber } from './util'; import { merge, formatDate, parseDate, getWeekNumber } from './util';
import Popper from 'main/utils/popper.js'; import Popper from 'main/utils/popper.js';
...@@ -189,7 +188,7 @@ export default { ...@@ -189,7 +188,7 @@ export default {
}, },
directives: { directives: {
clickoutside: require('vue-clickoutside') Clickoutside
}, },
data() { data() {
...@@ -254,11 +253,11 @@ export default { ...@@ -254,11 +253,11 @@ export default {
const parsedValue = parser(value, this.format || DEFAULT_FORMATS[type]); const parsedValue = parser(value, this.format || DEFAULT_FORMATS[type]);
if (parsedValue) { if (parsedValue) {
this.value = parsedValue; this.$emit('input', parsedValue);
} }
return; return;
} }
this.value = value; this.$emit('input', value);
} }
}, },
...@@ -268,6 +267,10 @@ export default { ...@@ -268,6 +267,10 @@ export default {
}, },
methods: { methods: {
handleClose() {
this.pickerVisible = false;
},
handleFocus() { handleFocus() {
const type = this.type; const type = this.type;
...@@ -331,7 +334,8 @@ export default { ...@@ -331,7 +334,8 @@ export default {
const parsedValue = parser(value, this.format || DEFAULT_FORMATS[type]); const parsedValue = parser(value, this.format || DEFAULT_FORMATS[type]);
if (!parsedValue) return; if (!parsedValue) return;
this.picker.value = this.value = parsedValue; this.picker.value = parsedValue;
this.$emit('input', parsedValue);
if (this.type.indexOf('date') > -1) return; if (this.type.indexOf('date') > -1) return;
...@@ -389,8 +393,7 @@ export default { ...@@ -389,8 +393,7 @@ export default {
showPicker() { showPicker() {
if (!this.picker) { if (!this.picker) {
this.picker = new Vue(merge({ this.picker = new Vue(merge({
el: document.createElement('div'), el: document.createElement('div')
replace: true
}, this.panel)); }, this.panel));
this.picker.showTime = this.type === 'datetime' || this.type === 'datetimerange'; this.picker.showTime = this.type === 'datetime' || this.type === 'datetimerange';
this.picker.selectionMode = this.selectionMode; this.picker.selectionMode = this.selectionMode;
...@@ -427,7 +430,7 @@ export default { ...@@ -427,7 +430,7 @@ export default {
this.picker.resetView && this.picker.resetView(); this.picker.resetView && this.picker.resetView();
this.picker.$on('pick', (date, visible = false) => { this.picker.$on('pick', (date, visible = false) => {
this.value = date; this.$emit('input', date);
if (!visible) { if (!visible) {
this.pickerVisible = this.picker.visible = false; this.pickerVisible = this.picker.visible = false;
...@@ -437,8 +440,8 @@ export default { ...@@ -437,8 +440,8 @@ export default {
this.picker.$on('select-range', (start, end) => { this.picker.$on('select-range', (start, end) => {
setTimeout(() => { setTimeout(() => {
this.$els.reference.setSelectionRange(start, end); this.$refs.reference.setSelectionRange(start, end);
this.$els.reference.focus(); this.$refs.reference.focus();
}, 0); }, 0);
}); });
} else { } else {
...@@ -451,7 +454,7 @@ export default { ...@@ -451,7 +454,7 @@ export default {
return; return;
} }
this.popper = new Popper(this.$els.reference, this.picker.$el, { this.popper = new Popper(this.$refs.reference, this.picker.$el, {
gpuAcceleration: false, gpuAcceleration: false,
placement: 'bottom-start', placement: 'bottom-start',
boundariesPadding: 0, boundariesPadding: 0,
......
packages/date-picker/src/util/index.js
View file @ cf16180a
...@@ -143,7 +143,7 @@ export const getRangeHours = function(ranges) { ...@@ -143,7 +143,7 @@ export const getRangeHours = function(ranges) {
}; };
export const limitRange = function(date, ranges) { export const limitRange = function(date, ranges) {
if (!ranges) return date; if (!ranges || !ranges.length) return date;
const len = ranges.length; const len = ranges.length;
const format = 'HH:mm:ss'; const format = 'HH:mm:ss';
......
packages/pagination/src/pagination.js
View file @ cf16180a
...@@ -49,7 +49,7 @@ export default { ...@@ -49,7 +49,7 @@ export default {
const TEMPLATE_MAP = { const TEMPLATE_MAP = {
prev: <prev></prev>, prev: <prev></prev>,
jumper: <jumper></jumper>, 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>, next: <next></next>,
sizes: <sizes></sizes>, sizes: <sizes></sizes>,
slot: <slot></slot>, slot: <slot></slot>,
...@@ -118,15 +118,15 @@ export default { ...@@ -118,15 +118,15 @@ export default {
return ( return (
<span class="el-pagination__sizes"> <span class="el-pagination__sizes">
<el-select <el-select
prop-size="small" size="small"
prop-value={ this.$parent.internalPageSize } value={ this.$parent.internalPageSize }
on-change={ this.handleChange } on-change={ this.handleChange }
prop-width={ 110 }> width={ 110 }>
{ {
this.$parent.pageSizes.map(item => this.$parent.pageSizes.map(item =>
<el-option <el-option
prop-value={ item } value={ item }
prop-label={ item + ' 条/页' }> label={ item + ' 条/页' }>
</el-option> </el-option>
) )
} }
......
packages/select/src/select.vue
View file @ cf16180a
...@@ -46,16 +46,17 @@ ...@@ -46,16 +46,17 @@
:style="{ 'width': inputWidth + 'px' }" :style="{ 'width': inputWidth + 'px' }"
v-element-clickoutside="handleClose"> v-element-clickoutside="handleClose">
</el-input> </el-input>
<el-select-menu <transition name="md-fade-bottom">
ref="popper" <el-select-menu
v-show="visible && nodataText !== false" ref="popper"
transition="fade" v-show="visible && nodataText !== false"
:style="{ 'width': dropdownWidth ? dropdownWidth + 'px' : '100%' }"> :style="{ 'width': dropdownWidth ? dropdownWidth + 'px' : '100%' }">
<ul class="el-select-dropdown__list" v-show="options.length > 0 && filteredOptionsCount > 0"> <ul class="el-select-dropdown__list" v-show="options.length > 0 && filteredOptionsCount > 0">
<slot></slot> <slot></slot>
</ul> </ul>
<p class="el-select-dropdown__nodata" v-if="nodataText">{{ nodataText }}</p> <p class="el-select-dropdown__nodata" v-if="nodataText">{{ nodataText }}</p>
</el-select-menu> </el-select-menu>
</transition>
</div> </div>
</template> </template>
...@@ -195,7 +196,7 @@ ...@@ -195,7 +196,7 @@
this.valueChangeBySelected = false; this.valueChangeBySelected = false;
return; return;
} }
if (this.multiple && Object.prototype.toString.call(val) === '[object Array]') { if (this.multiple && Array.isArray(val)) {
this.$nextTick(() => { this.$nextTick(() => {
this.resetInputHeight(); this.resetInputHeight();
}); });
......
packages/theme-default/src/spinner.css
View file @ cf16180a
...@@ -2,6 +2,11 @@ ...@@ -2,6 +2,11 @@
@import "./common/var.css"; @import "./common/var.css";
@component-namespace el { @component-namespace el {
@b time-spinner {
display: flex;
width: 100%;
}
@b spinner { @b spinner {
display: inline-block; display: inline-block;
vertical-align: middle; vertical-align: middle;
...@@ -10,13 +15,13 @@ ...@@ -10,13 +15,13 @@
animation: rotate 2s linear infinite; animation: rotate 2s linear infinite;
width: 50px; width: 50px;
height: 50px; height: 50px;
& .path { & .path {
stroke: #ececec; stroke: #ececec;
stroke-linecap: round; stroke-linecap: round;
animation: dash 1.5s ease-in-out infinite; animation: dash 1.5s ease-in-out infinite;
} }
} }
} }
@keyframes rotate { @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