CODEWITHSUNDEEP
jqueryjquery-ui-datepicker
Kamal
Kamal

Reputation: 2180

Make difference between two date picker fields using jQuery-ui

Hi Friends I am working on Hotel booking form and getting stuck on date-picker function. There are two field first to get "Check in date" and second is for "Checkout date". I want that there is at least one day difference (or same day) between "Check in date" & "Checkout date". If user select checkout date first like if user select "01/jan/2014" for checkout and after that user go to check-in date then he selects "4/jan/2014" for check-in which is wrong you cant check in before checkout I want when user selects "4/jan/2014" for check-in then checkout date will update "4/jan/2014" for check-out and user unable to selects previous dates for checkout

You can find my code here jsfiddle

HTML

 <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
Check in date <input type="text" name="ww" size="30" id="1" class="nameBook"/>
Checkout date <input type="text" name="ww" size="30" id="2" class="nameBook"/>

SCRIPT

$(function() {
    $( ".nameBook" ).datepicker();
});

Please help me guys .

Thanks in advance

Upvotes: 0

Views: 705

Answers (1)

Praveen
Praveen

Reputation: 56509

In your case what you need to know about is date-range, here I was modified your code as below to work on

 $(function () {
     $("#1").datepicker({
         onClose: function (selectedDate) {
             $("#2").datepicker("option", "minDate", selectedDate);
         }
     });
     $("#2").datepicker({
         defaultDate: "+1w",
         onClose: function (selectedDate) {
             $("#1").datepicker("option", "maxDate", selectedDate);
         }
     });
 });

Check this fiddle

Upvotes: 2

Related Questions