在 Asp.Net MVC4 应用程序中使用 Bootstrap 日期时间选择器、Jquery 验证插件验证日期和日期时间
Validate date and datetime with Bootstrap datetime picker, Jquery validation plugin in an Asp.Net MVC4 application
我目前正在使用 Bootstrap 3.1.1, Eonasdan datetime picker v4.7.14 and jquery validation plugin v1.14.0.
开发 MVC Asp.Net 4.6 WebApp
我在验证日期时遇到了一些问题。
我的模型是这样的:
public class PersonModel{
...
[Required]
[Display(Name = "Date of Birth")]
public DateTime? DateOfBirth { get; set; }
...
}
我的视图是这样的:
<div class="form-group">
@Html.LabelFor(x => x.DateOfBirth):
<span class="text-danger"><b>*</b></span>
<div class="input-group datepicker">
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
@Html.TextBoxFor(x => x.DateOfBirth, new {@class = "form-control", @data_date_format = "DD/MM/YYYY", @placeholder = "DD/MM/YYYY"})
</div>
@Html.ValidationMessageFor(x => x.DateOfBirth, "", new { @class = "text-danger" })
</div>
初始化日期时间选择器的相关 Js 代码:
(function () {
// Init bootstrap date/time pickers
$(".datepicker").datetimepicker({
useCurrent: false
});
})(jQuery);
使用 jQuery.validator
,即使日期看起来不错,我总是会收到此错误:
我知道 jQuery.validator
可以与 jquery.ui.datepicker 一起使用,但我怎样才能让它与 bootstrap.datetimepicker 一起使用?
您可以覆盖 Jquery.validator
插件的 date
方法:
(function () {
// overrides the jquery date validator method
jQuery.validator.methods.date = function (value, element) {
// All dates are valid....
return true;
};
})(jQuery);
因为bootstrap datetime picker use moment.js,你可以像这样检查日期是否有效:
(function () {
// overrides the jquery date validator method
jQuery.validator.methods.date = function (value, element) {
// We want to validate date and datetime
var formats = ["DD/MM/YYYY", "DD/MM/YYYY HH:mm"];
// Validate the date and return
return moment(value, formats, true).isValid();
};
})(jQuery, moment);
我目前正在使用 Bootstrap 3.1.1, Eonasdan datetime picker v4.7.14 and jquery validation plugin v1.14.0.
开发 MVC Asp.Net 4.6 WebApp我在验证日期时遇到了一些问题。
我的模型是这样的:
public class PersonModel{ ... [Required] [Display(Name = "Date of Birth")] public DateTime? DateOfBirth { get; set; } ... }
我的视图是这样的:
<div class="form-group"> @Html.LabelFor(x => x.DateOfBirth): <span class="text-danger"><b>*</b></span> <div class="input-group datepicker"> <span class="input-group-addon"> <span class="glyphicon glyphicon-calendar"></span> </span> @Html.TextBoxFor(x => x.DateOfBirth, new {@class = "form-control", @data_date_format = "DD/MM/YYYY", @placeholder = "DD/MM/YYYY"}) </div> @Html.ValidationMessageFor(x => x.DateOfBirth, "", new { @class = "text-danger" }) </div>
初始化日期时间选择器的相关 Js 代码:
(function () { // Init bootstrap date/time pickers $(".datepicker").datetimepicker({ useCurrent: false }); })(jQuery);
使用
jQuery.validator
,即使日期看起来不错,我总是会收到此错误:我知道
jQuery.validator
可以与 jquery.ui.datepicker 一起使用,但我怎样才能让它与 bootstrap.datetimepicker 一起使用?
您可以覆盖 Jquery.validator
插件的 date
方法:
(function () {
// overrides the jquery date validator method
jQuery.validator.methods.date = function (value, element) {
// All dates are valid....
return true;
};
})(jQuery);
因为bootstrap datetime picker use moment.js,你可以像这样检查日期是否有效:
(function () {
// overrides the jquery date validator method
jQuery.validator.methods.date = function (value, element) {
// We want to validate date and datetime
var formats = ["DD/MM/YYYY", "DD/MM/YYYY HH:mm"];
// Validate the date and return
return moment(value, formats, true).isValid();
};
})(jQuery, moment);