在 JQuery bootstrap 模型的部分视图中有一个日期时间选择器

Question

我想要一个带有日期选择器的 bootstrap 模型。我从这个例子中复制了所有内容并且工作正常。

http://jsfiddle.net/sudiptabanerjee/93eTU/

问题是，我的对话框内容是局部视图，并且是用 JQuery 设置的。它似乎从不显示日期选择器。我已经复制了我的代码的相关部分。

所以在屏幕上有一个像

这样的按钮

<button type="button" class="btn btn-primary" id="btnEdit"
        data-itemId=@item.ItemId
        data-toggle="modal" 
        data-target="#myModal">
        Edit
</button>

其中有一个 JQuery 点击事件

$(document).on("click", "# btnEdit", function (e) {
   $.ajax({ url: "/Item/Edit",
            datatype: "text",
            data: { itemId: $(this).attr('data-ItemId) },
            type: "GET",
          }).done(function (partialViewResult) {
          $(".modal-content").html(partialViewResult);
    });
});

}); 然后转到名为 ItemController 的 MVC 控制器并调用 Edit 获取局部视图 public ActionResult 编辑（Guid itemId） { return PartialView("_Edit", GetByItemID(itemId) ); }

Edit 部分视图如下所示，这就是不显示带有 id datepicker 的输入的内容

@model Project.Models.Item
@using (Html.BeginForm())
{
   @Html.AntiForgeryToken()
   <div class="form-horizontal">
     <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria- label="Close"><span aria-hidden="true">&times;</span></button>
         <h4 class="modal-title" id="myModalLabel"> Item</h4>
     </div>
     @Html.ValidationSummary(true, "", new { @class = "text-danger" })
     <p>Date: <input type="text" id="datepicker" class="datepicker"></p>
 </div>
}

@section Scripts {
   @Scripts.Render("~/bundles/jqueryval")
 }

有一个 JS 被调用，它为所有带有 class 日期选择器的东西提供了一个日期选择器。当文本框在其他任何地方时它都有效，期望它在对话框中

 $(".datepicker").datepicker();

我也有 CSS 这样做

.clsDatePicker {  z-index: 100000; }

Answer 1

问题是在您从 prartial 视图添加模态内容之前加载了用于 datetimePicker 插件的 JS，在这种情况下，当 DOM 已经准备就绪时，插件将找不到从视图中动态添加的元素。

从动态视图添加内容后尝试初始化日期时间选择器

$(document).on("click", "# btnEdit", function (e) {
   $.ajax({ url: "/Item/Edit",
            datatype: "text",
            data: { itemId: $(this).attr('data-ItemId) },
            type: "GET",
          }).done(function (partialViewResult) {
          $(".modal-content").html(partialViewResult);
$(".datepicker").datepicker();
    });
});

希望这对您有所帮助:)

在 JQuery bootstrap 模型的部分视图中有一个日期时间选择器

Having a datetime picker in a partial view inside a JQuery bootstrap model

asp.net-mvc

jquery

datetimepicker

twitter-bootstrap