el-date-picker 禁用当前日期时间之前的选项

最新推荐文章于 2024-07-09 10:22:06 发布

岸芷汀兰§小慧

最新推荐文章于 2024-07-09 10:22:06 发布

阅读量1.4k

点赞数 1

分类专栏： vue-cli后台系统 elementui 文章标签： elementui vue.js javascript

本文链接：https://blog.csdn.net/qq_44712405/article/details/124800589

版权

vue-cli后台系统同时被 2 个专栏收录

19 篇文章 1 订阅

订阅专栏

elementui

2 篇文章 1 订阅

订阅专栏

<el-date-picker
  type="datetime"
  v-model="transshipmentTime"
  placeholder="请选择"
  style="width: 100%;"
  value-format="yyyy-MM-dd HH:mm:ss"
  :picker-options="pickerOptions"  // 在这里配置
  @change="handle" // 如果选择时间小于当前时间时，默认显示回当前时间
/>

data中

transshipmentTime: [],

pickerOptions: {
  disabledDate:(time)=> {
    return time.getTime() < Date.now()-1 * 24 * 3600 * 1000
  }, // 禁用日期
  selectableRange: `${Date().split(" ")[4]} - 23:59:59`, // 打开默认当前时间
}

methods

handle () {
  var startAt = new Date(this.form.transshipmentTime) * 1000 /1000;
  if(startAt < Date.now()) {
    this.transshipmentTime = new Date();
  }
},