element ui 日期时间选择器禁用时分秒的方法 vue (此刻之后的时间不可选择)

关键点在于picker-options 的使用 disabledDate 禁用年月日 selectableRange禁用时分秒

<el-date-picker
     class="picker"
     v-model="param.happen_date"
     value-format="yyyy-MM-dd HH:mm:ss"
     type="datetime"
     popper-class="date_picker"
     :picker-options="pickerOptions"
     placeholder="选择日期时间"
 ></el-date-picker>

data(){
    return{
        pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now() - 8.64e6; //如果没有后面的-8.64e6就是不可以选择今天的
        },
        selectableRange: `00:00:00 - ${
          this.initTime(Date.now()) ? this.initTime(Date.now()) : "23:59:59"
        }`
      }, 
    }
}
 
methods:{
  initTime(time) {
      let date = new Date(time);
      let Y = date.getFullYear() + "-";
      let M =
        (date.getMonth() + 1 < 10
          ? "0" + (date.getMonth() + 1)
          : date.getMonth() + 1) + "-";
      let D = date.getDate() + " ";
      let h = date.getHours() + ":";
      let m = date.getMinutes() + ":";
      let s = date.getSeconds();
      return h + m + s;
    },    
  }

效果图:
在这里插入图片描述

Logo

前往低代码交流专区

更多推荐