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
            }
          }
        }
      }
     }
    

el-date-picker 设置时间限定选择_第1张图片

  1. 禁止选择周六周日

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

el-date-picker 设置时间限定选择_第2张图片

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

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

el-date-picker 设置时间限定选择_第3张图片

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

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

    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
        }
      }
    }
    

el-date-picker 设置时间限定选择_第4张图片

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

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
}

最终实现效果如下图

el-date-picker 设置时间限定选择_第5张图片

你可能感兴趣的:(Vue,elementui,vue.js,javascript)