Search within TutorialsPark

jQuery UI : Datepicker - Events


Learn how to use jQuery UI datepicker Widget to Get Notification on Events


jQuery UI : DatePicker Widget - Events

The jQuery UI DatePicker Widget supports a set of events which can be used to allow the user to get notifications when changes occur.


Table : jQuery UI DatePicker Events

Events Description
create Event is triggered when the datepicker is created.
onChangeMonthYear Event is triggered when the user moves to a different month or year.
onClose Event is triggered when a pop-up datepicker is closed.
onSelect Event is triggered when the user selects a date.

jQuery UI DatePicker : Response to Change in Month or Year

jQuery UI Datepicker event onChangeMonthYear is used to notify the user when a new month or year is selected,using either previous or next button or using setting of changeMonth and changeYear

In the demo below, the argument this is set to input element for datepicker, when the user selects a date on the first datepicker the same is set on the second as well.

Example: jQuery UI DatePicker Event- onChangeMonthYear

Give it a TRY! » Note: There are three arguments to the function, displayedYear , displayedMonth and


jQuery UI DatePicker : Response to Closing of Pop-up

jQuery UI DatePicker Widget's event of onClose is invoked when the pop-up datepicker is closed, without the user making a date Selection.

The handler function of this event has arguments which are string representation of the date(or empty string) and the date picker that triggered the event.

Example: jQuery UI DatePicker - show and hide using Methods

Give it a TRY! » Note: In the demo below, an alert box is displayed when a selection is made.


jQuery UI DatePicker : Localizing Date Selection

The jQuery UI Datepicker Widget has a comprehensive support for number of different date formats used around the globe, jQuery UI supports 61 types of date localizations.

In order to use localized datepicker widget on your page, you need to add the file jquery-ui-i18n.js from the jQuery UI website and link to the page requiring localization.

Example: jQuery UI Datepicker - Localizing Date Selection

Give it a TRY! » Note: Select the Language of the Date Picker from the select option menu.


jQuery UI Datepicker: Providing User with a Hint

jQuery UI Datepicker widget setting of appendText is used to provide the user with a hint about the format of the date.

Example: jQuery UI Datepicker Providing User with Hint

Give it a TRY! » Note: The HTML5 placeholder attribute for input element is a better alternative.


jQuery UI Datepicker: Setting Alternative Animations

jQuery UI Datepicker widget comes inbuilt with attractive opening animation, making the widget appear grow from nothing to fullsize.

Animation settings can be configured using options of duration , showAnim and showOptions

Example: jQuery UI Datepicker Configuring Alternative Animations

Give it a TRY! » Note: The duration setting sets the speed of widget opening and closing.