element时间范围选择的快捷键：最近一周、最近三个月、最近半年官网的demo上已经有了，最近我们需要去快速点击显示：本月、上月、上上月的日期，记录一下方便后期查询：
html部分1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16<el-date-picker
size="small"
v-model="timeList"
format="yyyy-MM-dd"
value-format="timestamp"
type="daterange"
range-separator="至"
@change="changeTime"
align="right"
unlink-panels
time-arrow-control
:picker-options="pickerOptions"
:clearable="false"
start-placeholder="开始日期"
end-placeholder="结束日期">
</el-date-picker>
主要逻辑是写在pickerOptions里的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
39data(){
return{
pickerOptions: {
shortcuts: [{
text: '本月',
onClick(picker) {
const end =new Date();
end.setTime(end.getTime() -3600 *1000 *24 + 86400000);
const start = new Date(new Date().getFullYear(),new Date().getMonth(),1);
picker.$emit('pick', [start,end]);
}
},
{
text: '上月',
onClick(picker) {
var now =new Date();//当前日期
var nowYear =now.getYear();//当前年
nowYear += (nowYear <2000) ?1900 :0;
var lastMonthDate =new Date();//上月日期
lastMonthDate.setDate(1);
lastMonthDate.setMonth(lastMonthDate.getMonth() -1);
var lastMonth =lastMonthDate.getMonth();
//获得某月天数
var monthStartDate =new Date(nowYear,lastMonth,1);
var monthEndDate =new Date(nowYear,lastMonth +1,1);
var days = (monthEndDate -monthStartDate) / (1000 *60 *60 *24);
const start =new Date(nowYear,lastMonth,1);
const end =new Date(nowYear,lastMonth,days);
picker.$emit('pick', [start,end]);
}
}],
disabledDate(time) {
let curDate = (new Date()).getTime();
let start = (new Date(new Date().getFullYear(),new Date().getMonth(),1)).getTime();
return time.getTime() > Date.now() || time.getTime() < start;
},
},
}
}
同时的可选范围变成了仅可选择当月日期，其他的日期不可选也做了限制。