Kendo DatePicker未通过自定义日期格式验证

Question

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

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

通过这样做，我设法拥有的DatePicker显示格式，因为我想要它。但是，通过手动键入或从弹出日历中选择，其输入的某些日期的验证失败。

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

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

但暂时，我正在寻找一个解决方法，使这项工作。我发现我可以覆盖Javascript中的kendo.ui.validator.rules.mvcdate以拥有自己的验证功能。尽管Chrome的这项工作很好，但它在IE9中不起作用。

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

Answer 1

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

Answer 2

我改了日期的验证规则：

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

我的格式是比你的略有不同，但你应该可以对此进行修改。

Answer 3

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

现在的问题，以及如何的解释，实际上使DD/MM/YYYY工作：

剑道日期验证使用默认的剑道文化的日期格式kendo.culture（）calendar.patterns.d（和。时间）。如果您直接设置或应用不同的文化，则会设置针对其进行验证的日期格式。它使用kendo.parseDate，因此像“MMM d，yyyy”这样的东西会很好，但是如果d> 12并且默认的美国文化正在被使用，那么像“dd/MM/yyyy”这样的东西将会失败（参见kendo全球化演示切换文化）。

发生这种情况的原因是因为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服务器全球化设置为美国以匹配剑道文化（在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。

注意：由于缺少“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" /> 

Answer 4

[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 5

我用这个方法，它工作正常..

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

<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 6

当使用甘特组件here时，我遇到了同样的问题。 Telerik支持通过将我引向here，让我走上了正确的路线。

我的重要疏忽是，我没有列入我_Layout.vbhtml文件中的以下内容：

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

一旦包括（在我的JS束适当kendo.culture脚本一起）助手开始表现为预期。