3

以下は、ヘルパーを使用して Bootstrap datetimepicker をレンダリングする EditorTemplate ですEditorFor。私が見ている問題は、スクリプト セクションにあります。ビューごとに 1 つでも問題なく動作しDateTimePickerますが、クラス セレクターを使用しているため、ビューごとに 2 つ以上DateTimePickerの s を使用するたびに、重複するセクションがレンダリングされ、カレンダーを呼び出す場所<script>について DOM が混乱します。TextBoxここで何が欠けていますか？

   @model DateTime?
   <div class='input-group date datePicker'>
      <span class="input-group-sm">
         @Html.TextBox("", Model.HasValue ? Model.Value.ToString("d") : String.Empty)
      </span>
   </div>
   <script type="text/javascript">
       $(function() {
       $('.datePicker').datetimepicker({
           pickTime: false
       });
   });
   </script>
4

2 に答える 2

11

正しく推測した問題は、ビューに2つの日付ピッカーが含まれている場合、エディターテンプレートで定義されたスクリプトブロックが2回実行されることです。2 回実行すると、プラグインの動作が期待どおりになりません。

これに対する 1 つの解決策は、各スクリプト ブロックのエディター テンプレートの datepicker 入力のみをターゲットにすることです。例えば、

@model DateTime?
<div class='input-group date datePicker'>
   <span class="input-group-sm">
      @Html.TextBox("", Model.HasValue ? Model.Value.ToString("d") : String.Empty)
   </span>
</div>
<script type="text/javascript">
    $(function() {
        // target only the input in this editor template
        $('#@Html.IdForModel()').datetimepicker({
            pickTime: false
        });
    });
</script>
于 2014-03-23T21:31:08.893 に答える
0

スクリプトを一度レンダリングする限り、次はどうでしょうか。これまでのところ私にとってはうまくいきます。潜在的な問題はありますか？

Editor Template - DateTime.cshtml

@model System.DateTime?
@Html.TextBox("", String.Format("{0:d}", Model.HasValue ? Model.Value.ToShortDateString() : string.Empty), new { @class = "datepicker" })


_Layout.cshtml

<script type="text/javascript">
  $().ready(function () {
    $('.datepicker').datepicker({
      changeMonth: true,
      changeYear: true,
      showOn: "button",
      buttonImage: "/Images/calendar.gif",
      buttonImageOnly: true
    });
   }
</script>
于 2015-03-05T00:19:01.687 に答える