jQuery的日期選取器驗證問題

Question

我試圖驗證在用戶選擇的日期兩個輸入框 - 我已經成功地獲得儘可能限制用戶選擇以前的日期，如果他們選擇的第一個文本框爲今天的日期下一個輸入框必須提前一天（未來的日期）

在提交我想獲得它來驗證，所以如果你不選擇的輸入框它給你一個錯誤信息之一。

<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

Answer 1

你可以嘗試這兩個驗證庫validating the jQuery UI Datepicker。

Working Example for H5F

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(); 
    } 
    }); 
});​ 

或工作實施例爲jQuery Validate plugin

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(); 
    } 
    }); 
});​ 

Answer 2

在Datepicker site在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); 
     } 
    }); 
});