jQuery

Create a from and to datepicker using jQuery UI


Last week in one of my projects I had to work on a search box. I had to filter down the events within a ‘from’ and ‘to’ date. Well datepicker from jQuery UI was my obvious choice, but it lacked the functionality of choosing a from and to date.

Well i thought it was an easy challenge. So I set out myself to find a way with the given API of jQuery UI.

The Magic:

I quickly understood that ‘minDate’ and ‘maxDate’ are the options I need.

minDate: The minimum selectable date. When set to null, there is no minimum. So any date before the set minDate is disabled. Well I can use for restricting dates previous to current date. Also this can help me set the From Date.

maxDate: The maximum selectable date. When set to null, there is no maximum. So the dates after the maxDate will be disabled.

So using the above options of the API i write the code to initialize the datepicker.

var dateToday = new Date();
$.datepicker.setDefaults({
minDate: dateToday,
changeMonth: true,
numberOfMonths: 1,

});

In order to get today’s date I use ‘new Date()’ function and set the result to a variable ‘dateToday’. Then in set this variable to ‘minDate’ in order to disable the previous dates.

changeMonth: This displays the available months of the year as a drop down. (optional)
numberOfMonths: The number of months to show at once when the input field is clicked.

So we have successfully initialized the variables. Now we will write functions to show the datepicker on clicking of the ‘Start’ & ‘End’ input boxes. Lets take a look at the HTML.

<input class="fromDate" name="startDate" type="text" placeholder="Start date" />
<input class="toDate" name="endDate" type="text" placeholder="End date" />

The start date input box is given a class ‘fromDate’ and the end date is given a class ‘toDate’.

The Theory

1. When clicking the ‘.fromDate’ input field we get the date selected using ‘onSelect’ function and set it as ‘minDate’ option for the ‘.toDate’ datepicker field.
2. And then immediately we display the ‘.toDate’ datepicker automatically by setting the focus to ‘.toDate’ input field. We do this using ‘setTimeout’ function.
3. In case the user clicks on the ‘.toDate’ input box before (or) after the clicking ‘.fromDate’ input field then we must have a way to handle it.
4. So we write a js for that too. When ‘.toDate’ is clicked we get the date selected using the same ‘onSelect’ function and set it as the ‘maxDate’ option to the ‘.fromDate’ datepicker field.

Here is the code for the explanantion given.

$('.fromDate').datepicker({onSelect: function(selectedDate) {
$('.toDate').datepicker('option', 'minDate', selectedDate);
setTimeout(function() { $('.toDate').focus(); }, 0);
}});

$(‘.toDate’).datepicker({onSelect: function(selectedDate) {
$(‘.fromDate’).datepicker(‘option’, ‘maxDate’, selectedDate);
}});

So there you go. With few lines of code you can get a production worthy from and to datepicker using our very trusted jquery ui datepicker.

Here is the full code. Let me know your comments if you found this useful.

<div class="box">

An easy <em class="uline">js</em> script how we can create a <em class="uline">'FROM'</em> and <em class="uline">'TO'</em> datepicker. Also we are restricting all the past dates.

<input class="fromDate" name="startDate" type="text" placeholder="Start date" />
:
<input class="toDate" name="endDate" type="text" placeholder="End date" />

Click on the 'Start Date'

</div>
<script src="jquery.js"></script>
<script src="jquery-ui.js"></script>

<script>// <![CDATA[
var dateToday = new Date();
       $.datepicker.setDefaults({
           minDate: dateToday,
           changeMonth: true,
           numberOfMonths: 1,

       });

       $('.fromDate').datepicker({onSelect: function(selectedDate) {
           $('.toDate').datepicker('option', 'minDate', selectedDate);
           setTimeout(function() { $('.toDate').focus(); }, 0);
       }});

       $('.toDate').datepicker({onSelect: function(selectedDate) {
           $('.fromDate').datepicker('option', 'maxDate', selectedDate);
       }});
// ]]></script>

Latest Comments

Leave a Reply

comment on this article