Search within TutorialsPark

jQuery UI : Datepicker - Appearance


Learn how to use jQuery UI Date Picker Widget to Manage Appearance


jQuery UI : DatePicker Widget - Appearance

The jQuery UI DatePicker Widget provides options to set the appearance of the datepicker , datepicker widget comes inbuilt with the default appearance. But users can finetune the appearance to suit the requirements of the project.


Table : jQuery UI Basic Appearance Settings

Settings Description
appendText To specify a format hint that will be inserted within the document after the input element.
closeText When to set the text to be used for the button bar that dismisses a pop-up datepicker. Default value is done
currentText To set the text to display for the current day link, must be used in conjunction with showButtonPanel attribute. Default value Today
duration To set the speed at which the datepicker opens. Default value is normal
gotoCurrent To set the first day of the week, starting with 0 for Sunday to 6 for Satuday.
selectOtherMonths To allow days in previous or following month which are then shown on the current month panel
showAnim To set the animation to be used when the datepicker widget is displayed.
showButtonPanel To show a panel of buttons for the datepicker widget, comprising of close and current links.
showOptions An object literal containing options to control the configured animation.Default value is none.
showOtherMonths To show the last and final days of the previous and next months. The default value is false
showWeek To display a column showing the week of the year, calculated using option calculateWeek. Default Value is false.
weekHeader To set the text to display for the week of the year column heading.The default value is "Wk"

jQuery UI DatePicker : Displaying the Week of the Year.

jQuery UI Datepicker setting of showWeek and weekHeader is used to display week information on the Datepicker widget.

A value of true for showWeek displays a column to show week numbers, and weeHeader is used to change the title of the week column from the default value of Wk

Example: jQuery UI DatePicker- Displaying Week Information.

Give it a TRY! » Note:The title has been changed from Wk to Week of Year.


jQuery UI DatePicker : Showing Other Months

jQuery UI DatePicker Widget by default displays dates in the current month only, and there are blank entries in the date grid before and after the set date range.

However, with showOtherMonth set to true , users can show dates from the previous and next month

Example: jQuery UI DatePicker - showOtherMonths Settings

Give it a TRY! » Note: Dates from month other than current cannot be selected unless selectOtherMonths is set to true.


jQuery UI DatePicker : Setting the Button Bar

The jQuery UI Datepicker Widget setting of showButtonPanel is used to create a button Bar at the bottom of the datepicker popup.

And the setting gotoCurrent when set to true, returns the datepicker to the currently selected date instead of the the current date, it is useful when used with defaultDate setting.

Example: jQuery UI Datepicker - Setting Button Panel

Give it a TRY! » Note: The button Done dismisses the button, while Today jumps to the current Date.