ASP.NET MVC 5：DatePicker EditorTemplate錯誤，無法顯示多次

Question

我有一個EditorTemplateDateTime，其中我使用JQueryUI的datepicker。當我有多個日期被編輯時，只有第一個日期選擇器會顯示。

版本：

<package id="jQuery" version="2.1.3" targetFramework="net45" /> 
<package id="jQuery.UI.Combined" version="1.11.4" targetFramework="net45" /> 
<package id="Microsoft.AspNet.Mvc" version="5.2.2" targetFramework="net45" /> 

../Views/Shared/EditorTemplates/DateTime.cshtml：

@model DateTime? 
@Html.TextBox("", (Model.HasValue ? Model.Value.ToShortDateString() : 
string.Empty), new 
{ 
    @class = "form-control-static", 
    @id = "datepick" 
}) 

../Views/Shared/_Layout.cshtml - 腳本：

<script> 
    $(function() { 
     $("#datepick").datepicker({ 
      showWeek: true, 
      firstDay: 1, 
      monthNames: ["Januar", "Februar", "Marts", "April", "Maj", "Juni", "Juli", "August", "September", "Oktober", "November", "December"], 
      dateFormat: "dd-mm-yy", 
      changeYear: true 
     }); 
    }); 
</script> 

那裏我試圖編輯觀點：

<div class="form-group"> 
    @Html.LabelFor(model => model.StartDateTime, new { @class = "control-label col-md-2" }) 
    <div class="col-md-10"> 
     @Html.EditorFor(model => model.StartDateTime) 
     @Html.ValidationMessageFor(model => model.StartDateTime, "", new { @class = "text-danger" }) 
    </div> 
</div> 

<div class="form-group"> 
    @Html.LabelFor(model => model.EndDateTime, new {@class = "control-label col-md-2"}) 
    <div class="col-md-10"> 
     @Html.EditorFor(model => model.EndDateTime) 
     @Html.ValidationMessageFor(model => model.EndDateTime, "", new {@class = "text-danger"}) 
    </div> 
</div> 

至於說，只有第一個工作。我找不到任何幫助我的東西。希望你能。

Answer 1

發生這種情況的原因是因爲您對StartDateTime和EndDateTime有相同的id。請查看更多關於select an item using an id or class

由於ID是唯一的，該表達式總是選擇零個或一個元素取決於是否一個元素與存在指定的ID。

爲了解決這個問題，你必須使用一個class，因爲你可以選擇超過1元。

您的代碼將在這樣的改變：

../Views/Shared/EditorTemplates/DateTime.cshtml：

@model DateTime? 
@Html.TextBox("", (Model.HasValue ? Model.Value.ToShortDateString() : 
string.Empty), new 
{ 
    @class = "form-control-static datepick", 
}) 

../Views/Shared/_Layout.cshtml - 腳本：

<script> 
    $(function() { 
     $(".datepick").datepicker({ 
      showWeek: true, 
      firstDay: 1, 
      monthNames: ["Januar", "Februar", "Marts", "April", "Maj", "Juni", "Juli", "August", "September", "Oktober", "November", "December"], 
      dateFormat: "dd-mm-yy", 
      changeYear: true 
     }); 
    }); 
</script>