jQuery UI datepicker预订表单添加最少预订天数实现方法

修改思路 #

• 单独抽离可配置的最少预订天数变量，后续调整规则只需要修改该变量值，不需要改动核心逻辑
• 修复原代码中取件日期分支未定义selectedDate变量的隐性bug
• 每次取件日期变更/归还日期选择器唤起时，自动基于已选的取件日期，向后顺延指定天数计算出归还日期的最小可选值，自动禁用早于该日期的选项
• 新增无效值自动清理逻辑：如果用户之前选的归还日期早于新计算出的最小可选日期，自动清空归还日期输入框，避免提交无效预订数据

可直接替换的完整JS代码 #

// 可灵活调整的最少预订天数，后续修改规则直接改这个值即可
const MIN_BOOKING_DAYS = 3;

// 初始化预订表单日期选择器
jQuery("#cbx_reservation-form__pick-up-date-input, #cbx_reservation-form__return-date-input").datepicker({
    rangeSelect: true,
    beforeShow: customRange,
    onSelect: customRange,
    minDate: '+1d',
    dateFormat: 'mm/dd/yy',
    numberOfMonths: 2, 
});

function customRange(input) {
    // 取件日期选择器逻辑
    if (input.id == "cbx_reservation-form__pick-up-date-input") {
        jQuery("#ui-datepicker-div td").off();
        // 获取当前选中的取件日期
        const selectedPickupDate = jQuery("#cbx_reservation-form__pick-up-date-input").datepicker("getDate");
        if (selectedPickupDate != null) {
            // 计算最小归还日期：取件日 + 最少预订天数
            const minReturnDate = new Date(selectedPickupDate);
            minReturnDate.setDate(minReturnDate.getDate() + MIN_BOOKING_DAYS);
            // 设置归还日期的最小可选值
            jQuery('#cbx_reservation-form__return-date-input').datepicker('option', 'minDate', minReturnDate);
            // 校验已选的归还日期是否早于最新的最小可选值，如果是则清空
            const currentReturnDate = jQuery('#cbx_reservation-form__return-date-input').datepicker("getDate");
            if (currentReturnDate && currentReturnDate < minReturnDate) {
                jQuery('#cbx_reservation-form__return-date-input').val('');
            }
            jQuery('#cbx_reservation-form__return-date-input').datepicker('refresh');
        }
    }
    // 归还日期选择器逻辑
    if (input.id == "cbx_reservation-form__return-date-input") {
        jQuery("#ui-datepicker-div td").on({
            mouseenter: function() {
                jQuery(this).parent().addClass("finalRow");
                jQuery(".finalRow").prevAll().find("td:not(.ui-datepicker-unselectable)").addClass("highlight");
                jQuery(this).prevAll("td:not(.ui-datepicker-unselectable)").addClass("highlight");
           },
            mouseleave: function() {
                jQuery(this).parent().removeClass("finalRow");
                jQuery("#ui-datepicker-div td").removeClass("highlight");
            }
        });

        const selectedPickupDate = jQuery("#cbx_reservation-form__pick-up-date-input").datepicker("getDate");                
        if (selectedPickupDate != null) {
            // 计算最小归还日期：取件日 + 最少预订天数
            const minReturnDate = new Date(selectedPickupDate);
            minReturnDate.setDate(minReturnDate.getDate() + MIN_BOOKING_DAYS);
            jQuery('#cbx_reservation-form__return-date-input').datepicker('option', 'minDate', minReturnDate).datepicker('refresh');
        }
    }
}

效果说明 #

当设置MIN_BOOKING_DAYS = 3时，选择取件日期为07/04/2022，归还日期选择器会自动将07/07/2022设为最小可选值，所有早于该日期的选项都会被置灰不可选，符合最少预订3天的规则。如果后续需要调整最少预订天数，比如改成7天，只需要把顶部的MIN_BOOKING_DAYS变量值改成7即可，不需要修改其他逻辑。

现有HTML结构不需要做任何调整，直接替换原有JS日期选择器相关代码即可生效。

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