JQuery UI Datepicker日期范围改造：设置退房为入住日+x天

需求说明 #

• 选中入住日期后，退房日期仅允许选择入住日期 + X天范围内的日期（示例中设为7天，可自行调整）
• 掌握如何为$.datepicker.parseDate解析得到的日期对象添加指定天数

核心修改代码 #

直接基于你的现有代码调整，使用jQuery UI Datepicker自带的日期工具方法实现需求：

$(function() {
    // 定义允许的最长停留天数，可根据业务需求修改
    const MAX_STAY_DAYS = 7;
    const dateFormat = 'dd MM yy';

    function getDate(element) {
        let date;
        try {
            date = $.datepicker.parseDate(dateFormat, element.value);
        } catch (error) {
            date = null;
        }
        return date;
    }

    // 入住日期选择器
    const from = $('#CheckIn').datepicker({
        minDate: 0,
        dateFormat: dateFormat,
        defaultDate: '+1w',
        changeMonth: false,
        numberOfMonths: 1
    }).on('change', function() {
        const checkInDate = getDate(this);
        if (checkInDate) {
            // 计算退房日期的可选范围：入住当天 到 入住日+MAX_STAY_DAYS天
            const checkOutMinDate = checkInDate;
            const checkOutMaxDate = $.datepicker.addDays(checkInDate, MAX_STAY_DAYS);
            to.datepicker('option', {
                minDate: checkOutMinDate,
                maxDate: checkOutMaxDate
            });
            // 清空无效的退房日期残留值
            to.val('');
        } else {
            // 入住日期无效时，重置退房日期限制
            to.datepicker('option', {
                minDate: null,
                maxDate: null
            });
        }
    });

    // 退房日期选择器
    const to = $('#CheckOut').datepicker({
        dateFormat: dateFormat,
        defaultDate: '+1w',
        changeMonth: true,
        numberOfMonths: 1
    }).on('change', function() {
        const checkOutDate = getDate(this);
        if (checkOutDate) {
            from.datepicker('option', 'maxDate', checkOutDate);
        } else {
            from.datepicker('option', 'maxDate', null);
        }
    });
});

关键细节说明 #

1. 日期加X天的方法：使用$.datepicker.addDays(date, days)，第一个参数是parseDate解析得到的Date对象，第二个参数为要添加的天数（正数加、负数减），比手动操作原生Date对象更适配日期格式。
2. 退房范围限制：入住日期选定后，同时设置退房日期的minDate（入住当天）和maxDate（入住日+X天），严格限定可选范围。
3. 异常兼容：若入住日期手动输入格式错误，自动重置退房日期的限制规则，避免出现无法选择的情况。

内容的提问来源于stack exchange，提问作者Andy Dignall