ASP.NET MVC 4不工作與jQuery的日期選擇器

Question

我是一個asp.net jquery和html5的初學者，我正在開發一個asp.net mvc 4網站，我有一個帶有兩個日期字段的窗體。我不想手動插入日期，所以我試圖用這個解決方案來實現一個簡單的日期選擇器：

 <fieldset> 
    <legend>RangeDateViewModel</legend> 
    <div class="editor-label"> 
     Start Date 
    </div> 
    <div class="editor-field"> 
     @Html.TextBoxFor(model => model.StartDate, new{ @class = "date" }) 
     @Html.ValidationMessageFor(model => model.StartDate) 
    </div> 

    <div class="editor-label"> 
     End Date 
    </div> 
    <div class="editor-field"> 
     @Html.TextBoxFor(model => model.EndDate, new{ @class = "date" }) 
     @Html.ValidationMessageFor(model => model.EndDate) 
     </div> 

     <p> 
      <input type="submit" value="Create" /> 
     </p> 
    </fieldset> 


    } 

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

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

@Scripts.Render("~/bundles/jqueryui") 
@Styles.Render("~/Content/themes/base/css") 

<script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")" type="text/javascript"></script> 
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.11.min.js")" type="text/javascript"></script> 
<script type="text/javascript"> 
    $(document).ready(function() { 
     $(".date").datepicker(); 
    }); 
</script> 
} 

代碼工作不錯，但如果我選擇從13日日起至30/31次的這個月我總是有同樣的警告：「字段StartDate必須是日期。」和「字段EndDate必須是日期。」

編輯： 添加我的視圖模型作爲問：

public class RangeDateViewModel 
{ 
    public DateTime StartDate { get; set; } 

    public DateTime EndDate { get; set; } 

} 

Answer 1

你需要告訴你不使用一個月的第一個日期格式的DatePicker：

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

然而，這可能不是你問題的一個重要部分（並且根據你的瀏覽器文化，日期選擇器可能已經使用了第一天的日期格式）。

第一天的日期格式和jQuery validation以及MVC binding也有問題。這是我堅持使用year first date format (yyyy-mm-dd)的主要原因之一，因爲它可以被所有各種庫正確解析。

Answer 2

JQuery是一個選項，但您可以採用.NET方法。我認爲StartDate和EndDate來自ViewModel並且是DateTime類型？

只需使用@Html.EditorFor intend @Html.TextBoxFor並立即將您的控件轉換爲DatePickers。

您還可以通過在您的ViewModel DateTime上指定數據註釋屬性來設置關於日期如何顯示和操作的特定規則。例如，這可能是你的起始日期視圖模型屬性：

[DisplayFormat(NullDisplayText = "", DataFormatString = "{0:d}")] 
[Display(Name = "Start Date")] 
public DateTime? StartDate{ get; set; } 

不知道如何格式化用C＃進一步您的日期選擇器？沒問題，繼續使用JQuery：

$(':input[data-datepicker]').datepicker({ dateFormat: 'dd/mm/yy' });