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
|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- onChangeMonthYearGive 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 MethodsGive 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 SelectionGive 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 HintGive 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