Search within TutorialsPark

jQuery UI : Datepicker Widget

Learn how to use jQuery UI Date Picker Widget

jQuery UI : DatePicker Widget

The jQuery UI DatePicker Widget is the most well documented , refined and comprehensive widget in the jQuery Library.

In terms of functionality and features it the best of all jQuery Widget, it provides a lot settings and is highly configurable and robust.

Getting data related information for user in text form is very tedious and problematic, since there is no uniformity of Date formats and hence extremely prone to errors.

The built-in functionality within datapicker widget enables automatic opening and closing animation along with the ability to navigate the widget using Keyboard.

jQuery UI DatePicker : Creating a Date Picker

jQuery UI Datepicker can be created using an input element and applying the datepicker method on it. The is no visual change on the input, but as soon as the input gains the focus the datepicker pops up to help user select a date.

The default datepicker comes with a set of built-in functionality, when it opens, it animates smoothly from zero to full-size, and sets the present date automatically.

Example: jQuery UI DatePicker- Creating a DatePicker

Give it a TRY! » Note: The datepicker closes automatically as soon as the element loses focus, or when ESC or ENTER key is pressed.

jQuery UI DatePicker : Inline DatePicker

jQuery UI DatePicker Widget can be made inline with the user Input using div or span element, and calling datepicker method onto this.

The benefit of using an inline datepicker is that the input element is always visible.It is useful when you do want to work with pop-ups.

Example: jQuery UI DatePicker - Inline DatePicker

Give it a TRY! » Note: The span element is used as a target for the datepicker widget.

jQuery UI DatePicker : Basic datepicker Settings

The basic nature of pop-up and inline datepicker widget can be configured and finetuned using a rich set of setting options provided by jQuery UI.

The table below lists a some basic setting of jQuery UI Datepicker Widget.

Table : jQuery UI Basic datepicker Settings

Settings Description
altField To specify a CSS selector for an alternative input field onto which a selected data can also be added.
buttonImageOnly To specify that the image set by buttonImage should be contained within an img element rather than a button.Default value is false.
buttonImage To specify the URL of an image to be used as the datewidget pop-up trigger button.Not the default value.
buttonText To specify the text for the date-widget pop-up trigger button. The default is an ellipsis (...)
defaultDate To set the default date when the datepicked is first poped up and displayed.
disabled To specify wheter the datepicker widget is disabled initially or not. Default value is false.
showOn To specify the trigger to display a pop-up datepicker widget. The default is focus

jQuery UI DatePicker : Setting the Default Date

The jQuery UI Datepicker Widget's default date is set using the setting defaultDate setting, it specifies the data that would be set when the datepicker is displayed initially.

If no value is specified for defaultDate setting, then the current date will be used. User has an option to set custom date as well.

Table : Formats and Values for jQuery UI Datepicker Default Date Setting

Value/Format Description
null To set the current Date System.
Date Object To set the value represented by the Date Object.
+days, -days To use the date two days away from the current date. + means after and - means before.
+1d +7w -1m +1y To set date relative to today, in terms of days , months and years.

Example: jQuery UI Datepicker- Setting defaultDate

Give it a TRY! » Note: Date intervals that you dont want to change can remain unchanged. Eg +2y rather than +0d +0w +0m +5y

jQuery UI Datepicker: Specifying Alternate Input Element

jQuery UI Datepicker widget setting altfield is used to specify an alternative input field that gets the updated date when a date is selected.

This technique is used to link an element with an inline datepicker, it is used a means for displaying the selection from an inline datepicker.

Example: jQuery UI Datepicker Setting Altering Element

Give it a TRY! » Note: The input element displays the date each time a selection is made

jQuery UI Datepicker: The pop-up Trigger

jQuery UI Datepicker widget setting showOn is used to control the trigger to open pop-up datepicker. Three values are available for this setting.

focus : When the element gains focus, the pop-up is shown

button : The datepicker widget is popped-up when a button is clicked.

both : The datepicker widget is seen when either button is clicked or the element gains focus.

Example: jQuery UI Datepicker Setting Altering Element

Give it a TRY! » Note: The value of both causes the pop-up to be displayed when the user either clicks the button or input gains focus.

jQuery UI Datepicker: buttonText Setting

jQuery UI Datepicker widget setting buttonText is used to set a text string as the button content.

Example: jQuery UI Datepicker buttonText Setting

Give it a TRY! » Note: The default button content is ellipsis(...)

jQuery UI Datepicker: buttonImage and buttonImageOnly Setting

jQuery UI Datepicker widget settings of buttonImage is used to specify an URL of an Image which will be set at the button Image

Setting buttonImageOnly to true means Image should be contained in an img element rather than the button.The default value is false.

Example: jQuery UI Datepicker buttonText Setting

Give it a TRY! » Note: The setting buttonImageOnly adds an image element to the document rather than the button.