Options
Basic syntax:
$(selector, context).datepicker(options);
The following table lists the different options that can be used with this method:
| Option | & Description |
|---|---|
| altField | This option specifies a jQuery selector for a field that is also updated with any date selections. |
| altFormat | This option is used when an altField option is specified. |
| appendText | This option is a String value to be placed after the <input> element, intended to show instructions to the user. |
| autoSize | This option when set to true resizes the <input> element to accommodate the datepicker’s date format asset with the dateFormat option. |
| beforeShow | This option is a callback function that’s invoked just before a datepicker is displayed, with the <input> element and datepicker instance passed as parameters. |
| beforeShowDay | This option is a callback function that takes a date as a parameter, that’s invoked for each day in the datepicker just before it’s displayed, with the date passed as the only parameter. |
| buttonImage | A URL of an image to use to display the datepicker when the showOn option is set to "button" or "both". If set, the buttonText option becomes the alt value and is not directly displayed. |
| buttonImageOnly | Whether the button image should be rendered by itself instead of inside a button element. This option is only relevant if the buttonImage option has also been set. |
| buttonText | The text to display on the trigger button. Use in conjunction with the showOn option set to "button" or "both". |
| calculateWeek | A function to calculate the week of the year for a given date. |
| changeMonth | Whether the month should be rendered as a dropdown instead of text. |
| changeYear | Whether the year should be rendered as a dropdown instead of text. Use the yearRange option to control which years are made available for selection. |
| closeText | The text to display for the close link. Use the showButtonPanel option to display this button. |
| constrainInput | When true, an entry in the input field is constrained to those characters allowed by the current dateFormat option. |
| currentText | The text to display for the current day link. Use the showButtonPanel option to display this button. |
| dateFormat | The format for parsed and displayed dates. For a full list of the possible formats see the |
| dayNames | The list of long day names, starting from Sunday, for use as requested via the dateFormat option. |
| dayNamesMin | The list of minimized day names, starting from Sunday, for use as column headers within the datepicker. |
| dayNamesShort | The list of abbreviated day names, starting from Sunday, for use as requested via the dateFormat option. |
| defaultDate | Set the date to highlight on first opening if the field is blank. Specify either an actual date via a Date object or as a string in the current dateFormat, or a number of days from today (e.g. +7) or a string of values and periods (‘y’ for years, ‘m’ for months, ‘w’ for weeks, ‘d’ for days, e.g. ‘+1m +7d’), or null for today. |
| duration | Control the speed at which the datepicker appears, it may be a time in milliseconds or a string representing one of the three predefined speeds (“slow”, “normal”, “fast”). |
| firstDay | Set the first day of the week: Sunday is 0, Monday is 1, etc. |
| gotoCurrent | When true, the current day link moves to the currently selected date instead of today. |
| hideIfNoPrevNext | Normally the previous and next links are disabled when not applicable (see the minDate and maxDate options). You can hide them altogether by setting this attribute to true. |
| isRTL | Whether the current language is drawn from right to left. |
| maxDate | The maximum selectable date. When set to null, there is no maximum. Multiple types supported: Date, Number and String |
| minDate | The minimum selectable date. When set to null, there is no minimum. Multiple types supported: Date, Number and String |
| monthNames | The list of full month names, for use as requested via the dateFormat option. |
| monthNamesShort | The list of abbreviated month names, as used in the month header on each datepicker and as requested via the dateFormat option. |
| navigationAsDateFormat | Whether the currentText, prevText and nextText options should be parsed as dates by the |
| nextText | The text to display for the next month link. With the standard ThemeRoller styling, this value is replaced by an icon. |
| numberOfMonths | The number of months to show at once. Multiple types supported: Number and Array |
| onChangeMonthYear | Called when the datepicker moves to a new month and/or year. The function receives the selected year, month (1-12), and the datepicker instance as parameters. this refers to the associated input field. |
| onClose | Called when the datepicker is closed, whether or not a date is selected. The function receives the selected date as text ("" if none) and the datepicker instance as parameters. this refers to the associated input field. |
| onSelect | Called when the datepicker is selected. The function receives the selected date as text and the datepicker instance as parameters. this refers to the associated input field. |
| prevText | The text to display for the previous month link. With the standard ThemeRoller styling, this value is replaced by an icon. |
| selectOtherMonths | Whether days in other months shown before or after the current month are selectable. This only applies if the showOtherMonths option is set to true. |
| shortYearCutoff | The cutoff year for determining the century for a date (used in conjunction with dateFormat ‘y’). Multiple types supported: Number and String |
| showAnim | The name of the animation used to show and hide the datepicker. Use "show" (the default), "slideDown", "fadeIn", any of the jQuery UI effects. Set to an empty string to disable animation. |
| showButtonPanel | Whether to display a button pane underneath the calendar. The button pane contains two buttons, a Today button that links to the current day, and a Done button that closes the datepicker. The buttons’ text can be customized using the currentText and closeText options respectively. |
| showCurrentAtPos | When displaying multiple months via the numberOfMonths option, the showCurrentAtPos option defines which position to display the current month in. |
| showMonthAfterYear | Whether to show the month after the year in the header. |
| showOn | When the datepicker should appear. The datepicker can appear when the field receives focus ("focus"), when a button is clicked ("button"), or when either event occurs ("both"). |
| showOptions | If using one of the jQuery UI effects for the showAnim option, you can provide additional properties for that animation using this option. |
| showOtherMonths | Whether to display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use the selectOtherMonths option. |
| showWeek | When true, a column is added to show the week of the year. The calculateWeek option determines how the week of the year is calculated. You may also want to change the firstDay option. |
| stepMonths | Set how many months to move when clicking the previous/next links. |
| weekHeader | The text to display for the week of the year column heading. Use the showWeek option to display this column. |
| yearRange | Specifies limits on which years are displayed in the dropdown in the form from:to when changeYear is true. The values can be absolute or relative (for example: 2005:+2, for 2005 through 2 years from now). The prefix c can be used to make relative values offset from the selected year rather than the current year (example: c-2:c+3). |
| yearSuffix | Additional text to display after the year in the month headers. |
Methods
Basic syntax:
$(selector, context).datepicker ("action", [params]);
The following table lists:
| Method | Description | Examples |
|---|---|---|
| destroy() | Removes the datepicker functionality completely. This will return the element back to its pre-init state. | $( ".selector" ).datepicker( "destroy" ); |
| dialog( date [, onSelect ] [, options ] [, pos ] ) | Displays datepicker in a jQuery UI dialog box. | $( ".selector" ).datepicker( "dialog", "25/07/2025" ); |
| getDate() | Returns the current date for the datepicker or null if no date has been selected. | var currentDate = $( ".selector" ).datepicker( "getDate" ); |
| hide() | Close a previously opened date picker. | $( ".selector" ).datepicker( "hide" ); |
| isDisabled() | Determine whether a date picker has been disabled. | var isDisabled = $( ".selector" ).datepicker( "isDisabled" ); |
| option( optionName ) | Gets the value currently associated with the specified optionName. | var isDisabled = $( ".selector" ).datepicker( "option", "disabled" ); |
| option() | Gets an object containing key/value pairs representing the current datepicker options hash. | var options = $( ".selector" ).datepicker( "option" ); |
| option( optionName, value ) | Sets the value of the datepicker option associated with the specified optionName. | $( ".selector" ).datepicker( "option", "disabled", true ); |
| option( options ) | Sets one or more options for the datepicker. | $( ".selector" ).datepicker( "option", { disabled: true } ); |
| refresh() | Redraw the date picker, after having made some external modifications. | $( ".selector" ).datepicker( "refresh" ); |
| setDate( date ) | Sets the specified date as the current date of the datepicker. | $( ".selector" ).datepicker( "setDate", "10/12/2025" ); |
| show() | Open the date picker. If the datepicker is attached to an input, the input must be visible for the datepicker to be shown. | $( ".selector" ).datepicker( "show" ); |
| widget() | Returns a jQuery object containing the datepicker. | var widget = $( ".selector" ).datepicker( "widget" ); |