element ui 时间控件DateTimePicker动态限制时间范围为固定时间

需求简介

时间控件开始日期到结束日期是一个固定时间，例如30天，选中开始时间为15号，截止日期为从开始时间向后30天，其余的禁止选择。

效果截图

代码块

// html
<el-date-picker
	v-model="query.cdate"
	type="daterange"
	range-separator="-"
	value-format="yyyy-MM-dd"
	:editable="false"
	:picker-options="pickerOptions"
>
</el-date-picker>

// js
data(){
  return {
     selectData: '',
     pickerOptions: {
      // 点击时，选择的是开始时间，也就是minDate
      onPick: ({ maxDate, minDate }) => {
         this.selectData = minDate.getTime()
         if (maxDate) {
           // 解除限制
           this.selectData = ''
         }
      },
      disabledDate: (time) => {
          // 是否限制的判断条件
          if (!this.isNull(this.selectData)) {
            var date = new Date(this.selectData)
            // 这里就是限制的关键，大于或者小于开始时间之后30天的日期被禁用
			return (
                   date.getTime() > new Date(time).getTime() ||
                   date.getTime() < new Date(time).getTime() - 30 * 3600 * 24 * 1000
                    );
          } else {
            return false
          }
        }
     }
  }
},
methods:{
  // 检查是否为空
  isNull(value) {
    if (value) {
      return false
    }
    return true
  }
}