The elementUI date component specifies several time periods to disable

Effect:

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=" start date" End-placeholder =" end date "class="scm-date-editor date-picker"/>Copy the code