DatePicker Editor Template

asp.net-mvc, asp.net-mvc-4, bootstrap-datetimepicker, mvc-editor-templates

Solution

The problem you have as you have correctly deduced is that the script block defined in the editor template will run twice when you have two datepickers included in a view; When it is run twice, the plugin's behaviour is not as expected.

One solution to this would be to target only the datepicker input in the editor template in each script block. For example,

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

Problem

Below is an EditorTemplate that renders a Bootstrap datetimepicker with `EditorFor` helpers, the problem I am seeing is with the script section. It works OK for one `DateTimePicker` per view - but since I am using class selector, whenever I use 2 or more `DateTimePicker`s per view it renders duplicate `<script>` sections, confusing the DOM as to on which `TextBox` to invoke the calendar. What am I missing here? ``` @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> ```

Original source