javascript 使用 JQuery 验证的最大日期
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17310431/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Max Date using JQuery Validation
提问by ojhawkins
How can I set a max date (of the current date) using Jquery Validation?
如何使用 Jquery 验证设置最大日期（当前日期的）？
$('#form').validate({
rules: {
reportDate: {
date: true
//Max date rule of current date...
}
}
});
回答by Uttara
You can add a validation method to set max date as current date using addMethodas this
您可以添加验证方法以使用addMethodas this将最大日期设置为当前日期
$.validator.addMethod("maxDate", function(value, element) {
var curDate = new Date();
var inputDate = new Date(value);
if (inputDate < curDate)
return true;
return false;
}, "Invalid Date!"); // error message
and then add this method to the rules to set validation
然后将此方法添加到规则中以设置验证
$("#frm").validate({
rules: {
reportDate: {
required: true,
date: true,
maxDate: true
}
}
});
Note: the date '12/03/2013'is interpreted as this 'mm/dd/yyyy',
so 12/03/2013 > 06/26/2013 (today's date)and hence Invalid.
注：日期'12/03/2013'被解释为这'mm/dd/yyyy'，
所以12/03/2013 > 06/26/2013 (today's date)，因此无效。
回答by leobard
You need a validation method and the date formatting is critical. Using the datepicker formatting functions helps. Here is code where you can pass the date to check and the date format as parameter. Passing "0" as date takes "today".
您需要一种验证方法，并且日期格式至关重要。使用日期选择器格式化功能会有所帮助。这是您可以传递要检查的日期和日期格式作为参数的代码。传递“0”作为日期需要“今天”。
/**
* Requires Datepicker and Validator
*
* Params:
* 0...dateformat. see datepicker
* 1...date. Value "0" is "today"
* 2...(optional). date to display. will be automatically filled if 0 and 1 are set.
* usage:
* myfield: { maxDate: ['m/d/yy', 0] }
*/
jQuery.validator.addMethod("maxDate",
function(value, element, params) {
if (!params[0])
throw 'params missing dateFormat';
if (typeof(params[1]) == 'undefined' )
throw 'params missing maxDate';
var dateFormat = params[0];
var maxDate = params[1];
if (maxDate == 0) {
maxDate = new Date();
maxDate.setHours(0); // make it 00:00:0
maxDate.setMinutes(0);
maxDate.setSeconds(0);
maxDate.setMilliseconds(0);
}
if (typeof(params[2]) == 'undefined' )
params[2] = $.datepicker.formatDate(dateFormat, maxDate);
try {
var valueAsDate = $.datepicker.parseDate( dateFormat, value )
return (valueAsDate < maxDate);
} catch (x) {
return false;
}
},'Must be before {2}.');
$("#myform").validate({
rules: {
datepicker : {
maxDate ['m/d/yy', 0]
}
}
});
HTML:
HTML：
<input name="datepicker" class="datepicker" type="text"/>
回答by Kirill Ryzhkov
I think it is more elegant solution because you can change date format as you like and use it with datepicker.
我认为这是更优雅的解决方案，因为您可以根据需要更改日期格式并将其与 datepicker 一起使用。
// Datepicker
$('#date_start').datepicker({
dateFormat: 'dd.mm.yy',
maxDate: "+0",
onClose: function() {$(this).valid();},
}).datepicker("setDate", new Date());
// Validation method
$.validator.addMethod("maxDate", function(e) {
var curDate = $('#date_start').datepicker("getDate");
var maxDate = new Date();
maxDate.setDate(maxDate.getDate());
maxDate.setHours(0, 0, 0, 0); // clear time portion for correct results
console.log(this.value, curDate, maxDate);
if (curDate > maxDate) {
$(this).datepicker("setDate", maxDate);
return false;
}
return true;
});
//Date validation
$("#form").validate({
// Rules for form validation
rules: {
date_start:{
required: true,
maxDate: true
},
},
messages: {
date_start:{
required: 'Enter date_start',
maxDate: 'Must be today date or less',
},
},
//Error placement
errorPlacement: function (error, element) {
error.insertAfter(element.parent());
}
});
//HTML
<input type="text" name="date_start" id="date_start">
