Element UI DatePicker 日期范围选择动态设置禁选日期

今天在工作时，后端提出了一个DatePicker日期范围组件的一个问题 用图描述大概就是选择开始日期 13 号后，只能选择 13 号前一周和后一周的日期，其他日期处于禁止选择状态。

先去看了下 element 的相关文档，找到了一个当前时间日期选择器特有的选项picker-options，传送门

根据这个回调函数可以拿到点击的开始时间是，然后根据点击的开始时间在picker-options中disabledDate中处理需禁用的日期，由于这个日期是动态不确定的，所以将picker-options放在computed里面去处理，大致下面这个样子，可以获取到data中的数据

1.  
   computed: {
2.  
   pickerOptions() {
3.  
   let _this = this
4.  
   return {
5.  
   disabledDate(time) {
6.  
   const times = 86400000 * 7 //一周的毫秒数
7.  
   let curSelectTime = new Date(_this.minDate).getTime()
8.  
   let before = curSelectTime - times //前一周三年毫秒数
9.  
   return time.getTime() > after || time.getTime() < before
10.  
    },
11.  
    onPick({ maxDate, minDate }) {
12.  
    console.log('minDate', minDate)
13.  
    console.log('maxDate', maxDate)
14.  
    if (!maxDate) {
15.  
    console.log(123)
16.  
    _this.minDate = minDate
17.  
    }
18.  
    }
19.  
    }
20.  
    }
21.  
    },