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: '',