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

目录

1.element文档需要

2.禁用所有过去的时间

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

---

1.element文档需要

Element - The world's most popular Vue UI framework

picker-options

 :picker-options="pickerOptions"

2.禁用所有过去的时间

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

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

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

time

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

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

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

此时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();
    },

打印结果;

完整代码：

展示