Vue3+ element Plus中，实现el-date-picker限制时间选择范围（7天）

最新推荐文章于 2025-03-30 15:01:12 发布

左跨一步走

最新推荐文章于 2025-03-30 15:01:12 发布

阅读量330

点赞数 2

分类专栏： Vue3+ts 文章标签： vue.js elementui javascript typescript

本文链接：https://blog.csdn.net/weixin_56315436/article/details/145142676

版权

Vue3+ts 专栏收录该内容

1 篇文章

订阅专栏

注意坑：element Plus 没有picker-options配置项，可以使用 :disabled-date="disabledDate" @calendar-Change="calendarChange" 配合实现

废话不多说，直接上代码！

<el-form-item label="创建时间" prop="createTime">
        <el-date-picker
              v-model="queryParams.createTime"
              value-format="YYYY-MM-DD HH:mm:ss"
              type="datetimerange"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              class="!w-240px"
               :disabled-date="disabledDate"
               @calendar-Change="calendarChange"
            />
      </el-form-item>

const disabledDate = (time:any)=>{
  // 如何选择了一个日期
  if (choiceDate.value) {
      // 7天的时间戳
      const one = 6 * 24 * 3600 * 1000;
      // 当前日期 - one = 7天之前
      const minTime = choiceDate.value - one;
      // 当前日期 + one = 7天之后
      const maxTime = choiceDate.value + one;
      return (
        time.getTime() < minTime ||
        time.getTime() > maxTime
        // 限制不能选择今天及以后
        // || time.getTime() + 1 * 24 * 3600 * 1000 > Date.now()
      );
    } else {
      // 如果没有选择日期，就要限制不能选择今天及以后
      // return time.getTime() + 1 * 24 * 3600 * 1000 > Date.now();
    }
}
const calendarChange = (obj:any)=>{
  const minDate = obj[0]
  const maxDate = obj[1]
  // 把选择的第一个日期赋值给一个变量。
  choiceDate.value = minDate.getTime();
  // 如何你选择了两个日期了，就把那个变量置空
  if (maxDate) choiceDate.value = null;
}

实现后的效果：

点击后，时间的前七天、后七天。