element plus 日期限制在7天长度只能选当天及之后，不能跨月选择

甲乙 ^-^

已于 2023-08-28 14:41:33 修改

阅读量803

点赞数

文章标签： vue.js elementui 前端

于 2023-08-28 14:35:10 首次发布

本文链接：https://blog.csdn.net/weixin_54106595/article/details/132538288

版权

引入dayjs ，方便获取时间戳

先获取点击第一次时间：当日历所选的日期更改时触发calendar-change事件，保存到变量中

                 <el-date-picker
                      v-model="dete"
                      type="daterange"
                      range-separator="⇀"
                      start-placeholder="开始日期"
                      end-placeholder="结束日期"
                      format="YYYY-MM-DD"
                      value-format="YYYY-MM-DD"
                      size="large"
                      :disabled-date="disabledDate"  // 限制可选日期 禁用不可选日期
                      @calendar-change="calendarChange"   // 获取选中日期
                    />




const calendarChange = (val: any) => {
  firstChooseDate.value = val[0].getTime(); //点击第一次选中日期
  if (val[1]) firstChooseDate.value = ""; // 选中后清空
};

计算不可选日期并限制：

const disabledDate= (time: Date) => {
  if (firstChooseDate.value) {
    const one = 6 * 24 * 3600 * 1000;
     const lastTime = dayjs(firstChooseDate.value).endOf("month").valueOf() ; // 选中日期当月最后一天
     const firstTime = dayjs(firstChooseDate.value).startOf("month").valueOf();// 选中日期当月第一天
    // 当前日期 - one = 7天之前
    const minTime = firstChooseDate.value - one;
    // 当前日期 + one = 7天之后
    const maxTime = firstChooseDate.value + one;
    // 7天之前大于昨天天
    let startTime =
      minTime > Date.now() - 8.64e7 ? minTime : Date.now() - 8.64e7; // 对比获取可选最小日期
      startTime = startTime > firstTime? startTime: firstTime // 对比可选最小日期 和当月第一天
    let endTime = maxTime > lastTime ? lastTime : maxTime; //可选最大日期
    return time.getTime() > endTime || time.getTime() < startTime;
  } else {
    return time.getTime() < Date.now() - 8.64e7; // 弹窗打开时限制 不可选当天前日期
  }
};