el-date-picker 设置时间限定选择

Element UI 提供了 DateTimePicker 日期时间选择器组件，极大的方便了日期时间的选择。

DateTimePicker 提供了 picker-options 属性，可以让我们自行控制可选的日期

1. 禁止选择今天以前的日期时间

   <el-date-picker
     v-model="date"
     type="datetime"
     :picker-options="pickerOptions"
     format="yyyy-MM-dd HH:mm:ss"
     value-format="yyyy-MM-dd HH:mm:ss"
     placeholder="选择日期时间"
   >
   

   export default {
     data(){
       return {
         date: '',
         pickerOptions: {
           disabledDate: (time) => {
             return time.getTime() < Date.now() - 8.64e7
           }
         }
       }
     }
    }
   

2. 禁止选择周六周日

   export default {
     data(){
       return {
         date: '',
         pickerOptions: {
           disabledDate: (time) => {
             return time.getDay() == 0 || time.getDay() == 6
           }
         }
       }
     }
    }
   

3. 禁止选择今天以前的日期时间及周六日

   export default {
     data(){
       return {
         date: '',
         pickerOptions: {
           disabledDate: (time) => {
             return time.getTime() < (Date.now() - 8.64e7) || time.getDay() == 0 || time.getDay() == 6
           }
         }
       }
     }
    }
   

4. 禁止选择法定节假日，禁止选择周六日，并排除需要调休的日子

   法定节假日这个需要做个日历维护的，这里图省事就直接在项目中定义了

   export default {
     data(){
       return {
         date: '',
         holiday: [
           '2022-01-01','2022-01-02','2022-01-03', // 元旦
           '2022-01-31','2022-02-01','2022-02-02','2022-02-03','2022-02-04','2022-02-05','2022-02-06', // 春节
           '2022-04-03','2022-04-04','2022-04-05', // 清明节
           '2022-04-30','2022-05-01','2022-05-02','2022-05-03','2022-05-04', // 劳动节
           '2022-06-03','2022-06-04','2022-06-05', // 端午节
           '2022-07-11','2022-07-12', // 古尔邦节
           '2022-09-10','2022-09-11','2022-09-12', // 中秋节
           '2022-10-01','2022-10-02','2022-10-03','2022-10-04','2022-10-05','2022-10-06','2022-10-07' // 国庆节
         ],
         addWork: ['2022-01-29','2022-01-30','2022-04-02','2022-04-24','2022-05-07','2022-10-08','2022-10-09'], // 调休
         pickerOptions: {
           disabledDate: (time) => {
             return this.setTime(time)
           }
         }
       }
     },
     methods: {
     	setTime(time){
         let date = this.$dayjs(time).format('YYYY-MM-DD')
         let isHoliday = this.holiday.includes(date)
         let isWeekend = (time.getDay() == 0 || time.getDay() == 6) && !this.addWork.includes(date)
         return time.getTime() < Date.now() - 8.64e7 || isWeekend || isHoliday
       }
     }
   }
   

最后记录下工作中遇到的特殊需求，选择一个开始时间，给出一个间隔天数，自动计算出一个结束时间。如果开始时间和结束时间中间有周末，节假日，要把结束时间自动往后延长。

let addDaysNum = 3 // 间隔天数
let startDay = '2021-12-29 09:00:00' // 开始时间
let endDate = this.$dayjs(startDay ).add(addDaysNum,'day').format('YYYY-MM-DD HH:mm:ss') // 结束时间

// 生成一个开始到结束的数组 
//  ['2021-12-29', '2021-12-30', '2021-12-31', '2022-01-01']
getDayArr(startDay, endDay) {
  let startVal = this.$dayjs(new Date(startDay)).format('YYYY-MM-DD')
  let endVal = this.$dayjs(new Date(endDay)).format('YYYY-MM-DD')
  let dayArr = []
  let isHoliday = null
  let isWeekend = null
  let isSame = false
  while(this.$dayjs(startVal).isBefore(endVal)){
    dayArr.push(startVal)
    startVal = this.$dayjs(startVal).add(1, 'day').format('YYYY-MM-DD')
    isHoliday = this.holiday.includes(startVal)
    isWeekend = (new Date(startVal).getDay() == 0 || new Date(startVal).getDay() == 6) && !this.addWork.includes(startVal)
    isSame = startVal == endVal ? true : false
    if(isWeekend || isHoliday && !isSame){
      endVal = this.$dayjs(new Date(endVal)).add(1, 'day').format('YYYY-MM-DD')
    }
  }
  dayArr.push(this.$dayjs(new Date(endVal)).format('YYYY-MM-DD'))
  return dayArr
}

最终实现效果如下图