el-date-picker组件实现特定日期禁用（例如：只能选取当前日期（含）和以后的日期）。

最新推荐文章于 2026-03-25 01:23:38 发布

原创最新推荐文章于 2026-03-25 01:23:38 发布 · 3.8k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #前端 #vue

vue 同时被 3 个专栏收录

31 篇文章

订阅专栏

26 篇文章

订阅专栏

element-Ui

15 篇文章

订阅专栏

此博客介绍了如何在El-DatePicker组件中设置日期选择器，以禁用过去日期并仅允许从今天开始选择，直至未来90天。分别展示了两种情况：一是今日到今日之后，二是今日到未来三个月。

禁用当前日期之前的日期（只能选择今日到今日之后）：

<el-date-picker
              type="date"
              placeholder="请选择时间"
              :picker-options="pickerOptions"
              v-model="ruleForm.date"
              :clearable="false"
            ></el-date-picker>



pickerOptions: {
            // 限制预约时间
            disabledDate(time) {
              return time.getTime() < Date.now() - 24 * 60 * 60 * 1000
            }
         },

2.只能选择今日到未来某时间段的日期范围（此处以3个月90天为例）：

<el-date-picker
                  type="date"
                  v-model="ruleForm.date2"
                  :picker-options="pickerOptions2"
                  placeholder="请选择完成日期"
                  :clearable="false"
                ></el-date-picker>



pickerOptions2: {
            // 限制预约时间
            disabledDate(time) {
              return (time.getTime() < Date.now() - 24 * 60 * 60 * 1000) || (time.getTime() > Date.now() + 90 * 24 * 60 * 60 * 1000)
            }
         },