在同一个选择器里选择日期和时间
见DateTimePicker 日期时间选择器 (opens new window)
<el-date-picker
v-model="listQuery.date"
type="datetimerange"
:picker-options="pickerOptions"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
align="right"
style="width: 100%;"
/>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
# 快捷选择
pickerOptions: {
shortcuts: [
{
text: '今天',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setHours(0)
start.setMinutes(0)
start.setSeconds(0)
picker.$emit('pick', [start, end])
}
},
{
text: '最近一周',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
picker.$emit('pick', [start, end])
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
picker.$emit('pick', [start, end])
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date()
const start = new Date()
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
picker.$emit('pick', [start, end])
}
}]
// disabledDate: (time) => {
// const before = new Date()
// before.setFullYear(before.getFullYear() - 1)
// // return time.getTime() < before.getTime() || time.getTime > Date.now
// return time.getTime() < before || time.getTime() > new Date()
// }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45