element的el-date-picker组件实现只可选择当前之后的时间，包括时分

最新推荐文章于 2025-02-25 17:15:00 发布

JuS巨山超力霸

最新推荐文章于 2025-02-25 17:15:00 发布

阅读量4.8k

点赞数 4

文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/m0_49623851/article/details/128488379

版权

在Vue.js项目中，使用el-date-picker组件时，有时需要定制特定的显示和选择规则。本文介绍如何通过设置`format`属性隐藏秒数，利用`picker-option`的`disabledDate`方法限制只能选择当前时间及之后的日期，并在选择时间小于当前时间时自动更新为当前时间。通过这种方法，可以实现符合业务需求的自定义时间选择器。

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

项目中遇到需要使用element的el-date-picker组件，需求是只显示时分，不消失秒，并且只可选择此刻之后的时间，el-date-picker的禁用只针对日期，这里针对时分做一些处理。

效果：

解决办法：

 <el-date-picker
   style="width: 220px"
   v-model="info.beginTime"
   type="datetime"
   placeholder="开始时间"
   format="yyyy-MM-dd HH:mm"
   :picker-options="pickerOption"
   @change="beginDateChange"
   >
</el-date-picker>

1. format="yyyy-MM-dd HH:mm"就是设置只显示年月日时分不显示秒

2.限制日期为只可选择今天及今天之后

  pickerOption: {
        disabledDate: (time) => {
          return Date.now() - 3600 * 1000 * 24 > time.getTime();
        },
      },

3.时分这里没做禁选，处理成判断当前选中的时间是否小于当前时间，小于则会自动替换成当前时间

  beginDateChange(date) {
      if (!date) return;
       var startAt = new Date(date).getTime();
      if (startAt < Date.now()) {
        this.info.beginTime = new Date();
      }
}