element DatePicker 快捷选择 昨日 今日 近一周 近30天 近一年 ；并且限制范围

效果图：

<el-date-picker
  size="small"
  v-model="time"
  type="daterange"
  :picker-options="pickerOptions"
  format="yyyy-MM-dd"
  value-format="yyyy-MM-dd"
  range-separator="至"
  start-placeholder="开始日期"
  end-placeholder="结束日期"
  align="right">
</el-date-picker>

data(){
	return{
	     time:[],
		 startTime:'2021-06-29',
      	 endTime:'2021-07-07',
		 pickerOptions: {
          disabledDate: (time) => {
                let beginDate = new Date(this.startTime)
                let endDate = new Date(this.endTime)
                return time.getTime() > endDate.getTime() || time.getTime() < beginDate.getTime()
          },
          shortcuts: [
          {
            text: '昨日',
            onClick(picker) {
              const end = new Date();
              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
              end.setHours(23);end.setMinutes(59);end.setSeconds(59);
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
              start.setHours(0);start.setMinutes(0);start.setSeconds(0);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '今日',
            onClick(picker) {
              const end = new Date();
              end.setTime(end.getTime());
              end.setHours(end.getHours());
              end.setMinutes(end.getMinutes());
              end.setSeconds(end.getSeconds());
              const start = new Date();
              start.setTime(start.getTime());
              start.setHours(0);start.setMinutes(0);start.setSeconds(0);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近一周',
            onClick(picker) {
              const end = new Date();
              end.setHours(23);end.setMinutes(59);end.setSeconds(59);
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              start.setHours(0);start.setMinutes(0);start.setSeconds(0);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近30天',
            onClick(picker) {
              const end = new Date();
              end.setHours(23);end.setMinutes(59);end.setSeconds(59);
              const start = new Date();
              start.setHours(0);start.setMinutes(0);start.setSeconds(0);
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 29);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近90天',
            onClick(picker) {
              const end = new Date();
              end.setHours(23);end.setMinutes(59);end.setSeconds(59);
              const start = new Date();
              start.setHours(0);start.setMinutes(0);start.setSeconds(0);
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '最近一年',
            onClick(picker) {
              const end = new Date();
              end.setHours(23);end.setMinutes(59);end.setSeconds(59);
              const start = new Date();
              start.setHours(0);start.setMinutes(0);start.setSeconds(0);
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 365);
              picker.$emit('pick', [start, end]);
            }
          },
          ],
      },
	}
}