element -- datepicker 设置可选范围

关于elementUI插件，使用起来是很方便，但是有时候产品的需求导致需要自定义一些配置参数。

就比如：

1. 日期选择框设置选择范围为 2021-11-30 之后的日期为可选择，之前的为禁用状态
2. 添加宽街配置项： 今日、昨日

实现之后的效果如下：
红色框里是无法选择的，就算往前翻到11月也是无法选择

代码：

<template>
	<el-date-picker
          v-model="searchDate"
          type="daterange"
          align="right"
          unlink-panels
          ref="datePicker"
          :clearable="false"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          @change="chooseDate"
          :picker-options="pickerOptions"
        ></el-date-picker>
</template>
<script>
import moment from "moment";
export default {
	data() {
		return {
		      searchDate: [], // datepicker绑定的值
		      startToday: moment("2021-11-30"), // 判断是否可以选择的参照
		      today: moment().format("YYYY-MM-DD"), // 今天
		      yesterday: moment()
		        .subtract(1, "d")
		        .format("YYYY-MM-DD"), // 昨天
		      pickerOptions: { // datepicker 配置参数
		        disabledDate: time => { // 进行判断是否可以选择 还是 禁用
		          return !moment(time).isAfter(this.startToday); // 判断是否禁用日期 更多API可查找momentjs官网
		        },
		        shortcuts: [
		          {
		            text: "昨天",
		            onClick: picker => {
		              this.changeDate(this.yesterday);
		              this.$refs["datePicker"].handleClose(); // 关闭日期选择框
		            }
		          },
		          {
		            text: "今天",
		            onClick: picker => {
		              this.changeDate(this.today);
		              this.$refs["datePicker"].handleClose(); // 关闭日期选择框
		            }
		          }
		        ]
		      },
		}
	},
	  methods: {
	    //通过点击昨天、今天快捷选项 配置选择日期
	    changeDate(date) {
	      this.searchDate = [date, date];
	    },
	},
}
</script>

---

---

至此，满足了需求。over！！