我正在做一个简单的MVC4 Internet应用程序,它允许将一些项目添加到类别中。
到目前为止,这是我所做的。
我在mvc视图中有一个日期选择器。datepicker的脚本是这样的。
<script src="@Url.Content("~/Scripts/jquery-1.7.1.min.js")" type="text/javascript"></script>
<script src="@Url.Content("~/Scripts/jquery-ui-1.8.20.min.js")" type="text/javascript"></script>
@Scripts.Render("~/bundles/jqueryval")
<script type="text/javascript">
$(function () {
$('#dtItemDueDate').datepicker({
dateFormat: 'dd/mm/yy',
minDate: 0
});
});
</script>
我的模型属性:
[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上找到了很多帖子,但是都没有帮助
有什么想法/建议吗?
编者注:该答案不再有效,从jQuery 1.9(2013)开始,该$.browser
方法已删除
根据这篇文章,这是基于Webkit的浏览器的一个怪癖。
一种解决方案是jquery.validate.js
通过查找函数进行修改date: function (value, element)
并将其放入其中:
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));
}
};
Rowan Freeman解决方案对我不起作用,因为.toLocaleDateString(value)
它不解析value
字符串
这是我在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附带的本机日期验证更健壮。
根据有关日期验证的文档:
如果值为有效日期,则返回true。使用JavaScript的内置Date来测试日期是否有效,因此不进行健全性检查。仅格式必须有效,而不是实际日期,例如30/30/2008是有效日期。
而
parseDate
将检查该日期是否有效并确实存在。
我通过从DateTime更改为String解决了此问题。
这是我目前可以想到的最佳维护的最佳解决方案。
文章标签:asp.net-mvc , asp.net-mvc-4 , jquery , jquery-ui-datepicker
版权声明:本文为原创文章,版权归 admin 所有,欢迎分享本文,转载请保留出处!
评论已关闭!