vue + element el-date-picker标签实现当前日期之前的日期不可选

Vue日期选择器禁用过去日期

最新推荐文章于 2025-10-18 16:01:58 发布

原创最新推荐文章于 2025-10-18 16:01:58 发布 · 7.3k 阅读

4 ·

CC 4.0 BY-SA版权

vue 同时被 2 个专栏收录

14 篇文章

订阅专栏

element

8 篇文章

订阅专栏

本文介绍如何在Vue项目中使用Element UI的日期选择器组件，通过自定义方法expireTimeOption禁用所有过去的日期，确保用户只能选择未来的时间点。

主要使用这两个：具体看代码中的两行注释不复杂

1. :picker-options="expireTimeOption"

expireTimeOption: {

disabledDate(date) {

return date.getTime() <= Date.now();

}

<el-form-item label="失效时间" prop="disableTime">
 <el-date-picker
   v-model="model.disableTime"
   type="datetime"
   :picker-options="expireTimeOption"  //使用expireTimeOption方法
   placeholder="选择日期时间" value-format="yyyy-MM-dd HH:mm:ss">
 </el-date-picker>
</el-form-item>


 return {
   expireTimeOption: {
     disabledDate(date) { //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
       return date.getTime() <= Date.now();
     }
   },
}