Question

So if my start date is : 04/22/2010 then my end date selection can be up to 04/22/2011 and after 04/22/2011 are dates all disabled.

Here is what I have for both selection start and end date:

$(document).ready(function () {      
  $('#endDate').datepicker({ showOn: 'button', 
      buttonImage: '../images/Calendar.png', 
      buttonImageOnly: true, onSelect: function () { }, 
      onClose: function () { $(this).focus(); } 
    }); 

  $('#startDate').datepicker({ showOn: 'button', 
      buttonImage: '../images/Calendar.png', 
      buttonImageOnly: true, onSelect: 
        function (dateText, inst) { 
          $('#endDate').datepicker("option", 'minDate', new Date(dateText)); 
        } 
      , 
      onClose: function () { $(this).focus(); } 
    }); 
}); 

Answer 1

You can set the maxDate option at the same time, like this:

$(document).ready(function () {      
  $('#endDate').datepicker({ showOn: 'button', 
      buttonImage: '../images/Calendar.png', 
      buttonImageOnly: true, onSelect: function () { }, 
      onClose: function () { $(this).focus(); } 
  }); 

  $('#startDate').datepicker({ showOn: 'button', 
      buttonImage: '../images/Calendar.png', 
      buttonImageOnly: true, 
      onSelect: function (dateText, inst) { 
          var nyd = new Date(dateText);
          nyd.setFullYear(nyd.getFullYear()+1);
          $('#endDate').datepicker("option", { minDate: new Date(dateText), 
                                               maxDate: nyd });
      }, 
      onClose: function () { $(this).focus(); } 
  }); 
}); ​

You can play with a working demo here

This just gets the date, adds a year (don’t use .getYear/.setYear, they’re deprecated) and uses that date to set the maxDate property on the other date picker. If you’re curious, there’s a helpful maintained list of javascript Date methods here.