Description: Select a date from a popup or inline calendar

The jQuery UI Datepicker is a highly configurable plugin that adds datepicker functionality to your pages. You can customize the date format and language, restrict the selectable date ranges and add in buttons and other navigation options easily.

By default, the datepicker calendar opens in a small overlay when the associated text field gains focus. For an inline calendar, simply attach the datepicker to a div or span.

Keyboard interaction

While the datepicker is open, the following key commands are available:

PAGE UP : Move to the previous month.

: Move to the previous month. PAGE DOWN : Move to the next month.

: Move to the next month. CTRL + PAGE UP : Move to the previous year.

+ : Move to the previous year. CTRL + PAGE DOWN : Move to the next year.

+ : Move to the next year. CTRL + HOME : Open the datepicker if closed.

+ : Open the datepicker if closed. CTRL / COMMAND + HOME : Move to the current month.

/ + : Move to the current month. CTRL / COMMAND + LEFT : Move to the previous day.

/ + : Move to the previous day. CTRL / COMMAND + RIGHT : Move to the next day.

/ + : Move to the next day. CTRL / COMMAND + UP : Move to the previous week.

/ + : Move to the previous week. CTRL / COMMAND + DOWN : Move to the next week.

/ + : Move to the next week. ENTER : Select the focused date.

: Select the focused date. CTRL / COMMAND + END : Close the datepicker and erase the date.

/ + : Close the datepicker and erase the date. ESCAPE : Close the datepicker without selection.

Utility functions

$.datepicker.setDefaults( options )

Change the default options for all date pickers.

Use the option() method to change options for individual instances.

Code examples: Set all date pickers to open on focus or a click on an icon. 1 2 3 4 5 6 $.datepicker.setDefaults({ showOn: "both" , buttonImageOnly: true , buttonImage: "calendar.gif" , buttonText: "Calendar" }); Set all date pickers to have French text. 1 $.datepicker.setDefaults( $.datepicker.regional[ "fr" ] );

Format a date into a string value with a specified format.

The format can be combinations of the following:

d - day of month (no leading zero)

dd - day of month (two digit)

o - day of the year (no leading zeros)

oo - day of the year (three digit)

D - day name short

DD - day name long

m - month of year (no leading zero)

mm - month of year (two digit)

M - month name short

MM - month name long

y - year (two digit)

yy - year (four digit)

@ - Unix timestamp (ms since 01/01/1970)

! - Windows ticks (100ns since 01/01/0001)

'...' - literal text

'' - single quote

anything else - literal text

There are also a number of predefined standard date formats available from $.datepicker :

ATOM - 'yy-mm-dd' (Same as RFC 3339/ISO 8601)

COOKIE - 'D, dd M yy'

ISO_8601 - 'yy-mm-dd'

RFC_822 - 'D, d M y' (See RFC 822)

RFC_850 - 'DD, dd-M-y' (See RFC 850)

RFC_1036 - 'D, d M y' (See RFC 1036)

RFC_1123 - 'D, d M yy' (See RFC 1123)

RFC_2822 - 'D, d M yy' (See RFC 2822)

RSS - 'D, d M y' (Same as RFC 822)

TICKS - '!'

TIMESTAMP - '@'

W3C - 'yy-mm-dd' (Same as ISO 8601)

Code examples: Display the date in ISO format. Produces "2007-01-26". 1 $.datepicker.formatDate( "yy-mm-dd" , new Date( 2007 , 1 - 1 , 26 ) ); Display the date in expanded French format. Produces "Samedi, Juillet 14, 2007". 1 2 3 4 5 6 $.datepicker.formatDate( "DD, MM d, yy" , new Date( 2007 , 7 - 1 , 14 ), { dayNamesShort: $.datepicker.regional[ "fr" ].dayNamesShort, dayNames: $.datepicker.regional[ "fr" ].dayNames, monthNamesShort: $.datepicker.regional[ "fr" ].monthNamesShort, monthNames: $.datepicker.regional[ "fr" ].monthNames });

Extract a date from a string value with a specified format.

The format can be combinations of the following:

d - day of month (no leading zero)

dd - day of month (two digit)

o - day of year (no leading zeros)

oo - day of year (three digit)

D - day name short

DD - day name long

m - month of year (no leading zero)

mm - month of year (two digit)

M - month name short

MM - month name long

y - year (two digit)

yy - year (four digit)

@ - Unix timestamp (ms since 01/01/1970)

! - Windows ticks (100ns since 01/01/0001)

'...' - literal text

'' - single quote

anything else - literal text

A number of exceptions may be thrown:

'Invalid arguments' if either format or value is null

'Missing number at position nn' if format indicated a numeric value that is not then found

'Unknown name at position nn' if format indicated day or month name that is not then found

