酒店预订Datetimepicker日期拦截异常求助：已拦截日期仍被选中

嘿，我完全get到你遇到的问题了——当选择跨禁用日期的入住时段时，比如1日到22日，中间的被拦截日期（比如20日）居然还能被包含在选中范围内，对吧？这是因为默认的日期范围选择逻辑只校验了起止日期是否可用，压根没检查区间内的所有日期是否都合法。咱们来一步步修复这个问题：

默认的datetimepicker范围选择逻辑仅验证起始日期和结束日期是否在可用列表中，但不会遍历检查两个日期之间的每一天是否都未被预订，所以才会出现包含禁用日期的区间被选中的情况。

我们需要添加两个关键辅助函数，同时重写日期选择器的onSelect事件，实时校验区间内的所有日期是否合法。以下是修改后的完整代码示例（假设你用的是jQuery UI Datepicker）：

$(document).ready(function () {
    // 替换成你的实际禁用日期数组，格式统一为YYYY-MM-DD
    var arrDisable = ["2024-04-20", "2024-04-25"];
    
    // 辅助函数：检查单个日期是否被禁用
    function isDateDisabled(date) {
        var formattedDate = $.datepicker.formatDate('yy-mm-dd', date);
        return arrDisable.includes(formattedDate);
    }
    
    // 辅助函数：检查入住-退房区间内是否存在禁用日期
    function hasDisabledDateInRange(startDate, endDate) {
        var currentDate = new Date(startDate);
        // 遍历区间内的每一天
        while (currentDate <= endDate) {
            if (isDateDisabled(currentDate)) {
                return true;
            }
            currentDate.setDate(currentDate.getDate() + 1);
        }
        return false;
    }
    
    // 初始化入住日期选择器
    $("#checkin").datepicker({
        minDate: 0, // 禁止选择今日之前的日期
        beforeShowDay: function(date) {
            var formattedDate = $.datepicker.formatDate('yy-mm-dd', date);
            var disabled = arrDisable.includes(formattedDate);
            // 返回[是否可用, 自定义CSS类]
            return [!disabled, disabled ? 'disabled-date' : ''];
        },
        onSelect: function(selectedDate) {
            // 选中入住日期后，设置退房日期的最小为入住次日
            var checkinDate = $.datepicker.parseDate('mm/dd/yy', selectedDate);
            var minCheckoutDate = new Date(checkinDate);
            minCheckoutDate.setDate(minCheckoutDate.getDate() + 1);
            $("#checkout").datepicker("option", "minDate", minCheckoutDate);
        }
    });
    
    // 初始化退房日期选择器
    $("#checkout").datepicker({
        minDate: 1, // 默认最小日期为明天
        beforeShowDay: function(date) {
            var formattedDate = $.datepicker.formatDate('yy-mm-dd', date);
            var disabled = arrDisable.includes(formattedDate);
            return [!disabled, disabled ? 'disabled-date' : ''];
        },
        onSelect: function(selectedDate) {
            var checkinVal = $("#checkin").val();
            // 确保入住日期已选择
            if (!checkinVal) return;
            
            var checkinDate = $.datepicker.parseDate('mm/dd/yy', checkinVal);
            var checkoutDate = $.datepicker.parseDate('mm/dd/yy', selectedDate);
            
            // 校验区间内是否有禁用日期
            if (hasDisabledDateInRange(checkinDate, checkoutDate)) {
                alert("您选择的时段包含已预订日期，请重新选择！");
                // 清空无效的退房日期
                $("#checkout").val('');
            }
        }
    });
});

1. isDateDisabled函数：将日期转换为统一格式，快速判断该日期是否在禁用列表中
2. hasDisabledDateInRange函数：遍历入住到退房的所有日期，只要有一个禁用日期就返回true
3. 入住日期的onSelect事件：强制退房日期晚于入住日期，避免逻辑错误
4. 退房日期的onSelect事件：选中后立即校验区间合法性，若存在禁用日期则提示用户并清空选择

• 可以把alert替换成页面内的友好提示（比如在输入框下方显示红色文本），提升用户体验
• 如果使用的是Bootstrap DateTimePicker等其他插件，核心逻辑一致，只需替换对应的API（比如validateDate方法或datesDisabled属性）
• 确保禁用日期数组的格式与日期选择器的格式化规则完全匹配，避免校验失败

内容的提问来源于stack exchange，提问作者Adam Khalil