网站备案 服务内容上海住房和城市建设厅网站

element-plus日期范围限制功能实现逻辑

1. 需求：通过限制时间的可选范围减少请求的数据量

2. 实现效果：

日期选择器做限制

3. 代码逻辑：

思路：通过calendar-change获取开始日期，然后通过disabled-date禁用不满足条件的日期

<el-date-pickerv-model="value"type="daterange":disabled-date="disabledDate"@calendar-change="handleCalendarChange"range-separator="至"start-placeholder="开始日期"end-placeholder="结束日期" />

• type="daterange"：指定为日期范围选择器
• :disabled-date="disabledDate"：绑定日期禁用逻辑
• @calendar-change="handleCalendarChange"：监听日历变化事件

方法一：

function disabledDate(date: Date): boolean {if (startDateLimit.value) {const timeDiff = date.getTime() - startDateLimit.value.getTime()const maxTime = maxDays * 24 * 60 * 60 * 1000 // 转换为毫秒return timeDiff > maxTime || date < startDateLimit.value}return false
}

功能说明：

• 当用户已经选择了开始日期(startDateLimit.value存在)时：

  1、计算当前日期与开始日期的时间差(timeDiff)

  2、计算最大允许的时间差(maxTime)，这里是7天的毫秒数

  3、返回 true（禁用该日期）如果：

   时间差大于最大允许值（日期在开始日期7天之后）日期早于开始日期（确保结束日期不会早于开始日期）
  

• 当用户尚未选择开始日期时，返回 false（不禁用任何日期）

方法二：

function handleCalendarChange(dates: Date[]) {if (dates && dates[0]) {startDateLimit.value = new Date(dates[0])} else {startDateLimit.value = null}
}

功能说明：

• 当用户选择日期时，接收日期数组作为参数
• 如果日期数组存在且有第一个元素（开始日期）：
  更新 startDateLimit.value 为选中的开始日期
• 如果日期数组为空（用户清空选择）：
  重置 startDateLimit.value 为 null