'Unexpected literal at position nn' if format indicated a literal value that is not then found

'Invalid date' if the date is invalid, such as '31/02/2007'

Code examples: Extract a date in ISO format. 1 $.datepicker.parseDate( "yy-mm-dd" , "2007-01-26" ); Extract a date in expanded French format. 1 2 3 4 5 6 7 $.datepicker.parseDate( "DD, MM d, yy" , "Samedi, Juillet 14, 2007" , { shortYearCutoff: 20 , dayNamesShort: $.datepicker.regional[ "fr" ].dayNamesShort, dayNames: $.datepicker.regional[ "fr" ].dayNames, monthNamesShort: $.datepicker.regional[ "fr" ].monthNamesShort, monthNames: $.datepicker.regional[ "fr" ].monthNames });

$.datepicker.iso8601Week( date )

Determine the week of the year for a given date: 1 to 53.

This function uses the ISO 8601 definition of a week: weeks start on a Monday and the first week of the year contains January 4. This means that up to three days from the previous year may be included in the of first week of the current year, and that up to three days from the current year may be included in the last week of the previous year.

This function is the default implementation for the calculateWeek option.

Code examples: Find the week of the year for a date. 1 $.datepicker.iso8601Week( new Date( 2007 , 1 - 1 , 26 ) );

$.datepicker.noWeekends

Set as beforeShowDay function to prevent selection of weekends.

We can provide the noWeekends() function into the beforeShowDay option which will calculate all the weekdays and provide an array of true / false values indicating whether a date is selectable.

Code examples: Set the DatePicker so no weekend is selectable 1 2 3 $( "#datepicker" ).datepicker({ beforeShowDay: $.datepicker.noWeekends });

Localization

Datepicker provides support for localizing its content to cater for different languages and date formats. Each localization is contained within its own file with the language code appended to the name, e.g., jquery.ui.datepicker-fr.js for French. The desired localization file should be included after the main datepicker code. Each localization file adds its options to the set of available localizations and automatically applies them as defaults for all instances. Localization files can be found at https://github.com/jquery/jquery-ui/tree/master/ui/i18n.

The $.datepicker.regional attribute holds an array of localizations, indexed by language code, with "" referring to the default (English). Each entry is an object with the following attributes: closeText , prevText , nextText , currentText , monthNames , monthNamesShort , dayNames , dayNamesShort , dayNamesMin , weekHeader , dateFormat , firstDay , isRTL , showMonthAfterYear , and yearSuffix .

You can restore the default localizations with:

$.datepicker.setDefaults( $.datepicker.regional[ "" ] );

And can then override an individual datepicker for a specific locale:

$( selector ).datepicker( $.datepicker.regional[ "fr" ] );

Theming The datepicker widget uses the jQuery UI CSS framework to style its look and feel. If datepicker specific styling is needed, the following CSS class names can be used for overrides or as keys for the classes option:

ui-datepicker : The outer container of the datepicker. If the datepicker is inline, this element will additionally have a ui-datepicker-inline class. If the isRTL option is set, this element will additionally have a class of ui-datepicker-rtl . ui-datepicker-header : The container for the datepicker's header. ui-datepicker-prev : The control used to select previous months. ui-datepicker-next : The control used to select subsequent months. ui-datepicker-title : The container for the datepicker's title containing the month and year. ui-datepicker-month : The textual display of the month or a <select> element if the changeMonth option is set. ui-datepicker-year : The textual display of the year or a <select> element if the changeYear option is set. ui-datepicker-calendar : The table that contains the calendar itself. ui-datepicker-week-end : Cells containing weekend days. ui-datepicker-other-month : Cells containing days that occur in a month other than the currently selected month. ui-datepicker-unselectable : Cells containing days that are not selectable by the user. ui-datepicker-current-day : The cell containing the selected day. ui-datepicker-today : The cell containing today's date. ui-datepicker-buttonpane : The buttonpane that is used when the showButtonPanel option is set. ui-datepicker-current : The button used to select today's date.

: The outer container of the datepicker. If the datepicker is inline, this element will additionally have a class. If the option is set, this element will additionally have a class of .

If the numberOfMonths option is used to display multiple months at once, a number of additional classes are used:

ui-datepicker-multi : The outermost container of a multiple month datepicker. This element can additionally have a ui-datepicker-multi-2 , ui-datepicker-multi-3 , or ui-datepicker-multi-4 class name depending on the number of months to display. ui-datepicker-group : Individual pickers within the group. This element will additionally have a ui-datepicker-group-first , ui-datepicker-group-middle , or ui-datepicker-group-last class name depending on its position within the group.

: The outermost container of a multiple month datepicker. This element can additionally have a , , or class name depending on the number of months to display.

Dependencies