DatePicker 编辑器模板

下面是一个 EditorTemplate，它使用以下命令呈现 Bootstrap 日期时间选择器EditorFor助手，我看到的问题是脚本部分。对于一个人来说效果还不错DateTimePicker每个视图 - 但由于我使用类选择器，每当我使用 2 个或更多DateTimePicker每个视图呈现重复的内容<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>

正如您正确推断的那样，您遇到的问题是，当视图中包含两个日期选择器时，编辑器模板中定义的脚本块将运行两次；当它运行两次时，插件的行为不符合预期。

解决此问题的一种方法是仅针对每个脚本块中编辑器模板中的日期选择器输入。例如，

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