elementUI 的 DateTimePicker日期时间选择器设置指定时间禁用状态

1. 设置当前日期之前的时间禁止选择

<template>
  <div>
    <el-date-picker
      v-model="value"
      type="date"
      :picker-options="pickerOptions"
      placeholder="选择日期">
    </el-date-picker>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        value: '',
        pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 8.64e7;
          },
        }
      }
    },
  }
</script>

 

2. 设置周末的时间禁止选择

<template>
  <div>
    <el-date-picker
      v-model="value"
      type="date"
      :picker-options="pickerOptions"
      placeholder="选择日期">
    </el-date-picker>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        value: '',
        pickerOptions: {
          disabledDate(time) {
            return (time.getDay() === 6) || (time.getDay() === 0)
          },
        }
      }
    },
  }
</script>

 

3. 设置今天之后的一个月内可选择

<template>
  <div>
    <el-date-picker
      v-model="value"
      type="date"
      :picker-options="pickerOptions"
      placeholder="选择日期">
    </el-date-picker>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        value: '',
        pickerOptions: {
          disabledDate(time) { // 结束时间禁用时间段
          // 设置可选择的日期为今天之后的一个月内
          const curDate = (new Date()).getTime()
          // 这里算出一个月的毫秒数,这里使用30的平均值,实际中应根据具体的每个月有多少天计算
          const day = 30 * 24 * 3600 * 1000
          const dateRegion = curDate + day
          return time.getTime() < Date.now() + 8.64e7 || time.getTime() > dateRegion 
          },
        }
      }
    },
  }
</script>