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

필자는 Ive를 true로 설정해야하므로 놓치지 않으면 유효성 검사 오류가 발생하지 않아야합니까?

형태가 사이트 : http://www.rentruck.co.uk

나는 또한 이것 좀 했어하지만 캔트가있는 Datepicker siteView source 섹션에 그것을 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

을 복제하는 것 수동으로 날짜 범위를 확인하는 것이 좋습니다 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); 
     } 
    }); 
});