Select Date Range using Jquery DatePicker.js and DatePick.js

The jQuery UI Datepicker is a highly configurable plugin that adds datepicker functionality to your pages. DatePick.js is a similar plugin is formed using the basis as jQuery UI Datepicker. It is made available as a separate plugin because the jQuery UI version desired simplified functionality.

1. Select Date Range using Datepick.js [Demo on Jsfiddle] [Demo on Datepick.js Website]

Html:

<p>
    <span class="demoLabel">Date range:</span>
    <input type="text" id="rangePicker" size="20" />
</p>

Jquery:

$(function(){
   $('#rangePicker').datepick({ 
        rangeSelect: true
    });
});

Output: datepick range selection

2. Select Date Range using Datepicker.js [Demo on Fiddle] [Demo on Jquery UI Website]

Html:

<label for="from">From</label>
<input type="text" id="from" name="from" />

<label for="to">to</label>
<input type="text" id="to" name="to" />     

Jquery:

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

Output: date picker range