Kendo DatePicker 无法验证自定义日期格式

Question

我正在使用 Kendo DatePicker 编辑在我的 ASP.NET MVC 4 项目的 Kendo Grid 中显示的日期字段。为了让用于 Date 字段的 DatePicker 使用自定义日期格式字符串，我将 EditorTemplates 文件夹下的 Date.cshtml 文件更新为以下内容：

@(Html.Kendo().DatePickerFor(m => m).Format("dd/MM/yyyy"))

通过这样做，我设法让 DatePicker 显示我想要的格式。但是，它无法通过手动键入或从弹出日历中选择输入的某些日期进行验证。

经过进一步调查，我可以说 DatePicker 正在根据 M/d/Y 格式验证日期。这个假设是基于我的基础，即 2012 年 12 月 1 日是有效日期，而 2012 年 13 月 1 日则不是。

我还尝试将.ParseFormat("dd/MM/yyyy") 添加到Date.cshtml 中的DatePicker 声明的末尾，但它没有解决任何问题。所以我会说这绝对是一个错误，我稍后会向 Telerik 报告。

但目前，我正在寻找一种解决方法来使其正常工作。我发现我可以在 Javascript 中覆盖 kendo.ui.validator.rules.mvcdate 以拥有自己的验证功能。虽然这在 Chrome 中可以正常工作，但在 IE9 中无法正常工作。

那么，有什么想法可以让 DatePicker 接受dd/MM/yyyy 输入格式吗？提前致谢。

Answer 1

在内部，ASP.NET MVC（不显眼的客户端验证）的日期验证规则使用kendo.parseDate(string) 方法，如果没有定义格式/s，则内部将使用the predefined date patterns。我想在您的情况下，默认文化是“en-US”，这就是验证失败的原因，因为“dd/MM/yyyy”格式的日期被认为是无效的。一种可能的解决方案是覆盖日期验证规则（如您所做的那样）并使用特定格式解析字符串。另一个选项是为页面设置差异文化设置。 For instance, the short date format for the "de-DE" culture is "dd/MM/yyyy".

Answer 2

我用这个方法，效果很好..

在你的页面中添加这两行..

<script src="@Url.Content("~/Scripts/jquery.validate.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")"></script>

然后重写jQuery日期验证方法..

<script>
    $(document).ready(function () {
        kendo.culture("en-MY"); //your culture
        $.validator.addMethod('date',
           function (value, element) {
               return this.optional(element) || kendo.parseDate(value)
           });
    });
</script>

同时在我的Web.config 我有这个...

<system.web>
    <globalization uiCulture="en-MY" culture="en-MY"></globalization>
</system.web>

Answer 3

  [DataType(DataType.Date)]
  [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}", ApplyFormatInEditMode = true)]
  [Required(ErrorMessage = "Pick a date from Kendo Date Picker")]
   public DateTime mydate{ get; set; }

    @(Html.Kendo().DatePickerFor(m=>m.mydate)
                .Name("MyDate")
                .Format("dd/MM/yyyy")
                 .ParseFormats(new string[] {"dd/MM/yyyy"}))

/添加脚本document.ready函数/

     $(document).ready(function () { kendo.culture("en-GB");

         $.validator.methods['date'] = function (value, element) {
    var check = false;
    var re = /^\d{1,2}\/\d{1,2}\/\d{4}$/;
    if (re.test(value)) {

        var adata = value.split('/');
        var dd = parseInt(adata[0], 10);

        var mm = parseInt(adata[1], 10);
        var yyyy = parseInt(adata[2], 10);
        var xdata = new Date(yyyy, (mm - 1), dd);

        if ((xdata.getFullYear() == yyyy) && (xdata.getMonth() == (mm - 1)) && 
            (xdata.getDate() == dd)) {

            check = true;
        }
        else {
            alert(value);
            check = false;
        }

    } else
        check = false;
    return this.optional(element) || check;
}

});

Answer 4

我更改了日期验证规则：

