el-date-picker日期组件，禁止选择以后未来时间

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

原创最新推荐文章于 2025-11-17 15:02:15 发布 · 1.4k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #vue.js #html5

本文介绍了如何在ElementUI的日期选择器组件中禁止用户选择当前日期及之后的时间。通过设置`pickerOptions`的`disabledDate`属性，确保时间范围不超过当前时间。

elementUI的日期组件中，禁止选择当天以后的时间。
先来效果图： el-date-picker日期组件
组件代码：

<el-date-picker
    v-model="timeValue"
    type="daterange"
    range-separator="至"
    start-placeholder="开始日期"
    end-placeholder="结束日期"
	value-format="yyyy-MM-dd"
	:picker-options="pickerOptions" />

在data中定义：

      timeValue: '',
      // 禁止选择本日之后
	  pickerOptions: {
        disabledDate(time) {
          return time.getTime(new Date()) > Date.now();
        },
      },