javascript - ASP .NET MVC、DateTimePicker 和 jQuery 验证

Question

我有一个带有 StartTime 日期和 EndTime 日期的模型:

[Required]
[DataType(DataType.DateTime)]
public DateTime StartTime { get; set; }

[Required]
[DataType(DataType.DateTime)]
public DateTime EndTime { get; set; }

使用这两个日期的当前 View 具有以下形式:

@if (Roles.IsUserInRole("Teacher"))
{
    <h2>AddSession</h2>

    using (Html.BeginForm("SessionAdded", "Course", FormMethod.Post, new { id = "myform" }))
    {
        @Html.ValidationSummary(true)
        <fieldset>
            <legend>Add Session</legend>
            <div class="editor-label">
                @Html.LabelFor(model => model.Name)
            </div>
            <div class="editor-field">
                @Html.EditorFor(model => model.Name)
                @Html.ValidationMessageFor(model => model.Name)
            </div>
            <div class="editor-label">
                @Html.LabelFor(model => model.StartTime)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.StartTime, new { @class = "date" , id = "StartTime" })
                @Html.ValidationMessageFor(model => model.StartTime)
            </div>
            <div class="editor-label">
                @Html.LabelFor(model => model.EndTime)
            </div>
            <div class="editor-field">
                @Html.TextBoxFor(model => model.EndTime, new { @class = "date", id = "EndTime" })
                @Html.ValidationMessageFor(model => model.EndTime)
            </div>
            <p>
                <input id="submit" type="submit" />
            </p>
        </fieldset>
    }
}

当我删除时: <script src="@Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>在我看来，我没有问题。

但是当我使用 jquery.validate ，我的两个字段返回:Please enter a valid date. .我用 DateTimePicker for jQuery UI .

我有以下 Javascript 代码:

$(document).ready(function () {

var datepickers = $('.date').datetimepicker({
    minDate: 0,
    dateFormat: "dd/mm/yy",
    timeFormat: "hh:mm",
    onSelect: function (date) {
        var option = this.id == 'StartTime' ? 'minDate' : 'maxDate';
        datepickers.not('#' + this.id).datepicker('option', option, date);
    }
});

$("#myform").validate({
    ignore: ".date"
})

});

我想忽略我的两个日期字段 (class="date") 的 jQuery 验证，因为它检查特定的日期格式，我必须在我的应用程序中使用这个:dd/mm/yyyy hh:mm .

我也尝试做一个自定义验证器但没有成功。我总是得到 Please enter a valid date错误...

谢谢你的帮助，

埃德

Answer 1

我已经做到了这一点，并努力让它跨浏览器为多个本地客户端工作。如果您可以明确地说您只需要一种日期格式，则可以通过以下步骤实现。

在您的 Views\Shared\EditorTemplates 文件夹中包含一个名为 Date.cshtml 模板的日期编辑器，如下所示:

@model DateTime?
@Html.TextBox("", Model.HasValue ? Model.Value.ToString("dd/MM/yyyy") : "", new { @class = "date" }) 

包括一些 javascript 以在合理的地方调用日期选择器，例如在共享布局页面或共享脚本中，如下所示:

$(document).ready(function () {
    $('.date').datepicker({ dateFormat: "dd/mm/yy", firstDay: 1, maxDate: "+0d" });
    $.validator.methods.date = function () { return true; };
});

您可能想要更改 validator.methods.date 函数，不仅要返回 true，还要根据您的文化要求进行验证

最后，将您的 IIS 设置设置为文化设置，可以在 Web 配置中设置为 pollirrata，也可以在 IIS 管理 UI 的 .Net 全局化设置中完成。