asp.net-mvc – DatePicker编辑器模板

发布时间：2020-12-16 09:13:34 所属栏目：asp.Net 来源：网络整理

导读：下面是一个EditorTemplate,它使用EditorFor帮助器呈现Bootstrap datetimepicker,我看到的问题是脚本部分.它适用于每个视图的一个DateTimePicker – 但由于我正在使用类选择器,每当我每个视图使用2个或更多DateTimePickers时,它会呈现重复的 script部分,使DOM

下面是一个EditorTemplate,它使用EditorFor帮助器呈现Bootstrap datetimepicker,我看到的问题是脚本部分.它适用于每个视图的一个DateTimePicker – 但由于我正在使用类选择器,每当我每个视图使用2个或更多DateTimePickers时,它会呈现重复的< 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>

解决方法

正确推断出的问题是,当视图中包含两个日期选择器时,编辑器模板中定义的脚本块将运行两次;当它运行两次时,插件的行为不符合预期.

对此的一个解决方案是仅针对每个脚本块中的编辑器模板中的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>

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!