jQuery UI Datepicker maxDate 选项的手动日期输入验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11228689/
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
Manual date entry validation for jQuery UI Datepicker maxDate option
提问by Sam Carleton
I have jQuery datepicker on a page that needs to allow manual entry of the date, but also needs to validate that the date is no more than one day ahead. The picker control has been limited via the maxDate, but when one manually enters the date, they can enter a date more than one day ahead. How does one (me) stop that? Here is what I have so far:
我在需要允许手动输入日期的页面上有 jQuery datepicker，但还需要验证日期不超过一天。选择器控件已通过 maxDate 进行了限制，但是当手动输入日期时，他们可以提前一天以上输入日期。一个（我）如何阻止它？这是我到目前为止所拥有的：
$(".datepicker").attr("placeholder", "mm-dd-yyyy").datepicker({
showOn: "button",
maxDate: "+1",
showOtherMonths: true
});
采纳答案by InkHeart
Well, the above answer is correct, but it does not validate the form, the user still will be able to submit the form,
嗯，上面的答案是正确的，但它没有验证表单，用户仍然可以提交表单，
I have done some researches, but could not find ny, finally I wrote this function which works fine and validate the form, and does not let submit the form until the correct date is entered, Hope it helps!
我做了一些研究，但找不到 ny，最后我写了这个功能正常并验证表单的功能，并且在输入正确的日期之前不让提交表单，希望它有帮助！
The only thing you need to do is add this code, and then this will be applied to all the fields with 'datePicker' class.
您唯一需要做的就是添加此代码，然后这将应用于具有“datePicker”类的所有字段。
$(".datePicker").datepicker({
dateFormat: 'd/mm/yy',
changeMonth: true,
changeYear: true,
firstDay: 1,
minDate: Date.parse("1900-01-01"),
maxDate: Date.parse("2100-01-01"),
yearRange: "c-90:c+150"
});
// validation in case user types the date out of valid range from keyboard : To fix the bug with out of range date time while saving in sql
$(function () {
$.validator.addMethod(
"date",
function (value, element) {
var minDate = Date.parse("1900-01-01");
var maxDate = Date.parse("2100-01-01");
var valueEntered = Date.parse(value);
if (valueEntered < minDate || valueEntered > maxDate) {
return false;
}
return !/Invalid|NaN/.test(new Date(minDate));
},
"Please enter a valid date!"
);
});
回答by Salman A
I am not sure if datepicker fires an event if the control's value is changed by typing in directly. You can bind a function to the .change()event:
如果通过直接输入更改控件的值，我不确定 datepicker 是否会触发事件。您可以将函数绑定到.change()事件：
$(".datepicker").attr("placeholder", "mm-dd-yyyy").datepicker({
dateFormat: "mm-dd-yy", // since you have defined a mask
maxDate: "+1",
showOn: "button",
showOtherMonths: true
}).on("change", function(e) {
var curDate = $(this).datepicker("getDate");
var maxDate = new Date();
maxDate.setDate(maxDate.getDate() + 1); // add one day
maxDate.setHours(0, 0, 0, 0); // clear time portion for correct results
if (curDate > maxDate) {
alert("Invalid date");
$(this).datepicker("setDate", maxDate);
}
});
回答by Main Pal
I had exactly the same requirement and here is the solution that worked for me like a charm:
我有完全相同的要求，这是对我有用的解决方案：
$(".datepicker").attr("placeholder", "mm-dd-yyyy").change(function(){
$(this).datepicker('setDate', $(this).datepicker('getDate'));
}).datepicker({
showOn: "button",
maxDate: "+1",
showOtherMonths: true
});
回答by Esten
One option is to remove the ability to manually enter a date by making the input fields readonly. This will restrict the user from manually entering anything crazy, and forces the use of the datepicker.
一种选择是通过创建输入字段来取消手动输入日期的功能readonly。这将限制用户手动输入任何疯狂的内容，并强制使用日期选择器。
