网站备案 服务内容北京酒店设计公司
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