时间控件el-date-picker限制可选当前日期前七天

最新推荐文章于 2025-04-29 17:46:09 发布

原创最新推荐文章于 2025-04-29 17:46:09 发布 · 390 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

前端专栏收录该内容

18 篇文章

订阅专栏

这篇博客介绍了如何在Vue.js的Element UI组件中使用`el-date-picker`来创建一个日期范围选择器，并通过`pickerOptions`属性禁用当前日期之前和之后七天内的日期。通过设置`disabledDate`函数，可以限制用户选择的时间范围，确保选择的日期在七天之内。

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

在日期选择器中添加 :picker-options="pickerOptions"

data里添加

 data(){
    return{
        pickerOptions: {
            disabledDate(time) {
              let now = Date.now();
              let seven = 7 * 24 * 60 * 60 * 1000;
              let sevenDays = now - seven;
              return time.getTime() > now || time.getTime() < sevenDays;
            },
        },
      }
}