我正在尝试验证用户选择日期的两个输入框 - 我设法远远限制用户选择之前的日期,如果他们选择第一个文本框作为今天的日期,下一个输入框必须提前一天(未来日期)
在提交时,我试图让它验证,所以如果你不选择其中一个输入框,它会给你一个错误信息。
<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();}
});
});
我已将必需设置为true,因此如果您错过它,是否应该抛出验证错误?
表单所在的网站:http://www.rentruck.co.uk
我也看过这个,但似乎无法复制它http://keith-wood.name/uiDatepickerValidation.html
答案 0 :(得分:5)
您可以为validating the jQuery UI Datepicker尝试这两个验证库。
<强> CSS 强>:
.valid {
background: green;
color: #fff;
}
.error {
background: red;
color: #fff;
}
<强> HTML 强>:
<form id="h5ftest">
<input type="date" required pattern="\d{2}\/\d{2}\/\d{4}">
</form>
<强>的jQuery 强>:
$(function() {
H5F.setup( $( "#h5ftest" ) );
$( "[type=date]" ).datepicker({
onClose: function() {
$( this ).focus().blur();
}
});
});
的工作示例
<强> CSS 强>:
.valid {
background: green;
color: #fff;
}
.error {
background: red;
color: #fff;
}
<强> HTML 强>:
<form id="jQueryValidateTest">
<input type="date" required>
</form>
<强>的jQuery 强>:
$(function() {
$( "#jQueryValidateTest" ).validate();
$( "[type=date]" ).datepicker({
onClose: function() {
$( this ).valid();
}
});
});
答案 1 :(得分:3)
在View source
部分的Datepicker site部分,他们建议您在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 );
}
});
});