Choosing a Date - J Query

Date inputs are necessary for searching for events, flights, or hotels, or entering a birth date in a registration form. A common solution is to use three selects, for the day, month, and year components. While that works OK for a date of birth, it can get very cumber some when searching for a flight in a certain time period.


The jQuery UI date picker can solve the problem by offering a calendar to gether with a lot of customization options to optimize for various applications.
The default date picker works by simply applying it to an input:

This will bind the events necessary to show the datepicker when the input gets focused, starting with the current date. Next and previous buttons can be used to select the next or previous month, and a calendar can be used to select a day.
To make the datepicker more useful, we need to adapt it to the application where it’s used. For the flight-search example, we can assume that the user looks for a flight sometime in the next three months, and therefore it displays three months at once, starting with the next week from the current date:

We start with two inputs, each associated with an appropriate label, and then apply the datepicker to both:

The default date for the datepicker is the current date plus one week, specified using the default Date option. A select for changing the months is displayed as well, via changeMonth: true. The option numberOfMonths: 3 indicates that three calendars should be displayed at once.
The on Select option is an event triggered when ever the user selects a date. When the from date is selected, the minDate option for the to date is set to the from date, and when the to date is selected, the maxDate option for the from date is set.
With that in place, the user can start selecting any of the two dates, and when he continues to select the other, the input is restricted to a positive range already.


By default, the datepicker is shown when the input field receives focus. Using the show On option, we can configure the calendar to appear only when clicking a calendar icon next to the input:

The buttonImage option specifies the path to an image to use as the button, where button Image Only specifies to use only that image, instead of a button element with an embedded image.
The showOn option also supports both as a value, displaying the datepicker on focus of the input and on clicks on the button.


The jQuery UI datepicker supports 41 locales, provided as ui.datepicker-xx.js files, where xx is the locale. Each file adds a property to $.datepicker.regional. The ui.datepicker-ar.js file adds these:

To initialize a datepicker with the Arabic locale, we refer to that property: To mix in other options as well, we use $.extend:

We create an empty object literal via {} and then use $.extend to copy the regional options as well as values for change Month and change Year into the empty object, which is then used to initialize the date picker.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd Protection Status

J Query Topics