1.选择月份范围
代码如下:
<el-date-picker v-model="value" type="monthrange" align="right" unlink-panels range-separator="至"start-placeholder="开始月份" end-placeholder="结束月份" :picker-options="pickerOptions"></el-date-picker>
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.选择日期范围
代码如下:
<el-date-picker v-model="value" type="daterange" align="right" unlink-panels range-separator="至"start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions"></el-date-picker>
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: '',