Bootstrap Datepicker过早打开出现重复问题求助

使用Bootstrap Datepicker时遇到异常：若在页面所有请求完成前打开日期选择器，待请求结束后，下拉框内会额外生成一个inline-datepicker。相关代码如下：

HTML 代码 #

<div class="hand-date-picker mr-3">
@Html.TextBox("InHandDate", "", new { @class = "datepicker", @group = "inhanddate", @data_date_format = HelperMethods.GetDateFormat(), @data_test_selector = "txtInHandDate" })                                                                   <span class="icon-calendar" data-time-icon="icon-time" data-date-icon="icon-calendar"></span>
</div>

初始化代码 #

$("#InHandDate").datepicker({
    //@ts-ignore
    daysOfWeekDisabled: '0,6'
});
$("#InHandDate").datepicker('setDaysOfWeekDisabled', [0, 6])

脚本代码 #

$(document).ready(function () {
    let minDate;
    if ($("input[class='PickUpShipping']").is(":checked")){
        $(".CashOnPickup").show();
        $("#warehouses-select").css("display", "block");
        minDate = '@(HelperMethods.GetDateTime())';
    } else {
        $(".CashOnPickup").hide();
        $("#warehouses-select").css("display", "none");
        minDate = '@(HelperMethods.GetDateTime().AddDays(1))';
    }
    $("#InHandDate").datepicker('setStartDate', new Date(minDate))
});

$("input[name='ShippingOptions']").on("click", function (ev) {
    let minDate;
    if ($(this).data('shippingcode') === 'Pickup') {
        $(".CashOnPickup").show();
        $("#warehouses-select").css("display", "block");
        minDate = '@(HelperMethods.GetDateTime())';
    } else {
        $(".CashOnPickup").hide();
        $(".CashOnPickup input").prop('checked', false);
        $("#warehouses-select").css("display", "none");
        minDate = '@(HelperMethods.GetDateTime().AddDays(1))';
    }
    $("#InHandDate").datepicker('setStartDate', new Date(minDate))
});

$("input[name='ShippingOptions']").on("change", function (ev) {
    $("#InHandDate").datepicker('setDate', "");
});

1. 操作前关闭日期选择器 #

在调用setStartDate、setDate等修改配置的方法前，先关闭已打开的选择器，避免重复渲染面板：

// 先关闭选择器
$("#InHandDate").datepicker('hide');
// 再执行配置修改
$("#InHandDate").datepicker('setStartDate', new Date(minDate));

将上述逻辑替换所有修改日期选择器配置的代码块。

2. 合并重复的初始化配置 #

原代码中先初始化daysOfWeekDisabled: '0,6'，又调用setDaysOfWeekDisabled([0,6])属于重复操作，合并成一次初始化即可：

$("#InHandDate").datepicker({
    //@ts-ignore
    daysOfWeekDisabled: [0, 6]
});

3. 等待所有异步请求完成后再处理 #

如果页面存在未完成的异步请求，可通过$.ajaxStop()监听请求完成事件，再执行日期选择器的配置修改：

$(document).ajaxStop(function() {
    let minDate;
    if ($("input[class='PickUpShipping']").is(":checked")){
        $(".CashOnPickup").show();
        $("#warehouses-select").css("display", "block");
        minDate = '@(HelperMethods.GetDateTime())';
    } else {
        $(".CashOnPickup").hide();
        $("#warehouses-select").css("display", "none");
        minDate = '@(HelperMethods.GetDateTime().AddDays(1))';
    }
    $("#InHandDate").datepicker('hide').datepicker('setStartDate', new Date(minDate));
});

4. 兜底：清理重复面板 #

若仍出现重复面板，可在修改配置前手动移除多余的inline-datepicker元素：

// 移除额外生成的inline面板
$('.datepicker-inline').remove();
// 再执行配置操作
$("#InHandDate").datepicker('setStartDate', new Date(minDate));

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