VUE element ＜el-date-picker＞ 带快捷选项

可在一个选择器中便捷地选择一个时间范围

    <div style="width: 360px">
         <el-date-picker
           v-model="value"
           @change="setDate"
           type="daterange"
           format="yyyy-MM-dd"
           :picker-options="pickerOptions"
           style="width: 80%;"
           start-placeholder="开始日期"
           end-placeholder="结束日期"
         >
         </el-date-picker>
      </div>

return {
        pickerOptions: {
          shortcuts: [
            {
              text: "本周",
              onClick(picker) {
                // 获取今天
                const end = new Date();
                // 获取当前周的第一天
                const start = new Date(
                  end.getFullYear(),
                  end.getMonth(),
                  end.getDate() - ((end.getDay() + 6) % 7)
                );
                start.setTime(start.getTime());
                picker.$emit("pick", [start, end]);
              },
            },
            {
              text: "上周",
              onClick(picker) {
                const dataValue = new Date();
                const year = dataValue.getFullYear();
                const month = dataValue.getMonth() + 1;
                const day = dataValue.getDate();
                var thisWeekStart; //本周周一的时间
                if (dataValue.getDay() == 0) {
                  //周天的情况；
                  thisWeekStart =
                    new Date(year + "/" + month + "/" + day).getTime() -
                    (dataValue.getDay() + 6) * 86400000;
                } else {
                  thisWeekStart =
                    new Date(year + "/" + month + "/" + day).getTime() -
                    (dataValue.getDay() - 1) * 86400000;
                }
                const prevWeekStart = thisWeekStart - 7 * 86400000; //上周周一的时间
                const prevWeekEnd = thisWeekStart - 1 * 86400000; //上周周日的时间
                const start = new Date(prevWeekStart); //开始时间
                const end = new Date(prevWeekEnd); //结束时间
                picker.$emit("pick", [start, end]);
              },
            },
            {
              text: "本月",
              onClick(picker) {
                const end = new Date();
                // 获取当前月的第一天
                const start = new Date(end.getFullYear(), end.getMonth(), 1);
                start.setTime(start.getTime());
                picker.$emit("pick", [start, end]);
              },
            },
            {
              text: "上个月",
              onClick(picker) {
                const oDate = new Date();
                var year = oDate.getFullYear();
                var month = oDate.getMonth();
                var start, end;
                if (month == 0) {
                  year--;
                  start = new Date(year, 11, 1);
                  end = new Date(year, 11, 31);
                } else {
                  start = new Date(year, month - 1, 1);
                  end = new Date(year, month, 0);
                }
                picker.$emit("pick", [start, end]);
              },
            },
            {
              text: '今年至今',
              onClick(picker) {
                const end = new Date();
                const start = new Date(new Date().getFullYear(), 0);
                end.setDate(end.getDate()+1);
                picker.$emit('pick', [start, end]);
              }
            },{
              text: '去年',
              onClick(picker) {
                var year = new Date().getFullYear()-1;
                const end = year+'-12-31 23:59:59';
                const start = year+'-01-01 00:00:00';
                picker.$emit('pick', [start, end]);
              }
            },
          ],
          disabledDate: (time) => {
            return time.getTime() > Date.now();
          },
        },
}