Bootstrap v1.5.0 datepicker选择入住日期后退房选择器不显示问题

触发异常的核心原因 #

• 配置了autoclose: true后又在changeDate事件中手动调用$(this).datepicker('hide')，重复的关闭操作会打乱组件内部的焦点与状态缓存
• 未做空值判断直接读取checkout.datepicker("getDate").valueOf()，当checkout还未选中过日期时，getDate返回null，调用valueOf会直接抛出空指针异常
• 调用checkout.datepicker("update")更新日期后，组件未自动同步内部状态，导致首次点击输入框时组件判定状态异常，不会弹出选择器

修复步骤 #

1. 删除多余的手动hide调用，由autoclose配置自动处理选择器关闭逻辑
2. 所有读取getDate返回值的位置先做空值判断，避免空指针报错
3. 完成checkout日期更新后主动触发一次输入框聚焦，同步组件内部状态

修复后代码 #

var nowTemp = new Date();
var now = new Date(nowTemp.getFullYear(), nowTemp.getMonth(), nowTemp.getDate(), 0, 0, 0, 0);
var checkin = $('.checkin').datepicker({
    todayHighlight: true,
    autoclose: true,
    beforeShowDay: function(date) {
        return date.valueOf() >= now.valueOf();
    },
    datesDisabled: test
}).on('changeDate', function(ev) {
    var checkoutDate = checkout.datepicker("getDate");
    // 先判断checkout是否已有选中值再做比较
    if (!checkoutDate || ev.date.valueOf() > checkoutDate.valueOf()) {
        var newDate = new Date(ev.date);
        newDate.setDate(newDate.getDate() + 1);
        checkout.datepicker("update", newDate);
        // 主动触发focus同步组件状态
        checkout[0].focus();
    }
});
var checkout = $('.checkout').datepicker({
    beforeShowDay: function(date) {
        var checkinDate = checkin.datepicker("getDate");
        if (!checkinDate) {
            return date.valueOf() >= new Date().valueOf();
        }
        return date.valueOf() > checkinDate.valueOf();
    },
    autoclose: true,
    datesDisabled: daylist
}).on('changeDate', function(ev) {});

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