字段日期必须是镶嵌在mvc中的日期

我正在做一个简单的MVC4 Internet应用程序,它允许在类别中添加一些项目。

这是我到目前为止所做的。

我在mvc视图中有一个日期选择器。 datepicker的脚本是这样的。

  @Scripts.Render("~/bundles/jqueryval")  $(function () { $('#dtItemDueDate').datepicker({ dateFormat: 'dd/mm/yy', minDate: 0 }); });  

我的模特财产:

  [DisplayName("Item DueDate")] [Required] [DisplayFormat(DataFormatString = "{0:dd/MM/yyyy}",ApplyFormatInEditMode = true)] [DataType(DataType.DateTime)] public DateTime? dtItemDueDate { get; set; } public char charCompleted { get; set; } 

在我看来,我做到了这一点:

 @Html.TextBoxFor(m => m.dtItemDueDate) @Html.ValidationMessageFor(m => m.dtItemDueDate) 

错误是这样的:

 The field Item DueDate must be a date. 

奇怪的是,它确实在IE和Mozilla中工作,但在Chrome中不起作用。

我在SO上发现了很多post,但没有一个有用

有什么想法/建议吗?

编者注:此答案不再有效,从jQuery 1.9(2013)开始, $.browser方法已被删除


根据这篇文章,它是基于Webkit的浏览器的一个已知的怪癖。

一种解决方案是通过查找函数date: function (value, element)来修改jquery.validate.js并将此代码放入其中:

 if ($.browser.webkit) { //ES - Chrome does not use the locale when new Date objects instantiated: var d = new Date(); return this.optional(element) || !/Invalid|NaN/.test(new Date(d.toLocaleDateString(value))); } else { return this.optional(element) || !/Invalid|NaN/.test(new Date(value)); } 

在不更改jquery.validate.js的情况下,您可以使用$(document).ready()的代码片段:

 jQuery.validator.methods.date = function (value, element) { var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor); if (isChrome) { var d = new Date(); return this.optional(element) || !/Invalid|NaN/.test(new Date(d.toLocaleDateString(value))); } else { return this.optional(element) || !/Invalid|NaN/.test(new Date(value)); } }; 

由于.toLocaleDateString(value)不解析value字符串,因此Rowan Freeman解决方案对我不起作用

这里是我想出的解决方案=>在jquery.validate.js中找到这个函数定义:“date:function(value,element)”并用以下代码替换代码:

 // http://docs.jquery.com/Plugins/Validation/Methods/date date: function (value, element) { var d = value.split("/"); return this.optional(element) || !/Invalid|NaN/.test(new Date((/chrom(e|ium)/.test(navigator.userAgent.toLowerCase())) ? d[1] + "/" + d[0] + "/" + d[2] : value)); }, 

下面是工作代码,可能有助于某人修复chrome和safari中的日期选择器问题:模型:

 public DateTime? StartDate { get; set; } 

视图:

 @Html.TextBoxFor(model => model.StartDate, "{0:dd/MM/yyyy}", new { @type = "text", @class = "fromDate" }) 

JS:

 $(function () { checkSupportForInputTypeDate(); $('#StartDate').datepicker({ changeMonth: true, changeYear: true, dateFormat: 'dd/mm/yy' }); }); //Function to configure date format as the native date type from chrome and safari browsers is clashed with jQuery ui date picker. function checkSupportForInputTypeDate() { jQuery.validator.methods.date = function (value, element) { var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor); var isSafari = /Safari/.test(navigator.userAgent) && /Apple Computer/.test(navigator.vendor); if (isSafari || isChrome) { var d = new Date(); return this.optional(element) || !/Invalid|NaN/.test(new Date(d.toLocaleDateString(value))); } else { return this.optional(element) || !/Invalid|NaN/.test(new Date(value)); } }; } 

以下是Maxim Gershkovich的解决方案 :

 jQuery.validator.methods.date = function (value, element) { if (value) { try { $.datepicker.parseDate('dd/mm/yy', value); } catch (ex) { return false; } } return true; }; 

备注

  • 这取决于jQuery UI附带的jQuery datepicker方法
  • 这实际上比jQueryValidate附带的本机日期validation更强大。

    根据日期validation文档:

    如果值是有效日期,则返回true。 使用JavaScript的内置日期来测试日期是否有效,因此不进行完整性检查 。 只有格式必须有效,而不是实际日期,例如30/30/2008是有效日期。

    parseDate将检查日期是否有效且实际存在。

我通过从DateTime更改为String来解决此问题。

这是我能想到的良好维护的最佳解决方案。