el-date-picker 动态设置时间段（动态设置7天）

最新推荐文章于 2025-09-18 09:39:50 发布

原创最新推荐文章于 2025-09-18 09:39:50 发布 · 1.6k 阅读

0 ·

CC 4.0 BY-SA版权

xiaojie

文章标签：

#vue

VUE、JS 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何在Vue应用中使用el-date-picker组件设置日期范围，并通过JavaScript验证所选日期是否超过7天，确保输入有效。

1：vue中添加 el-date-picker 标签

<el-date-picker class="search-item"
      v-model="dataSE"
      style="width: 240px"
      value-format="yyyy-MM-dd"
      type="daterange"
      range-separator="-"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      @change="dateSelectChange"
></el-date-picker>

2：定义data

data() {
    return {
    	dataSE: '',
    }
}

2：创建方法

dateSelectChange(val) {
      if (val) {
        var startDate = new Date(val[0]).getTime();
        var endDate = new Date(val[1]).getTime();
        if (endDate - startDate > 6 * 24 * 60 * 60 * 1000) {
          this.$message({
            message: "所选时间范围不能大于7天",
            type: "warning",
          });
          this.dataSE=''; 
        }
      }
    },