ASP.NET MVC 4 不适用于 jquery datepicker

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 字段必须是日期。”

编辑： 我按要求添加了我的 ViewModel：

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 而不是@Html.TextBoxFor，您的控件就会立即变成DatePickers。

您还可以通过在 ViewModel DateTime 上指定数据注释属性来设置有关日期如何显示和行为的特定规则。例如，这可能是您的 StartDate Viewmodel 属性：

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

不确定如何进一步使用 C# 格式化您的日期选择器？没问题，继续使用 JQuery：

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