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 onFocus and closes automatically onBlur or when a date is selected. For an inline calendar, simply attach the datepicker to a div or span.
You can use keyboard shortcuts to drive the datepicker:
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. They add their settings to the set
of available localizations and automatically apply them as defaults for all instances.
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']);
$("#datepicker").datepicker();
<!DOCTYPE html>
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#datepicker").datepicker();
});
</script>
</head>
<body style="font-size:62.5%;">
<div id="datepicker"></div>
</body>
</html>
Known issue: Datepicker does not trigger a create event.
Can be a function that takes an input field and current datepicker instance and returns an options object to update the datepicker with. It is called just before the datepicker is displayed.
beforeShow event as an init option.
$('.selector').datepicker({
beforeShow: function(input, inst) { ... }
});
The function takes a date as a parameter and must return an array with [0] equal to true/false indicating whether or not this date is selectable, [1] equal to a CSS class name(s) or "" for the default presentation, and [2] an optional popup tooltip for this date. It is called for each day in the datepicker before it is displayed.
beforeShowDay event as an init option.
$('.selector').datepicker({
beforeShowDay: function(date) { ... }
});Allows you to define your own event 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.
onChangeMonthYear event as an init option.
$('.selector').datepicker({
onChangeMonthYear: function(year, month, inst) { ... }
});Allows you to define your own event 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.
onClose event as an init option.
$('.selector').datepicker({
onClose: function(dateText, inst) { ... }
});Allows you to define your own event 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.
onSelect event as an init option.
$('.selector').datepicker({
onSelect: function(dateText, inst) { ... }
});Remove the datepicker functionality completely. This will return the element back to its pre-init state.
Disable the datepicker.
Enable the datepicker.
Get or set any datepicker option. If no value is specified, will act as a getter.
Set multiple datepicker options at once by providing an options object.
Returns the .ui-datepicker element.
Open a datepicker in a "dialog" box.
dateText: the initial date for the date picker as either a Date or a string in the current date format.
onSelect: A callback function when a date is selected. The function receives the date text and date picker instance as parameters.
settings: The new settings for the date picker.
pos: The position of the top/left of the dialog as [x, y] or a MouseEvent that contains the coordinates. If not specified the dialog is centered on the screen.
Determine whether a date picker has been disabled.
Close a previously opened date picker.
Call up a previously attached date picker. If the datepicker is attached to an input, the input must be visible for the datepicker to be shown.
Redraw a date picker, after having made some external modifications.
Returns the current date for the datepicker or null if no date has been selected.
Sets the current date for the datepicker. The new date may be a Date object or a string in the current date format (e.g. '01/26/2009'), 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 to clear the selected date.
The jQuery UI Datepicker plugin uses the jQuery UI CSS Framework to style its look and feel, including colors and background textures. We recommend using the ThemeRoller tool to create and download custom themes that are easy to build and maintain.
If a deeper level of customization is needed, there are widget-specific classes referenced within the jquery.ui.datepicker.css stylesheet that can be modified. These classes are highlighed in bold below.
Note: This is a sample of markup generated by the datepicker plugin, not markup you should use to create a datepicker. The only markup needed for that is <input type="text" /> or <div></div>.