el-date-picker选择规定时间范围

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

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

3 ·

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

标签

#vue

收录于

本文介绍在Vue项目中使用饿了么UI的el-date-picker组件，如何设置只能选择过去十天内的日期。通过设置expireTimeOption属性，实现时间范围限制，代码示例展示具体实现方式。

在写vue项目利用饿了吗UI的时候el-date-picker组件需要只能选择一定的时间范围，比如说只能选择过去十天中的某一天：
要达到这样的效果在这里插入图片描述
好了，直接上代码：
先上el-date-picker的代码

<el-date-picker
        v-model="myDate"
        type="date"
        value-format="yyyy-MM-dd"
        :picker-options="expireTimeOption"
        placeholder="选择日期"
      ></el-date-picker>

最重要的就是expireTimeOption，它是在data中的

      expireTimeOption: {
        disabledDate(date) {
          //disabledDate 文档上：设置禁用状态，参数为当前日期，要求返回 Boolean
          return (
            date.getTime() > Date.now() ||
            date.getTime() < Date.now() - 1000 * 3600 * 24 * 10
          );
        }
      }