日期时间选择(设置禁用状态)

目录

1.element文档需要

2.禁用所有过去的时间

3.设置指定日期的禁用时间

---

<template>
  <div class="block">
    <span class="demonstration">起始日期时刻为 12:00:00</span>
    <el-date-picker
      v-model="value1"
      type="datetimerange"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :default-time="['12:00:00']">
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value1: ''
      };
    }
  };
</script>

1.element文档需要

Element - The world's most popular Vue UI framework

picker-options

<template>
  <div class="block">
    <span class="demonstration">起始日期时刻为 12:00:00</span>
    <el-date-picker
      v-model="value1"
      type="datetimerange"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions"
      >
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        value1: ''
      };
    },
  };
</script>

 :picker-options="pickerOptions"

2.禁用所有过去的时间

 computed:{
      pickerOptions(){
        return {
            disabledDate:this.disabledDate()
         }
      }
    },
methods:{
  disabledDate(time){
     console.log(time)
     return time<Date.now()
   }
}

disabledDate 是一个函数，用于判断某个日期是否应该被禁用。这个函数会在日期选择器中每个日期渲染时被调用，传入当前日期的 timestamp（时间戳），返回一个布尔值，表示该日期是否被禁用。

Date.now() 返回当前时间的时间戳(即从1970年1月1日00:00:00 UTC开始经过的毫秒数)

time<Date.now()  表示如果传入的 time (选中的日期时间戳)小于当前时间的时间戳，则会返回 true，表示该日期应该被禁用

换句话说，这个逻辑会禁用所有过去的时间

3.设置指定日期的禁用时间

假如现在有个指定日期选择器

<template>
  <div class="block">
    <span class="demonstration">默认</span>
    <el-date-picker
      v-model="time"
      type="date"
      value-format="timestamp"
      placeholder="选择日期">
    </el-date-picker>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        time: '',
      };
    }
  };
</script>

此时data中的time就是需要的指定日期

value-format="timestamp"返回时间戳

computed:{
      pickerOptions(){
        return {
            disabledDate:this.disabledDate()
         }
      }
    },

 disabledDate(time) {
      let allowedDate = new Date(this.time);
      console.log('allowedDate',allowedDate);      

      let startOfDay = new Date(allowedDate.getFullYear(), allowedDate.getMonth(), allowedDate.getDate());
      let endOfDay = new Date(allowedDate.getFullYear(), allowedDate.getMonth(), allowedDate.getDate() + 1);
      return time.getTime() < startOfDay.getTime() || time.getTime() >= endOfDay.getTime();
    },

打印结果;

完整代码：

<template>
  <div class="block">
    <el-date-picker
      v-model="time"
      type="date"
      value-format="timestamp"
      placeholder="选择日期">
    </el-date-picker>
   //设置禁用时间
     <el-date-picker
      v-model="value1"
      type="datetimerange"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      :picker-options="pickerOptions"
      >
    </el-date-picker>
  </div>
</template>

<script>
  export default {
   computed:{
      pickerOptions(){
        return {
            disabledDate:this.disabledDate()
         }
      }
    },
    data() {
      return {
        value1: '',
        time:'',
      };
    },
   methods:{
       disabledDate(time) {
        let allowedDate = new Date(this.time);   
        let startOfDay = new Date(allowedDate.getFullYear(), allowedDate.getMonth(), allowedDate.getDate());
       let endOfDay = new Date(allowedDate.getFullYear(), allowedDate.getMonth(), allowedDate.getDate() + 1);
       return time.getTime() < startOfDay.getTime() || time.getTime() >= endOfDay.getTime();
    },
    }
  };
</script>

展示