Question

I have successfully integrate jQuery DatePicker on my site and wondering how can I set the following:

1. Don’t allow selection of start date from current date plus 2 days. example if today’s date is 7/20/12 then the visitor can select only date starting 7/22/12.
2. End date must start based on Start Date plus one. If start date is 7/23/12 then the end date should be 7/24/12.

BTW, I am making a hotel reservation calendar.

Here’s my code based from sample:

<script>
    $(function() {
        $( "#sd" ).datepicker();
    });

    $(function() {
        $( "#ed" ).datepicker();
    }); 
</script>

<tr>
  <td>Check In</td>
  <td>:</td>
  <td><input name="sd" type="text" id="sd" value="<?php echo $_SESSION['checkin'] ?>" size="10"" maxlength="8" /></td>
</tr>
<tr>
  <td>Check Out</td>
  <td>:</td>
  <td><input name="ed" type="text" id="ed" value="<?php echo $_SESSION['checkout'] ?>" size="10" maxlength="10" /></td>
</tr>

Answer 1

You can do it inside your datepicker events.

$(function() {
    $( "#sd" ).datepicker({
        // before datepicker opens run this function
        beforeShow: function(){
            // this gets today's date       
            var theDate = new Date();
            // sets "theDate" 2 days ahead of today
            theDate.setDate(theDate.getDate() + 2);
            // set min date as 2 days from today
            $(this).datepicker('option','minDate',theDate);         
        },
        // When datepicker for start date closes run this function
        onClose: function(){
            // this gets the selected start date        
            var theDate = new Date($(this).datepicker('getDate'));
            // this sets "theDate" 1 day forward of start date
            theDate.setDate(theDate.getDate() + 1);
            // set min date for the end date as one day after start date
            $('#ed').datepicker('option','minDate',theDate);

        }
    });
    $( "#ed" ).datepicker();     
});