$.validator.methods.date = function (value, element) {
    return this.optional(element) || /^\d\d?-\w\w\w-\d\d\d\d/.test(value);
};

我的格式与你的略有不同，但你应该可以修改它。

Answer 5

我在使用甘特图组件here 时遇到了同样的问题。 Telerik 支持通过将我推荐给here 来帮助我。

我的关键遗漏是我没有在我的 _Layout.vbhtml 文件中包含以下内容：

<script>
kendo.culture("en-GB");
</script>

一旦包含（连同适当的 kendo.culture 脚本在我的 JS 包中），助手就会开始按预期运行。

Answer 6

简单的答案是不要使用自定义日期格式。只需始终明确执行 .Format("MM/dd/yyyy") 并且不要使用 "dd/MM/yyyy" （"yyyy-MM-dd" 或 "MMM d, yyyy" 可能没问题）。并在控制面板或 Web.config 中将您的网络服务器设置为使用美国区域设置。

现在解释问题以及如何实际使 dd/MM/yyyy 工作：

剑道日期验证使用默认的剑道文化日期格式 kendo.culture().calendar.patterns.d（和 .t 表示时间）。如果您直接设置它或应用不同的文化，则会设置验证的日期格式。它使用 kendo.parseDate 所以像“MMM d, yyyy”这样的东西会很好，但是如果 d > 12 并且正在使用默认的美国文化，像“dd/MM/yyyy”这样的东西会验证失败（参见 kendo Globalization demo 了解如何切换文化）。

发生这种情况的原因是因为 DatePicker.Format(...) 略有损坏。这是 kendo.aspnetmvc.js 中的一个错误，它提供了一个替代日期验证功能，它忽略 DatePicker 格式，只使用当前文化日期格式运行 parseDate。这是固定的javascript：

    date: function(input) {
        var dp = input.data("kendoDatePicker") || input.data("kendoDateTimePicker");
        if (dp != undefined) {
            return input.val() === "" || kendo.parseDate(input.val(), dp.options.format) !== null;
        }

        return input.val() === "" || kendo.parseDate(input.val()) !== null;
    },

此外，kendo.validator.js/kendo.web.js 中的日期验证器功能存在一个小错误，这会导致 Internet Explorer 中网格上的日期验证总是失败。

此外，请确保您的网络服务器全球化设置为美国以匹配剑道文化（在 Web.config 或 Windows 区域控制面板中）。 Firefox 发布 MM/dd/yyyy 并且网络服务器需要匹配它。此外，如果您未明确指定 DatePicker.Format，则 Web 服务器区域日期格式将应用于所有客户端浏览器。因此，如果您的 Web 服务器在 Windows 的控制面板中设置了加拿大/英国日期格式，则 kendo 网格 DatePickers 默认为 dd/MM/yyyy，然后在验证中出错，并且当 firefox 发布到 Web 服务器时再次出错（firefox 发布下的 kendo 默认文化MM/dd/yyyy 所以如果你的 web 服务器需要 dd/MM/yyyy，mvc 日期绑定失败）。

注意：如果您更喜欢使用非 mvc 日期验证器：删除 data-val-date 属性。添加：数据类型=\"日期\" 数据格式=\"dd/MM/yyyy h:mm:ss tt\"。我相信这是不可能使用 html 帮助程序的。您必须直接指定 html 和 javascript。

注意：由于缺少“data-val-date”属性，非网格 DatePickers 似乎没有验证。

另外：“请记住，KendoUI 首先使用 parseFormats 选项来解析日期，然后将其转换为格式选项，最后运行验证。这就是为什么我在验证中使用 yyyy-MM-dd 而不是 ["MM/dd/yyyy ", "dd/MM/yyyy"]." - How to validate a date is in the format yyyy-MM-dd using kendo validator?

Web.config 的全球化线：

<globalization requestEncoding="utf-8" responseEncoding="utf-8" culture="en-US" uiCulture="en-US" />