elementPlus使用 el-date-picker ，限制选择的开始日期和结束日期的差在7天范围内。-Toy模板网

这篇具有很好参考价值的文章主要介绍了elementPlus使用 el-date-picker ，限制选择的开始日期和结束日期的差在7天范围内。。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

在使用el-date-picker时，想要以下需求：

选中第一个日期后（如：12月15日），第二个日期=第一个日期-7，或者第二个日期=第一个日期+7，即第二个日期选择范围如图：（前后7天可选）
只能选择今天以及今天之前的日期。

  <el-date-picker
    v-model="value"
    type="daterange"
    range-separator="到"
    start-placeholder="开始时间"
    end-placeholder="结束时间"
    value-format="YYYY-MM-DD"
    @change="change"
    :disabled-date="disabledDate"
    @calendar-change="handleChange"
    @focus="handleFocus"
    :clearable="false"
  />

const pickDay = ref()
const handleFocus = () => {
  pickDay.value = null
}
const limitTime = 1000 * 60 * 60 * 24 * 6
const disabledDate = (time: Date) => {
  if (pickDay.value) {
    return (
      time.getTime() < pickDay.value.getTime() - limitTime ||
      time.getTime() > pickDay.value.getTime() + limitTime ||
      time.getTime() > Date.now()
    )
  } else {
    return time.getTime() > Date.now()
  }
}
const handleChange = (val: Date[]) => {
  const [pointDay] = val
  pickDay.value = pointDay
}

或者使用dayJs，disabledDate 可以改为文章来源地址https://www.toymoban.com/news/detail-806104.html

import dayjs from 'dayjs'
const disabledDateSeven = (time: Date) => {
  if (pickDay?.value) {
    return (
      time.getTime() < dayjs(pickDay.value.getTime()).subtract(6, 'day') ||
      time.getTime() > dayjs(pickDay.value.getTime()).add(6, 'day') ||
      time.getTime() > Date.now()
    )
  } else {
    return time.getTime() > Date.now()
  }
}