element ui时间组件控制可选范围

在vue项目中，对时间控件有特殊需求时，比如说选择当前时刻之前，当前时刻之后，需要自己手动设置。

示例效果：

当row.backlogItem == "A"，选当前时刻之前，否则选当前时刻之后

<el-form-item label="生效时间" prop="takeEffectTime">
    <el-date-picker
        v-model="form.takeEffectTime"
        default-time="00:00:00"
        value-format="yyyy-MM-dd HH:mm:ss"
        format="yyyy-MM-dd HH:mm"
        type="datetime"
        placeholder="选择生效时间"
        :picker-options="row.backlogItem == 'A'?pickerOptionsStart1:pickerOptionsStart">
    </el-date-picker>
</el-form-item>
<el-form-item label="失效时间" prop="endEffectTime">
    <el-date-picker
        v-model="form.endEffectTime"
        default-time="23:59:59"
        value-format="yyyy-MM-dd HH:mm:ss"
        format="yyyy-MM-dd HH:mm"
        type="datetime"
        placeholder="选择失效时间"
        :picker-options="row.backlogItem == 'A'?pickerOptionsEnd1:pickerOptionsEnd">
     </el-date-picker>
</el-form-item>

data(){
    return{
        pickerOptionsStart: {
        disabledDate: time => {
          if (this.form.endEffectTime) {
            return (
              time.getTime() < Date.now() - 8.64e7 ||
              time.getTime() > new Date(this.form.endEffectTime).getTime()  /*开始日期要在选择的结束日期之前*/
            );
          }
          return time.getTime() < Date.now() - 8.64e7; /*今天及以后*/
        },
        selectableRange:"00:00:00 - 23:59:59"
      },
      pickerOptionsEnd: {
        disabledDate: time => {
          if (this.form.takeEffectTime) {
            if(this.moment(this.form.takeEffectTime).format("HH:mm:ss") == "00:00:00"){
              return (
                time.getTime() < new Date(this.form.takeEffectTime).getTime() /*结束日期要在选择的开始日期之后*/
              );
            }else{
              return (
                time.getTime() < new Date(this.form.takeEffectTime).getTime() - 60*60*24*1000 /*结束日期要在选择的开始日期之后*/
              );
            }
          }
          return time.getTime() < Date.now() - 8.64e7; /*今天及以后*/
        },
        selectableRange:"00:00:00 - 23:59:59"
      },
      pickerOptionsStart1:{
        disabledDate: time => {
          if (this.form.endEffectTime) {
            return (
              time.getTime() > Date.now() - 8.64e6 ||
              time.getTime() > new Date(this.form.endEffectTime).getTime()  /*开始日期要在选择的结束日期之前*/
            );
          }
          return time.getTime() > Date.now() - 8.64e6; /*今天及以前*/
        },
        selectableRange:"00:00:00 - 23:59:59"
      },
      pickerOptionsEnd1:{
        disabledDate: time => {
          if (this.form.takeEffectTime) {
            if(this.moment(this.form.takeEffectTime).format("HH:mm:ss") == "00:00:00"){
              return (
                time.getTime() < new Date(this.form.takeEffectTime).getTime() /*结束日期要在选择的开始日期之后*/
              );
            }else{
              return (
                time.getTime() < new Date(this.form.takeEffectTime).getTime() - 60*60*24*1000 /*结束日期要在选择的开始日期之后*/
              );
            }
          }
          return time.getTime() > Date.now() - 8.64e6; /*今天及以前*/
        }
      },
    }
},
watch:{
    "form.takeEffectTime":{ //需要对绑定的时间进行监听
      handler(newValue, oldValue) {
        if(this.row.backlogItem == 'A'){ //此刻时间之后不可选
          if (newValue) {
            let date = new Date();//当前时间
            let min = date.getMinutes();//当前时间的分
            date.setMinutes(min);
            let nowDate = this.moment(date).format("HH:mm:ss");//当前时分秒
            let end = "";
            //生效日期是否是当天
            if (this.moment(date).format("yyyy-MM-DD") === this.moment(newValue).format("yyyy-MM-DD")) {
              //有无失效日期
              if(this.form.endEffectTime){
                let endTime = new Date(this.form.endEffectTime);
                end = this.moment(endTime).format("HH:mm:ss");
              }else{
                let hh1 = this.moment(newValue).format("HH:mm:ss")
                //判断选择时间是否大于当前时间，如果大于当前时间就默认为当前时间
                if(hh1 >= nowDate) {
                  let seconds = nowDate.split(":");
                  seconds = `${seconds[0]}:${seconds[1]}:00`
                  this.form.takeEffectTime = `${this.moment(date).format("yyyy-MM-DD")} ${seconds}`;
                }
                end = nowDate;
              }
            } else {
              // this.form.takeEffectTime = `${this.moment(newValue).format("yyyy-MM-DD")} 00:00:00`;
              if(!!oldValue){
                if(this.moment(newValue).format("yyyy-MM-DD") != this.moment(oldValue).format("yyyy-MM-DD")){
                  this.form.takeEffectTime = `${this.moment(newValue).format("yyyy-MM-DD")} 00:00:00`;
                }
              }else{
                this.form.takeEffectTime = `${this.moment(newValue).format("yyyy-MM-DD")} 00:00:00`;
              }
              //有无失效日期
              if(this.form.endEffectTime){
                let endTime = new Date(this.form.endEffectTime);
                //有失效日期，判断生效日期和失效日期是否是同一天
                if(this.moment(endTime).format("yyyy-MM-DD") === this.moment(newValue).format("yyyy-MM-DD")){
                  end = this.moment(endTime).format("HH:mm:ss");
                }else{
                  end = "23:59:59";
                }
              }else{
                end = "23:59:59";
              }
            }
            this.pickerOptionsStart1.selectableRange = `00:00:00 - ${end}`;
            this.pickerOptionsStart1 = this.pickerOptionsStart1;
          }
        }else{
          if (newValue) {
            let date = new Date();//当前时间
            let min = date.getMinutes();//当前时间的分
            date.setMinutes(min);
            let nowDate = this.moment(date).format("HH:mm:ss");//当前时分秒
            let st = "";
            if (this.moment(date).format("yyyy-MM-DD") === this.moment(newValue).format("yyyy-MM-DD")) {
              let hh1 = this.moment(newValue).format("HH:mm:ss")
              if(this.action == "重录"){
                if(hh1 <= nowDate) {
                  let seconds = nowDate.split(":");
                  seconds = `${seconds[0]}:${seconds[1]}:00`
                  this.form.takeEffectTime = `${this.moment(date).format("yyyy-MM-DD")} ${seconds}`;
                }
              }
              st = nowDate;
            } else {
              if(!!oldValue){
                if(this.moment(newValue).format("yyyy-MM-DD") != this.moment(oldValue).format("yyyy-MM-DD")){
                  this.form.takeEffectTime = `${this.moment(newValue).format("yyyy-MM-DD")} 00:00:00`;
                }
              }else{
                this.form.takeEffectTime = `${this.moment(newValue).format("yyyy-MM-DD")} 00:00:00`;
              }
              st = "00:00:00";
            }
            let endDate = "-23:59:59";
            if(this.form.endEffectTime){
              let endTime = new Date(this.form.endEffectTime);
              if(this.moment(endTime).format("yyyy-MM-DD") === this.moment(newValue).format("yyyy-MM-DD")){
                endDate = `-${endTime.getHours()}:${endTime.getMinutes()}:59`
              }
            }
            this.pickerOptionsStart.selectableRange = st + endDate;
            this.pickerOptionsStart = this.pickerOptionsStart;
          }
        }
      },
      deep: true,
      immediate: true,
    },
    "form.endEffectTime":{ //需要对绑定的时间进行监听
      handler(newValue, oldValue) {
        console.log(newValue,oldValue)
        if(this.row.backlogItem == 'A'){ //此刻时间之后不可选
          if(newValue){
            let date = new Date();
            let min = date.getMinutes();//当前时间的分
            date.setMinutes(min);
            let nowDate = this.moment(date).format("HH:mm:ss");//当前时分秒
            let st = "";
            let end = "";
            //判断失效日期是否在当天
            if (this.moment(date).format("yyyy-MM-DD") === this.moment(newValue).format("yyyy-MM-DD")) {
              let hh1 = this.moment(newValue).format("HH:mm:ss"); //选择的时间时分秒
              if(this.form.takeEffectTime){
                let hh2 = this.moment(this.form.takeEffectTime).format("HH:mm:ss"); //生效时间时分秒
                if(hh1 >= nowDate || hh1 <= hh2) {
                  let seconds = nowDate.split(":");
                  seconds = `${seconds[0]}:${seconds[1]}:00`
                  this.form.endEffectTime = `${this.moment(date).format("yyyy-MM-DD")} ${seconds}`;
                }
              }else{
                if(hh1 >= nowDate) {
                  let seconds = nowDate.split(":");
                  seconds = `${seconds[0]}:${seconds[1]}:00`
                  this.form.endEffectTime = `${this.moment(date).format("yyyy-MM-DD")} ${seconds}`;
                }
              }
              
              end = nowDate;
            } else {
              if(!!oldValue){
                if(this.moment(newValue).format("yyyy-MM-DD") != this.moment(oldValue).format("yyyy-MM-DD")){
                  this.form.endEffectTime = `${this.moment(newValue).format("yyyy-MM-DD")} 23:59:59`;
                }
              }else{
                this.form.endEffectTime = `${this.moment(newValue).format("yyyy-MM-DD")} 23:59:59`;
              }
              end = "23:59:59";
            }

            // //判断是否存在生效日期
            if(this.form.takeEffectTime){
              let startTime = new Date(this.form.takeEffectTime);
              if(this.moment(startTime).format("yyyy-MM-DD") === this.moment(newValue).format("yyyy-MM-DD")){
                st = this.moment(startTime).format("HH:mm:ss");
              }else{
                st = "00:00:00";
              }
            }else{
              st = "00:00:00";
            }
            console.log(`${st} - ${end}`)
            // this.pickerOptionsEnd1.selectableRange = `${st}-${end}`;
            // this.pickerOptionsEnd1 = this.pickerOptionsEnd1;

          }
        }else{
          if (newValue) {
            let date;
            if (this.form.takeEffectTime) {
              date = new Date(this.form.takeEffectTime);//生效时间
            }else{
              date = new Date();//当前时间
            }
            let min = date.getMinutes();//当前时间的分
            date.setMinutes(min);
            let nowDate = this.moment(date).format("HH:mm:ss");//当前时分秒
            let st = "";
            if (this.moment(date).format("yyyy-MM-DD") === this.moment(newValue).format("yyyy-MM-DD")) {
              let hh1 = this.moment(newValue).format("HH:mm:ss")
              if(this.action == "重录"){
                if(hh1 <= nowDate) {
                  this.form.endEffectTime = `${this.moment(date).format("yyyy-MM-DD")} 23:59:59`;
                }
              }
              st = nowDate;
            } else {
              if(!!oldValue){
                if(this.moment(newValue).format("yyyy-MM-DD") != this.moment(oldValue).format("yyyy-MM-DD")){
                  this.form.endEffectTime = `${this.moment(newValue).format("yyyy-MM-DD")} 23:59:59`;
                }else{
                  if(this.moment(newValue).format("HH:mm:ss") == "00:00:00" && this.moment(oldValue).format("HH:mm:ss") == "23:59:59"){
                    this.form.endEffectTime = `${this.moment(newValue).format("yyyy-MM-DD")} 23:59:59`;
                  }
                }
              }else{
                this.form.endEffectTime = `${this.moment(newValue).format("yyyy-MM-DD")} 23:59:59`;
              }
              st = "00:00:00";
            }
            this.pickerOptionsEnd.selectableRange = st + "-23:59:59";
            this.pickerOptionsEnd = this.pickerOptionsEnd;
          }
        }
        
      },
      deep: true,
      immediate: true,
    }
  },