element el-date-picker限制时间选择范围

最新推荐文章于 2025-05-26 10:25:27 发布

半个开心果

最新推荐文章于 2025-05-26 10:25:27 发布

阅读量3k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： vue element el-date-picker 文章标签： vue.js javascript elementui

本文链接：https://blog.csdn.net/qq_37299479/article/details/129265457

vue 同时被 3 个专栏收录

19 篇文章

订阅专栏

element

1 篇文章

订阅专栏

el-date-picker

1 篇文章

订阅专栏

文章介绍了如何在Vue.js中使用el-date-picker组件来设置日期时间选择器的限制。通过picker-options属性，可以配置disabledDate函数限制用户只能选择当前时间之后的三天。同时，文章提到可以使用watch监听选中的日期，但onpick方法在某些情况下可能不会触发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过 :picker-options 属性设置范围：

<el-date-picker 
    class = "mydelayTime"
    v-model="form.secondPriceDelayTime" 
    type="datetime" 
    placeholder="选择日期时间"
    :start-placeholder="startPlaceholder" value-format="yyyy-MM-dd HH:mm:ss" :picker-options="pickerOptions"
    @change = "changeSecondPriceDelayTime"
    >
</el-date-picker>

this.pickerOptions = {
  disabledDate: (time) => {
      return (time.getTime() < Date.now() + 8.64e7*3) //减去一天的时间代表可以选择同一天;
  },  
  // selectableRange:pickerDate ? `${hourRange}:${minRange}:${secondRange} - 23:59:59` : '00:00:00 - 23:59:59',
  
}

限制只能选择三天以后的时间：

this.pickerOptions = {
  disabledDate: (time) => {
      return (time.getTime() < Date.now() + 8.64e7*3) //减去一天的时间代表可以选择同一天;
  },  
  // selectableRange:pickerDate ? `${hourRange}:${minRange}:${secondRange} - 23:59:59` : '00:00:00 - 23:59:59',
  
}

如果需要限定，只能选择当前时间之后的时间，需要搭配 selectableRange 使用

选中了年月日，测试了onpick 方法没有触发，但是使用watch可以监听到当前选中了哪一天