el-date-picker中自定义快捷选项picker-options，动态设置禁用日期

1.需求

在table表格中，有后端传回的List，每一条list数据中都有一个发生日期occur_time，点击报告延期出现历史记录对话框，点击申请延期后除开一个填写信息的对话框。用户可以选择的计划完日期只能是当前这个list中发生日期再加30天之后的日期，因此要在picker-options中设置disabledDate。

2.实现代码

<el-date-picker
   v-model="delayItem.plan_date"
   align="right"
   type="date"
   format="yyyy-MM-dd"
   value-format="yyyy-MM-dd"
   placeholder="请选择计划完成日期"
   :picker-options="pickerOptions"
>
</el-date-picker>

因为后端返回的analysis_occure_time时间格式是2021/12/20，所以要使用replaceAll（）转换成2022-12-20。

new Date（ ）返回的是是中国标准格式的数据

使用 setDate（）直接计算出发生日期加30天后的日期，如果需要计算某个日期前多少天直接减去天数就可以

data(){
  return{
    delayItem:{},
    pickerOptions: {}
  }
},
methods:{ 
   //申请延期按钮的click事件，打开填写延期申请信息的对话框 
   openDelay(row) {
     this.pickerOptions = {};
     this.delayReport = row;
     this.delayDialogFormVisible = true;
     //计算日期  analysis_occure_time格式是2021/12/20 需要转成 2021-12-20
     let occure_time = this.delayReport.analysis_occure_time.replaceAll('/', '-');
     let dateDis = new Date(occure_time);//new Date（）返回中国标准时间格式
     dateDis.setDate(dateDis.getDate() + 30); //计划日期加30天
     this.pickerOptions = {
        disabledDate(time) {
          return time.getTime() < new Date(dateDis).getTime();
        },
      }
   },
}

 disabledDate(time){  }中设置禁用日期，time.getTime的时间格式是一个时间戳，所以设置的禁用日期格式也要通过 new Date( dateDis).getTime()转换成时间戳的格式，要保证比较的两个时间格式是一致的。