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>