title: Create a specific date range with jQuery datepicker
body: <p>I'm trying to use the jQuery date picker to create a start date calendar and an end date calender. I'm using the "date range" example seen here: <a href="http://jqueryui.com/demos/datepicker/#date-range" rel="noreferrer">http://jqueryui.com/demos/datepicker/#date-range</a></p>
  
  <p>The start date can not be before today's date and the end date can be 30 days past the selected start date.</p>
  
  <p>For example if I chose a start date of May 17th in the first datepicker, then the end date in the second datepicker can only be selectable for May 18th through June 18th.</p>
  
  <p>Here's my code:</p>
  
  <pre><code>&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
  &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;    
      &lt;title&gt;Untitled Document&lt;/title&gt;
      &lt;link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
      $(function() {
          var dates = $( "#from, #to" ).datepicker({
              defaultDate: "+1w",
              changeMonth: true,
              numberOfMonths: 2,
              onSelect: function( selectedDate ) {
                  var option = this.id == "from" ? "minDate" : "maxDate",
                      instance = $( this ).data( "datepicker" ),
                      date = $.datepicker.parseDate(
                          instance.settings.dateFormat ||
                          $.datepicker._defaults.dateFormat,
                          selectedDate, instance.settings );
                  dates.not( this ).datepicker( "option", option, date );
              }
          });
      });
      &lt;/script&gt;
    &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div class="date"&gt;
  
  &lt;label for="from"&gt;From&lt;/label&gt;
  &lt;input type="text" id="from" name="from"/&gt;
  &lt;label for="to"&gt;to&lt;/label&gt;
  &lt;input type="text" id="to" name="to"/&gt;
  
  &lt;/div&gt;&lt;!-- End demo --&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Any help would be appreciated. Thanks!</p>