el-data-picker时间选择器最多选择7天，且只能选当前之前时间

最新推荐文章于 2025-03-21 09:32:30 发布

06便士

最新推荐文章于 2025-03-21 09:32:30 发布

阅读量2.7k

点赞数 4

文章标签： javascript

本文链接：https://blog.youkuaiyun.com/Giraffe0615/article/details/130065569

版权

该代码段展示了如何在Vue.js中使用el-date-picker组件设置日期范围选择器，只允许用户选取七天内的日期，并且禁止选择当前时间之后的日期。通过v-model绑定统计数据的时间，picker-options配置禁用日期的逻辑，确保开始日期后跟结束日期，且两者之间间隔不超过7天。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<el-date-picker
          v-model="form.statisticsTime"
          type="daterange"
          value-format="yyyy-MM-dd"
          range-separator="~"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :picker-options="pickerOptions"
          prefix-icon=0
        />

// 日期选择七天内,且当前时间后不能选择
      pickerOptions: {
        onPick: time => {
          // 选择开始时间未选择结束时间
          if (time.minDate && !time.maxDate) {
            this.timeOptionRange = time.minDate;
          }
          if (time.maxDate) {
            this.timeOptionRange = null;
          }
        },
        disabledDate: time => {
          let timeOptionRange = this.timeOptionRange;
          let secondNum = 1000 * 60 * 60 * 24 * 7;
          if (!timeOptionRange) {
            return time.getTime() > Date.now() - 8.64e6
          }
          if ((timeOptionRange.getTime() + secondNum) > (Date.now() - 8.64e6)) {
            return time.getTime() > Date.now() - 8.64e6 || time.getTime() < timeOptionRange.getTime() - secondNum;
          }
          return time.getTime() > timeOptionRange.getTime() + secondNum || time.getTime() < timeOptionRange.getTime() - secondNum;
        }
      },