Редактор шаблона DatePicker

Question

Ниже приведен шаблон EditorTemplate, в котором используется помощник datetimepicker Bootstrap с помощниками EditorFor, проблема, которую я вижу, связана с секцией сценария. Он работает нормально для одного 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> 

Answer 1

Проблема у вас есть, как вы правильно вывести, что блок сценария определяется в шаблоне редактора будет работать в два раза, когда вы два datepickers включены в представлении; Когда он запускается дважды, поведение плагина не так ожидалось.

Одним из решений для этого является таргетинг только ввода даты в шаблоне редактора в каждом блоке сценария. Например,

@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> 

Answer 2

Что касается отображения сценария один раз, а как насчет следующего? Это работает для меня до сих пор. Любые потенциальные проблемы?

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>