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
|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 SettingsGive 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.