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 DatePickerGive 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 DatePickerGive 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
|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
|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 defaultDateGive 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 ElementGive 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 ElementGive 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 SettingGive 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.