Question

下面是一个EditorTemplate，它使用EditorFor帮助器呈现Bootstrap datetimepicker，我看到的问题是脚本部分。它适用于每个视图一个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>

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

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>

DatePicker编辑器模板

2 个答案: