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

在使用el-date-picker时,想要以下需求:

  1. 选中第一个日期后(如:12月15日),第二个日期=第一个日期-7,或者第二个日期=第一个日期+7,即第二个日期选择范围如图:(前后7天可选)
  2. 只能选择今天以及今天之前的日期。
javascript 复制代码
  <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"
  />
javascript 复制代码
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 可以改为

javascript 复制代码
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()
  }
}

该方法可以解决,如:使用 el-date-picker,限制开始日期和结束日期差值为7,30天等需求。开始日期随着差值而变化。

如:只能选择当前选择日期的前一个月、后一个月。前七天和后七天。

相关推荐
兆子龙19 分钟前
用 Auto.js 实现挂机脚本:从找图点击到循环自动化
前端·架构
SuperEugene25 分钟前
表单最佳实践:从 v-model 到自定义表单组件(含校验)
前端·javascript·vue.js
昨晚我输给了一辆AE8625 分钟前
为什么现在不推荐使用 React.FC 了?
前端·react.js·typescript
不会敲代码126 分钟前
深入浅出 React 闭包陷阱:从现象到原理
前端·react.js
不会敲代码128 分钟前
React性能优化:深入理解useMemo和useCallback
前端·javascript·react.js
Dilettante25829 分钟前
我的 Monorepo 实践经验:从基础概念到最佳实践
前端·前端工程化
只会cv的前端攻城狮1 小时前
Elpis-Core — 融合 Koa 洋葱圈模型实现服务端引擎
前端·后端
Java小卷1 小时前
流程设计器为啥选择diagram-js
前端·低代码·工作流引擎
HelloReader2 小时前
Isolation Pattern(隔离模式)在前端与 Core 之间加一道“加密网关”,拦截与校验所有 IPC
前端
兆子龙2 小时前
从 float 到 Flex/Grid:CSS 左右布局简史与「刁钻」布局怎么搞
前端·架构