1.选择月份范围
代码如下:
html
<el-date-picker v-model="value" type="monthrange" align="right" unlink-panels range-separator="至"
start-placeholder="开始月份" end-placeholder="结束月份" :picker-options="pickerOptions">
</el-date-picker>
javascript
pickerOptions: {
shortcuts: [{
text: '本月',
onClick(picker) {
picker.$emit('pick', [new Date(), new Date()]);
}
}, {
text: '上个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setMonth(start.getMonth() - 1);
picker.$emit('pick', [start, end]);
}
}, {
text: '上季度',
onClick(picker) {
const end = new Date();
const month = end.getMonth();
let start = new Date();
// 计算上一个季度的开始和结束日期
if (month >= 0 && month <= 2) { // 第一季度
start.setFullYear(end.getFullYear() - 1, 9, 1);
end.setFullYear(end.getFullYear() - 1, 11, 31);
} else if (month >= 3 && month <= 5) {
start.setFullYear(end.getFullYear(), 0, 1);
end.setFullYear(end.getFullYear(), 2, 31);
} else if (month >= 6 && month <= 8) {
start.setFullYear(end.getFullYear(), 3, 1);
end.setFullYear(end.getFullYear(), 5, 30);
} else { // 第四季度
start.setFullYear(end.getFullYear(), 6, 1);
end.setFullYear(end.getFullYear(), 8, 30);
}
picker.$emit('pick', [start, end]);
}
}]
},
value: ''
2.选择日期范围

代码如下:
html
<el-date-picker v-model="value" type="daterange" align="right" unlink-panels range-separator="至"
start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
</el-date-picker>
javascript
pickerOptions: {
shortcuts: [{
text: '本月',
onClick(picker) {
picker.$emit('pick', [new Date(), new Date()]);
}
}, {
text: '上个月',
onClick(picker) {
const end = new Date();
const start = new Date();
start.setMonth(start.getMonth() - 1);
start.setDate(1);
end.setMonth(end.getMonth() - 1);
end.setMonth(end.getMonth() + 1, 0);
picker.$emit('pick', [start, end]);
}
}, {
text: '上季度',
onClick(picker) {
const end = new Date();
const month = end.getMonth();
let start = new Date();
if (month >= 0 && month <= 2) {
start.setFullYear(end.getFullYear() - 1, 9, 1);
end.setFullYear(end.getFullYear() - 1, 11, 31);
} else if (month >= 3 && month <= 5) {
start.setFullYear(end.getFullYear(), 0, 1);
end.setFullYear(end.getFullYear(), 2, 31);
} else if (month >= 6 && month <= 8) {
start.setFullYear(end.getFullYear(), 3, 1);
end.setFullYear(end.getFullYear(), 5, 30);
} else {
start.setFullYear(end.getFullYear(), 6, 1);
end.setFullYear(end.getFullYear(), 8, 30);
}
picker.$emit('pick', [start, end]);
}
}]
},
value: '',