这个图片效果，禁用好几个时间段。这个一个童鞋私信问我的一个问题。

当时第一下觉得以前都是禁用一个时间段。。那么现在禁用多个就把条件判断写好啊。

<el-date-picker

      v-model="value2"

      type="date"

      placeholder="选择日期时间"

      align="right"

      @focus="changeEnd"

      :picker-options="pickerOptions">

    </el-date-picker>

 

addForm:{

                    date1:'2020-09-02',

                    date2:'2020-09-04',

                    date3:'2020-09-10',

                    date4:'2020-09-15',

                    date5:'2020-09-21',

                    date6:'2020-09-22',

                },

                pickerOptions: {  

                    disabledDate:(time)=>{

                       return(time.getTime() > new Date(this.addForm.date1).getTime()&&time.getTime() < new Date(this.addForm.date2).getTime())|| (time.getTime() > new Date(this.addForm.date3).getTime()&&time.getTime() < new Date(this.addForm.date4).getTime())|| (time.getTime() > new Date(this.addForm.date5).getTime()&&time.getTime() < new Date(this.addForm.date6).getTime());

  }     

                },

                value2: '',

 三个时间段，用||链接。这样写了判断条件。然后测试一下是好的。

问题1.

但是如果你的组件是type=daterange。选择的直接选择时间段的话，还是有问题。比如上面禁用了22号，如果你现在开始日期选择19。结束日期选择23.的确这两个都是可选的日期、但是作为时间段的话肯定是不行的。

因此对于需要选择时间段的情况。写两个type=date。然后分别限制就可以了。

 

问题2.

如果禁用的日期是接口给的，怎么改呢？

你可以在el-date-picker里面写个@focus="getDisabledData"

然后再methods里面接口返回了日期之后这样写

 this.pickerOptions=Object.assign({},this.pickerOptions,{

                   disabledDate:(time)=>{

                       return(time.getTime() > new Date(this.addForm.date1).getTime()&&time.getTime() < new Date(this.addForm.date2).getTime())||(time.getTime() > new Date(this.addForm.date3).getTime()&&time.getTime() < new Date(this.addForm.date4).getTime())||(time.getTime() > new Date(this.addForm.date5).getTime()&&time.getTime() < new Date(this.addForm.date6).getTime());

                   }

               })