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

Yasser Shaikh
Apr 20, 2013 · 1 min read

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
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
date picker range

Yasser Shaikh's blog

It's supposed to be automatic, but actually you have to push this button.

Yasser Shaikh

Written by

Yasser Shaikh's blog

It's supposed to be automatic, but actually you have to push this button.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade