JQueryブートストラップモデル内の部分ビューで日時ピッカーを使用する

Question

ブートストラップモデルと日付ピッカーが必要です。私はこの例からすべてをコピーして正常に動作しています。

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

問題は私のダイアログの内容が部分図とjQueryを使用して設定されている、です。それは決して日付ピッカーを表示しないようです。私は自分のコードの関連セクションをコピーしました。

だから、画面上のjQueryのクリックイベントがあり

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

のようなボタンもあり

$(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 Edit（Guid itemId） { return PartialView（ "_ Edit"、GetByItemID（itemId））; }

編集部分図は、次のようになり、これは、ID日付ピッカー

@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があると入力が表示されていないものです。これは、テキストボックスがどこか他の所にあるとき、私はまた、これは

.clsDatePicker { z-index: 100000; } 

Answer 1

問題があるDateTimePickerのプラグインのためのあなたのJSがあなたの前にロードされつつあることCSSを持っているときにそれをダイアログ

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

に、期待して動作しますこの場合、DOMがすでにプラグイン可能な場合、ビューから動的に追加された要素が見つからない場合は、モーダルコンテンツを追加しています。あなたのDateTimePickerを初期化

試みますが、このことができます:)あなたのモデルだ...第二に、ビューに返す取得する前に、モデルを初期化しているようだ