elementui限制日期控件选择范围

最近有个需求： 日期选择范围需要有个时间区间，如下图所示：

图一：

图二：

图二的选择范围需要在图一的时间周期内选择

文档

html代码：

<el-form-item label="时间:">
          <el-date-picker
            v-model="dateValue"
            size="small"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            value-format="yyyy-MM-dd"
            :clearable="true"
            @change="dateChange"
            :picker-options="pickerOptions"
          >
          </el-date-picker>
 </el-form-item>

js代码：

 pickerOptions: {
        disabledDate: (time) => {
          if (this.queryParams.reportId == '') {
            return false;
          } else {
            let currentDate = this.dateList.filter((element) => {
              return this.queryParams.reportId == element.reportId;
            });
            let startTime = currentDate[0].startTime;
            let endTime = currentDate[0].endTime;
            return !(
              time.getTime() > new Date(startTime).getTime() - 8.64e7 &&
              time.getTime() < new Date(endTime).getTime()
            );
          }
        },
  },