如何在Kendo中验证dd/MM/yyyy格式日期 解决MVC表单提交报错问题

根本原因 #

你的问题本质是服务端模型绑定、客户端默认jQuery校验都默认使用MM/dd/yyyy的日期解析规则，当日期第一位（dd）大于12时会被判定为无效月份，所以校验失败。

解决方案 #

步骤1：配置服务端区域文化，适配dd/MM/yyyy格式

修改项目根目录的Web.config，在<system.web>节点下添加globalization配置，指定使用日/月/年格式的区域文化：

<system.web>
  <!-- 其他原有配置 -->
  <globalization culture="en-GB" uiCulture="en-GB" />
</system.web>

如果需要自定义日期解析规则，也可以单独注册DateTime类型的模型绑定器，在Global.asax的Application_Start方法中添加如下代码：

ModelBinders.Binders.Add(typeof(DateTime), new DateTimeModelBinder
{
    SuppressDefaultModelBindingErrors = false,
    DateTimeFormats = new[] { "dd/MM/yyyy HH:mm tt", "dd/MM/yyyy" }
});

步骤2：重写客户端jQuery验证的日期校验规则

默认jQuery Validate的日期校验方法使用MM/dd/yyyy规则，需要重写为适配你的格式的逻辑，直接用Kendo自带的日期解析方法更稳妥：

// 放在所有JS引入完成后、表单初始化之前执行
$.validator.methods.date = function (value, element) {
    if (!value) return true;
    // 按你指定的格式解析日期
    var parsedDate = kendo.parseDate(value, ["dd/MM/yyyy HH:mm tt", "dd/MM/yyyy"]);
    return this.optional(element) || parsedDate !== null;
};

步骤3：修复Kendo组件重复初始化的问题

你已经用Razor语法Html.Kendo().DateTimePickerFor初始化了日期组件，后面JS中再次调用$("#StartDateTime").kendoDateTimePicker()会导致组件配置冲突，直接绑定change事件即可：

$(document).ready(function () {
    function onChange() {
        var startPicker = $("#StartDateTime").data("kendoDateTimePicker");
        var startDate = startPicker.value();
        if (!startDate) return;
        var expDate = new Date(startDate);
        expDate.setHours(expDate.getHours() + 1);
        $("#ExpirationDateTime").data("kendoDateTimePicker").value(expDate);    
    }
    // 直接给已初始化的组件绑定change事件
    $("#StartDateTime").data("kendoDateTimePicker").bind("change", onChange);
});

步骤4（可选）：给模型补充格式配置

在模型属性上添加DisplayFormat特性，确保服务端渲染时格式统一：

[Required(ErrorMessage = "Start Datetime is required.")]
[DataType(DataType.DateTime)]
[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy HH:mm tt}", ApplyFormatInEditMode = true)]
public DateTime StartDateTime { get; set; }

[Required(ErrorMessage = "Expiration Datetime is required.")]
[DataType(DataType.DateTime)]
[DisplayFormat(DataFormatString = "{0:dd/MM/yyyy HH:mm tt}", ApplyFormatInEditMode = true)]
public DateTime ExpirationDateTime { get; set; }

做完以上配置后，dd/MM/yyyy格式的日期就可以正常通过前后端校验。

内容的提问来源于stack exchange，提问作者AJ31