Kendo日期选择器无法验证自定义日期格式。

Question

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

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

通过这样做，我成功地让日期选择器以我想要的格式显示。但是，对于一些输入的日期（无论是手动输入还是从弹出日历中选择），它们未能通过验证。

进一步调查发现，日期选择器基于“M/d/Y”格式验证日期。这个结论是基于以下发现得出的：12/1/2012是一个有效的日期，而13/1/2012则不是。

我还尝试在Date.cshtml中DatePicker声明的末尾添加.ParseFormat("dd/MM/yyyy")，但并没有解决问题。因此，我认为这肯定是一个错误，我会稍后向Telerik报告此问题。

但目前，我正在寻找一种解决方法。我发现我可以在Javascript中重写kendo.ui.validator.rules.mvcdate以使用自己的验证函数。虽然这在Chrome中工作得很好，但它在IE9中不起作用。

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

- Amry

---

你是否曾经向剑道论坛举报或发布过这件事？ - Patrick M

Answer 1

在 ASP.NET MVC 中，日期验证规则（即不突兀的客户端验证）内部使用 kendo.parseDate(string) 方法，该方法在没有定义格式时将使用预定义的日期格式。我猜测在您的情况下，默认的文化是 "en-US" ，这就是为什么验证失败的原因，因为 "dd/MM/yyyy" 格式的日期被认为是无效的内容。一种可能的解决方案是覆盖日期验证规则（就像您所做的那样），并使用特定的格式解析字符串。另一种选择是设置页面的不同文化设置。例如，"de-DE" 文化的短日期格式是 "dd/MM/yyyy" 。点击此处查看示例。

- George K

---

那对我来说是有效的。但是，如果Kendo MVC实现不在标准Kendo Javascript库之上执行未记录的神奇操作，我会更喜欢它。 - Amry

Kendo UI Validator默认不支持ASP.NET MVC离线验证。因此，您需要包含kendo.aspnetmvc.js，该文件提供了额外的验证规则。我认为这并不是神奇的东西。我们一定会改进有关Kendo MVC验证的文档。 - George K

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>

- Rosdi Kasim

---

我没有在web.config中使用全球化。但是您的解决方案脚本经过少量修改后效果很好：kendo.parseDate(value, "dd/MM/yyyy")。将所需格式添加到kendo.parseDate中即可。 - Issac

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;
}

});

- user3119287

Answer 4

当我使用甘特图组件这里时，遇到了同样的问题。Telerik支持通过将我引用到这里来帮助我找到正确的线索。

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

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

一旦（与适当的 kendo.culture 脚本一起）包含在我的 JS 捆绑包中，该帮助程序开始按预期运行。

- Rich Freeman

Answer 5

我修改了日期验证规则：

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

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

- J.P. Hamilton

---

你的解决方案对我无效。$.validator未定义，其中的代码未被触发。我认为Kendo不使用JQuery的验证器。 - Amry

Kendo UI有自己的验证器。它不是jQuery Validate。请查看此链接- http://demos.kendoui.com/web/validator/index.html - George K

Answer 6

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

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

Kendo 日期验证使用默认的 kendo culture 日期格式 kendo.culture().calendar.patterns.d（和 .t 用于时间）。如果直接设置此格式或应用不同的 culture，则设置正在进行验证的日期格式。它使用 kendo.parseDate，因此诸如“MMM d, yyyy”之类的东西就没问题了，但是如果 d > 12 并且使用默认的美国 culture（请参见 kendo 全球化演示以了解如何切换文化）则“dd/MM/yyyy”将无法通过验证。

发生这种情况的原因是 DatePicker.Format(...) 稍微有些错误。这是 kendo.aspnetmvc.js 中的一个 bug，它提供了一种替代的日期验证函数，该函数忽略 DatePicker 格式，并仅使用当前 culture 日期格式运行 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 服务器全球化设置为美国以匹配 kendo 文化（在 Web.config 或 Windows 区域控制面板中）。Firefox 发布 MM/dd/yyyy，Web 服务器需要匹配它。此外，如果您没有明确指定 DatePicker.Format，则 Web 服务器区域日期格式将应用于所有客户端浏览器。因此，如果您的 Web 服务器在 Windows 控制面板中设置了加拿大/英国日期格式，则 kendo 网格 DatePickers 默认为 dd/MM/yyyy，然后在验证时出现错误，当 Firefox 发布到 Web 服务器时再次出现错误（kendo 在 Firefox 下的默认文化是 MM/dd/yyyy，因此如果您的 Web 服务器期望 dd/MM/yyyy，则 MVC 日期绑定将失败）。

注意：如果您喜欢使用非 MVC 日期验证器：删除 data-val-date 属性。添加：data-type=\"date\" data-format=\"dd/MM/yyyy h:mm:ss tt\"。我认为这不可能使用 html 帮助程序实现。您必须直接指定 html 和 javascript。

注意：非网格 DatePicker 似乎没有验证，因为缺少 "data-val-date" 属性。

另外："记住，KendoUI首先使用parseFormats选项来解析日期，然后将其转换为format选项，并最后运行验证。这就是为什么我在验证中使用yyyy-MM-dd而不是["MM/dd/yyyy", "dd/MM/yyyy"]的原因。" - 如何使用kendo验证器验证日期格式为yyyy-MM-dd？

Web.config的全球化配置行：

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

- Curtis Yallop

---

几乎解决了我的问题...在error_handler中，它向我发送了一个关于日期格式的错误 - [值“12/24/2013 12:00:00 AM”对于סגירת לוז <br/>שרות无效。] 我的格式是dd/MM，我有@(Html.Kendo().DatePickerFor(m => m).Format("{0:dd/MM}")) - Tzvi Gregory Kaidanov