先对组件进行渲染
<el-date-picker
v-model="callTime"
type="datetimerange"
:picker-options="pickerOptions"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
align="right"
@change="getTimeList"
>
</el-date-picker>
pickerOptions: {
shortcuts: [
{
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]);
},
},
],
},
!!!动态绑定的数据一定要是数组形式的callTime: [],callTime: ""会报错
数据设置:开始时间 结束时间
var data = JSON.stringify({
startDate: this.callTime[0],
endDate: this.callTime[1],
});
设置默认时间为上个月
created() {
// 设置默认时间为上个月
var now = new Date();
var year = now.getFullYear(); //得到当前年份
var month = now.getMonth(); //默认得到月份是上一个月,如果当前是3月,这个值为2月
if (month == 12)
//如果当前是1月,则获取到的数据为12月,年份减一
year = year - 1;
var nextMonth = month + 1; //其实就是当前月份
month = month.toString().padStart(2, "0"); //当小于10时,显示为01.02.03
nextMonth = nextMonth.toString().padStart(2, "0");
this.startDate = `${year}-${month}-01`; //拼接日期
this.endDate = `${year}-${nextMonth}-01`;
// console.log(this.startDate + " " + this.endDate);
this.callTime[0] = this.startDate;
this.callTime[1] = this.endDate;
this.getTimeList(); //调用方法查询指定时间段内的数据
},