Jquery Ui Datepicker - Range control

Control what dates are selectable in the second input of a range jquery datepicker.

by c0mm0n

HTML

<div class="demo"> 
 
<label for="from">From</label> 
<input type="text" id="from" name="from"/> 
<label for="to">to</label> 
<input type="text" id="to" name="to"/> 
 
</div>

JavaScript

$(function() {
        $( "#from, #to" ).datepicker({
            defaultDate: "+1w",
            changeMonth: true,
            numberOfMonths: 3,
            onSelect: function( selectedDate ) {
                if(this.id == 'from'){
                  var dateMin = $('#from').datepicker("getDate");
                  var rMin = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() + 1); 
                  var rMax = new Date(dateMin.getFullYear(), dateMin.getMonth(),dateMin.getDate() + 31); 
                  $('#to').datepicker("option","minDate",rMin);
                  $('#to').datepicker("option","maxDate",rMax);                    
                }
                
            }
        });
    });