Categories
Uncategorized

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