單個jQuery UI DatePicker不起作用

Question

我在視圖上有三個文本輸入。所有課程都有datepicker。

@model DateTime? 
@{ 
    string editText = Model.HasValue ? Model.Value.ToShortDateString() : ""; 
} 
@Html.TextBox("", editText, new { @class = "datepicker" }) 

這些都設置了日期選擇器在我_Layout模板下面的代碼：

$(function() { 
    $(".datepicker").datepicker({ 
     dateFormat: "yy/mm/dd" 
    }); 
}); 

現在

@Html.TextBox("Dummy", DateTime.Now, new { @class = "datepicker" }) 
@Html.EditorFor(model => model.StartDate) 
@Html.EditorFor(model => model.EndDate) 

底部的兩個被我DateTime編輯模板覆蓋彈出日期選擇器StartDate，只是完全沒有響應。它甚至不會改變幾個月，不用介意選擇一個日期。所有三個輸入都是相同的。無論StartDate和EndDate被聲明爲不可爲空DateTime領域：

[Display(Name = "Start Date")] 
    public DateTime StartDate { get; set; } 

    [Display(Name = "End Date")] 
    public DateTime EndDate { get; set; } 

我使用jQuery 1.10.2和jQuery UI 1.10.3，無論是通過安裝的NuGet。我必須包括以下腳本才能使DatePickers正常工作：

<script src="http://code.jquery.com/jquery-migrate-1.1.1.js"></script> 

我完全受阻。

修訂： 錯誤顯示在JavaScript控制檯：

點擊每天產生錯誤「無法設置屬性未定義‘CURRENTDAY’」。

點擊上一個或下一個月份圖標產生「未定義無法讀取屬性‘設置’」

Answer 1

使用此鏈接獲取更多信息：http://jqueryui.com/datepicker/

，努力改變毫米MM

$(function() { 
    $(".datepicker").datepicker({ 
     dateFormat: "yy/MM/dd" 
    }); 
}); 

第二個答案：

嘗試使用此日期/時間選擇： http://tarruda.github.io/bootstrap-datetimepicker/ 或 http://www.eyecon.ro/bootstrap-datepicker/

我用它們兩個，併爲我工作。 希望這個援助。

Answer 2

我想你沒有一個文本框的唯一ID？ 日期選擇器需要一個唯一的ID。 要麼將​​其添加在JavaScript

$(function() { 
    $(".datepicker:not(.hasdatepicker)").uniqueId().datepicker({ 
     dateFormat: "yy/mm/dd" 
    }); 
}); 

或剃刀將​​其添加

@Html.TextBox("", editText, new { @class = "datepicker", id = string.Format("datepicker-{0:N}", Guid.NewGuid()) }) 

Answer 3

我使用的每個腳本文件的確切版本（jQuery的，jQuery的UI，jQuery的遷移），並使用你的代碼，發現沒有錯誤。它工作正常，沒有任何問題。

模態：

public class Test 
    { 
     [Display(Name = "Start Date")] 
     public DateTime StartDate { get; set; } 

     [Display(Name = "End Date")] 
     public DateTime EndDate { get; set; } 
    } 

編輯視圖：

@model MvcApplication2.Models.Test 

@{ 
    ViewBag.Title = "Test"; 
    Layout = "~/Views/Shared/_Layout.cshtml"; 
} 

<h2>Test</h2> 

@using (Html.BeginForm()) { 
    @Html.ValidationSummary(true) 

    <fieldset> 
     <legend>Test</legend> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.StartDate) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.StartDate) 
      @Html.ValidationMessageFor(model => model.StartDate) 
     </div> 

     <div class="editor-label"> 
      @Html.LabelFor(model => model.EndDate) 
     </div> 
     <div class="editor-field"> 
      @Html.EditorFor(model => model.EndDate) 
      @Html.ValidationMessageFor(model => model.EndDate) 
     </div> 

     <p> 
      <input type="submit" value="Save" /> 
     </p> 
    </fieldset> 
} 

<div> 
    @Html.ActionLink("Back to List", "Index") 
</div> 

@section Scripts { 
    @Scripts.Render("~/bundles/jqueryval") 
} 

共享/ EditorTemplates/DateTime.Cshtml

@model DateTime? 
@{ 
    string editText = Model.HasValue ? Model.Value.ToShortDateString() : ""; 
} 
@Html.TextBox("", editText, new { @class = "datepicker" }) 

<script type="text/javascript"> 
    $(function() { 
     $(".datepicker").datepicker({ 
      dateFormat: "yy/mm/dd" 
     }); 
    }); 
</script> 

以下是CSS和JS文件的順序。

@Styles.Render("~/Content/css") 
    @Styles.Render("~/Content/themes/base/jquery-ui.css") 
    @Scripts.Render("~/bundles/jquery") 
    @Scripts.Render("~/Scripts/jquery-migrate-1.1.1.js") 
    @Scripts.Render("~/bundles/jqueryui") 
    @Scripts.Render("~/bundles/modernizr") 

這似乎是別的什麼導致的問題，而不是任何腳本文件或其他任何東西。您可能想在新項目中嘗試我的代碼。