element UI 日期选择器禁用指定范围日期【关键点】

比如我们需要做到只能选择当前用户选择第一个日期的前后7天的范围

查看官网，只需配置picker-options对象中的disabledDate和onPick

代码如下

<el-date-picker
	v-model="statisticalCycle"
	type="daterange"
	placeholder="请选择统计周期"
	range-separator="至"
	start-placeholder="开始日期"
	end-placeholder="结束日期"
	:picker-options="pickerOptions"
	@change="changeDate"
	></el-date-picker>

pickerOptions: {
   disabledDate:(time)=>{
     if(this.pickerMinDate){
       let preSevenday = this.pickerMinDate.getTime() - 24 * 60 * 60 * 1000 * 7;
       let nextSeventyday = this.pickerMinDate.getTime() + 24 * 60 * 60 * 1000 * 7;
       return time.getTime() < preSevenday || time.getTime() > nextSeventyday
     }
   },
   onPick:(time)=>{
     this.pickerMinDate = time.minDate;
     if(time.maxDate){
       this.pickerMinDate = null;
     }
   }
 }

注意：disabledDate和onPick需要写成箭头函数
如果写成onPick:function(time) {}这种形式，拿到的this是Vue实例
只有箭头函数的this拿到的才是VueComponent实例
二者关系：VueComponent.prototype.__ proto__ === Vue.prototype
二者区别：Vue实例用于管理整个应用程序，而VueComponent用于定义和创建可复用的组件。