jQuery 日期选择器验证问题
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13819135/
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
jQuery Date Picker Validation Problems
提问by MJCoder
I am trying to validate the two input boxes where the user selects a date - i've managed to get far as restricting the user to select a previous date and if they select the first textbox as today's date the next input box must be one day ahead (future date)
我正在尝试验证用户选择日期的两个输入框 - 我设法限制用户选择前一个日期，如果他们选择第一个文本框作为今天的日期，则下一个输入框必须是一天提前（未来日期）
On submit i am trying to get it to validate so if you dont select one of the input boxes it gives you an error message.
在提交时，我试图让它进行验证，因此如果您不选择其中一个输入框，它会给您一条错误消息。
<asp:Label ID="lblPickupDate" runat="server" Text="Pick-up Date" CssClass="lblPickup"></asp:Label>
<input type="text" class="datePicker" id="validBeforeDatepicker" value="Please select a date" name="pickupdate" /> <span class="ui-icon ui-icon-calendar"></span>
<asp:Label ID="lblReturnDate" runat="server" Text="Return Date" CssClass="lblReturnDate"></asp:Label>
<input type="text" class="datePicker" id="validAfterDatepicker" value="Please select a date" name="returdate" /> <span class="ui-icon ui-icon-calendar"></span>
$(function () {
$("#validBeforeDatepicker").datepicker({
showOn: "button",
buttonImage: "/assets/img/calendar.gif",
buttonImageOnly: true,
minDate: 0,
required: true,
message: "This is a required field",
dateFormat: 'dd-mm-yy',
onClose: function() {$(this).valid();}
});
});
$(function () {
$("#validAfterDatepicker").datepicker({
showOn: "button",
buttonImage: "/assets/img/calendar.gif",
buttonImageOnly: true,
minDate: +1,
required: true,
message: "This is a required field",
dateFormat: 'dd-mm-yy',
onClose: function() {$(this).valid();}
});
});
Ive set required to true so shouldn't it throw a validation error if you miss it?
我已经将 required 设置为 true 所以如果你错过了它不应该抛出验证错误吗？
The site where the form is: http://www.rentruck.co.uk
表格所在的网站：http: //www.rentruck.co.uk
I've also had a look at this but cant seem to replicate it http://keith-wood.name/uiDatepickerValidation.html
我也看过这个，但似乎无法复制它http://keith-wood.name/uiDatepickerValidation.html
回答by chridam
You could try these two validation libraries for validating the jQuery UI Datepicker.
您可以尝试使用这两个验证库来验证 jQuery UI Datepicker。
CSS:
CSS:
.valid {
background: green;
color: #fff;
}
.error {
background: red;
color: #fff;
}
?
HTML:
HTML:
<form id="h5ftest">
<input type="date" required pattern="\d{2}\/\d{2}\/\d{4}">
</form>?
jQuery:
jQuery：
$(function() {
H5F.setup( $( "#h5ftest" ) );
$( "[type=date]" ).datepicker({
onClose: function() {
$( this ).focus().blur();
}
});
});?
or Working Example for jQuery Validate plugin
或jQuery Validate 插件的工作示例
CSS:
CSS:
.valid {
background: green;
color: #fff;
}
.error {
background: red;
color: #fff;
}?
?
HTML:
HTML:
<form id="jQueryValidateTest">
<input type="date" required>
</form>?
jQuery:
jQuery：
$(function() {
$( "#jQueryValidateTest" ).validate();
$( "[type=date]" ).datepicker({
onClose: function() {
$( this ).valid();
}
});
});?
回答by KoViMa
On the Datepicker sitein View sourcesection they are suggest to check date range manually on onCloseevent:
在日期选择器的网站在View source部分他们建议手动检查日期范围内的onClose事件：
$(function() {
$( "#from" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( "#to" ).datepicker( "option", "minDate", selectedDate );
}
});
$( "#to" ).datepicker({
defaultDate: "+1w",
changeMonth: true,
numberOfMonths: 3,
onClose: function( selectedDate ) {
$( "#from" ).datepicker( "option", "maxDate", selectedDate );
}
});
});
