Question

我正在VS2017 MVC（v5.2.3.0）中使用Bootstrap（v3.3.7）和jQuery（v2.2.4）.load（）函数将HTML加载到Bootstrap模式中。加载模式后，日期选择器将无法正常运行。如果我在页面加载时将模式加载到DOM中，但是在创建DOM之后不加载，它将正常工作。

我当前正在将datepicker用于引导程序v1.6.4。我尝试更新到最新版本：v1.8.0-没什么区别。

实际行为

日期选择器已初始化，但是所选日期从未设置为输入值-它只是保持空白。

示例代码

//Modal partial html (only showing the HTML Helper for simplicity)

@Html.TextBoxFor(model => model.FollowUpDate,
new
{
    data_input = "followup-date",
    data_datepicker_short_date = "",
    data_val = "true",
    data_val_required = "Follow Up Date is required.",
    @class = "datepicker"
})


//Initialize datepicker in modal partial as followed

<script>
$(document).ready(function() {
    $('#FollowUpDate').datepicker({
        dateFormat: 'mm/dd/yy',
        autoclose: true,
        startDate: new Date('@String.Format("{0:MM/dd/yyy}", DateTime.Now.AddDays(m))'),
        endDate: new Date('@String.Format("{0:MM/dd/yyy}", DateTime.Now.AddDays(p-1))')
    });
});

无法设置日期：我可以单击任何日期，包括在datepicker的月份和年份按钮上导航，但是datepicker保持不变-除非我在datepicker之外单击，否则不会关闭。

Datepicker in modal after jQuery load function

这是我的jQuery .load函数，我在其中初始化日期选择器，但是它却选择了，但当我选择一个不显示日期的日期时，有时它就会消失。

$(modal.modalId + ' .modal-content').load(modal.getURL, function () {
    $('#FollowUpDate').datepicker({
        dateFormat: 'mm/dd/yy',
        autoclose: true,
    });
});

Answer 1

此问题已解决。问题是由于数据通过“ show.bs.modal”事件加载到模态中，而模态内部的引导日期选择器调用了同一事件。结果是，每次将焦点设置到日期选择器时，模态数据都会刷新。要解决此问题，我只需要在调用该模式事件后解除绑定即可。

Datepicker无法在使用jQuery .load（）返回html的模式中正常工作

1 个答案: