在使用 jQuery.load() 返回 html 的模态中，日期选择器无法正常工作

Question

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

我目前正在使用 bootstrap v1.6.4 的日期选择器。我已经尝试更新到最新版本：v1.8.0 - 没有区别。

实际行为

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

示例代码

//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 in modal after jQuery load function

这是我的 jQuery .load 函数，我在其中初始化日期选择器，它确实如此，但是当我 select 一个日期时它不显示，或者有时日期出现然后很快消失.

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

Answer 1

已解决。问题是由于数据通过 'show.bs.modal' 事件加载到模态中，而模态中的 bootstrap 日期选择器调用相同的事件。由此产生的行为是每次将焦点设置到日期选择器时模态数据都会刷新。为了解决这个问题，我只需要在调用后解除绑定模态事件。

在使用 jQuery.load() 返回 html 的模态中，日期选择器无法正常工作

Datepicker does not work properly in modal where html is returned using jQuery .load()

model-view-controller

jquery

bootstrap-modal

bootstrap-datepicker