elementui 日期组件指定几个时间段禁用

936 阅读1分钟

效果:

disableTime = [
    {
        "start_date": "2021-04-25",
        "end_date": "2021-04-30"
    },
    {
        "start_date": "2021-04-24",
        "end_date": "2021-04-24"
    },
    {
        "start_date": "2021-04-16",
        "end_date": "2021-04-23"
    },
    {
        "start_date": "2021-04-10",
        "end_date": "2021-04-10"
    },
    {
        "start_date": "2021-04-03",
        "end_date": "2021-04-09"
    },
    {
        "start_date": "2021-04-01",
        "end_date": "2021-04-02"
    }
]

 protected pickerOptions = {    disabledDate: (time: any) => {      console.log("ppp",this.disableTime)      // if (this.endDate) {    let disabled = false      for (let i = 0; i < this.disableTime.length; i++) {        const element = this.disableTime[i]        if (time.getTime() >= new Date(`${element.start_date} 00:00:00`) && time.getTime() <= new Date(element.end_date)) {          disabled = true          break        }      }      return disabled    }  }

<el-date-picker       :picker-options="pickerOptions"          value-format="yyyy-MM-dd"          type="daterange"          range-separator="-"          start-placeholder="开始日期"          end-placeholder="结束日期"          class="scm-date-editor date-picker"/>