jQuery Datepicker

A jQuery plugin that attaches a popup calendar to your input fields or shows an inline calendar for selecting individual dates or date ranges. If you find this plugin useful please vote for it on the jQuery site.

For support of other world calendars, and a datepicker that works with them, see the jQuery Calendars plugin. For date entry via a spinner use the jQuery Date Entry plugin. Complement this plugin with the jQuery Time Entry plugin.

The current version is 3.7.4 and is available under the GPL and MIT licences. For more detail see the documentation reference page. Or see a minimal page that you could use as a basis for your own investigations.

This plugin formed the basis for the jQuery UI Datepicker. It is made available as a separate plugin because the jQuery UI version desired simplified functionality. It was originally developed by Marc Grabanski.

Defaults
Invocation
Keyboard
Default Date
Min/Max
Formats
Day-by-day
Ranges
Multiple
Controls
Month
Miscellaneous
Events
Configuration
Localisation
Validation
Styling
In the Wild
Quick Ref

Default Settings

The datepicker functionality can easily be added as a popup to an input field, or inline to a division/span, with appropriate default settings. For an inline datepicker, use the onSelect event to be notified of a date selection.

Disable and re-enable the datepicker with a command. You can also remove the datepicker widget if it is no longer required.

Popup datepicker (input):

$('#defaultPopupDatepicker').datepick();

$('.buttonDisable').toggle(function() {
		$(this).text('Enable').siblings('.datepicker').datepick('disable');
	},
	function() {
		$(this).text('Disable').siblings('.datepicker').datepick('enable');
	}
);

$('.removeDatepicker').toggle(function() {
		$(this).text('Re-attach').siblings('.datepicker').datepick('destroy');
	},
	function() {
		$(this).text('Remove').siblings('.datepicker').datepick();
	}
);

Inline datepicker (div/span):

$('#defaultInlineDatepicker').datepick();

The default settings are:

Datepicker appears on focus (popup only)
Datepicker appears below the input field (unless there is not enough room there)
Text is in English
Date format is mm/dd/yyyy
Clear/Close controls show at the top (popup only)
Month and year are selectable directly
10 years before and after the current year are shown
Show a single month
Select a single date
Week starts on Sunday
Days in other months are not displayed
No date restrictions
Clicking elsewhere closes the date picker (popup only)

You can override the defaults globally as shown below:

$.datepick.setDefaults({showOn: 'focus'});

Processed fields are marked with a class of hasDatepick and are not re-processed if targetted a second time.

Invocation

You can trigger the datepicker by focussing on the field (the default), via an associated button, or by both. Disable or enable the fields and their triggers via a command.

Button only trigger:

$('#buttonDatepicker').datepick({showOn: 'button'});

Image only trigger:

$('#imageDatepicker').datepick({showOn: 'button',
	buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Embedded image trigger:

$('#embeddedDatepicker').datepick({showOn: 'button',
	buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

.embed + img { position: relative; left: -21px; top: -1px; }

Focus and button trigger:

$('#bothDatepicker').datepick({showOn: 'both',
	buttonImage: 'img/calendar.gif'});

When setting the date you can provide a Date object, or a number for days from now, or a date string in the current format, or a string containing the period and units: 'y' for years, 'm' for months, 'w' for weeks, or 'd' for days (the default). Letters may be upper or lower case. Multiple offsets may be combined into the one setting. By default, relative dates are calculated from today, but by prefixing the string with 'c' they are calculated from the currently selected date.

Interact with the inputs:

Absolute date Absolute string

Relative to today Relative to current value

function getTheDate() {
	alert('The date is ' + $('#' + $('#pickInput').val()).
		datepick('getDate'));
}

function setTheDate() {
	var dates = [new Date(2009, 1 - 1, 26),
		'01/26/2009', '+1m +1w', 'c -7'];
	var index = $('input[name=absRel]:checked').val();
	$('#' + $('#pickInput').val()).datepick('setDate', dates[index]);
}

$('#getTheDate').click(getTheDate);
$('#setTheDate').click(setTheDate);

You can also control the animation used to display the datepicker and its duration. There are three standard animations (show, fadeIn, slideDown) as well as the ones from the jQuery UI effects package. Additional options for the latter may be specified with the showOptions setting.

Show :

$('#animDatepicker').datepick({showOn: 'both'});
		
$('#duration,#animation').change(function() {
	$('#animDatepicker').datepick('option',
		{showAnim: $('#animation').val(), duration: $('#duration').val()});
});

Keyboard Equivalents

You can also drive the datepicker via the keyboard, as shown below, or enter a date directly into the input field.

page up/down - previous/next month
ctrl+page up/down - previous/next year
ctrl+home - current month or open when closed
ctrl+left/right - previous/next day
ctrl+up/down - previous/next week
enter - accept the selected date
ctrl+end - close and erase the date
escape - close the datepicker without selection

Keyboard equivalents:

$('#keyboardDatepicker').datepick({showOn: 'both',
	buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Default Date

You can set the default date to display when no other is set in the datepicker. Without any modification, the default date is today. The default date can be set as a relative value instead of as an absolute date. Use a simple number to offset from today's date a given number of days, or use a string to specify one or more units and periods. Use 'D' for days, 'W' for weeks, 'M' for months, or 'Y' for years.

Actual date - January 1, 2010:

$('#defaultActualDatepicker').datepick({defaultDate: new Date(2010, 1 - 1, 1),
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Date string - January 1, 2010:

$('#defaultDateDatepicker').datepick({defaultDate: '01/01/2010',
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Seven days ahead:

$('#defaultNumDatepicker').datepick({defaultDate: +7,
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Two weeks ahead:

$('#defaultStr1Datepicker').datepick({defaultDate: '+2W',
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

One month and ten days ahead:

$('#defaultStr2Datepicker').datepick({defaultDate: '+1M +10D',
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Show default date:

$('#showDefaultDatepicker').datepick({defaultDate: '-1w', showDefault: true,
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Minimum and Maximum Dates

You can set minimum and/or maximum dates within which a date may be chosen. These can be set as relative values instead of as absolute dates. Use a simple number to offset from today's date a given number of days, or use a string to specify one or more units and periods. Use 'D' for days, 'W' for weeks, 'M' for months, or 'Y' for years.

Jan 1, 2007 to Jan 1, 2009:

$('#minmaxDatepicker').datepick({minDate: new Date(2007, 1 - 1, 26),
	maxDate: new Date(2009, 1 - 1, 26), showOn: 'both',
	buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

As date strings:

$('#minmax2Datepicker').datepick({minDate: '01/26/2007',
	maxDate: '01/26/2009', showOn: 'both',
	buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Seven days ago to 30 days ahead:

$('#minmaxNumDatepicker').datepick({minDate: -7, maxDate: +30,
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Two weeks ago to one month, two weeks, three days ahead:

$('#minmaxStrDatepicker').datepick({minDate: '-2W', maxDate: '+1M +2W +3D',
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Date Formats

You can specify the format in which the date is to appear. Use the combinations below, with the default being 'mm/dd/yy'. You must quote (using ') any text that matches these formats to avoid it being replaced.

d - day of the month (no leading zero)
dd - day of the month (two digit)
D - day name short
DD - day name long
o - day of the year (no leading zeros)
oo - day of the year (three digits)
w - week of year (no leading zero)
ww - week of year (two digit)
m - month of the year (no leading zero)

mm - month of the 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

Or you can use one of the predefined formats:

$.datepick.ATOM - 'yy-mm-dd' (RFC 3339/ISO 8601)
$.datepick.COOKIE - 'D, dd M yy'
$.datepick.ISO_8601 - 'yy-mm-dd'
$.datepick.RFC_822 - 'D, d M y'
$.datepick.RFC_850 - 'DD, dd-M-y'
$.datepick.RFC_1036 - 'D, d M y'

$.datepick.RFC_1123 - 'D, d M yy'
$.datepick.RFC_2822 - 'D, d M yy'
$.datepick.RSS - 'D, d M y' (RFC 822)
$.datepick.TICKS - '!'
$.datepick.TIMESTAMP - '@'
$.datepick.W3C - 'yy-mm-dd' (ISO 8601)

Date format:

$('#formatDatepicker').datepick({
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});
	
var formats = ['mm/dd/yy', 'M d, yy', 'MM d, yy', 'DD, MM d, yy',
	'mm/dd/y', 'dd/mm/yy', 'mm/dd/yy (\'w\'w)', '\'Day\' d \'of\' MM, yy',
	$.datepick.ATOM, $.datepick.COOKIE, $.datepick.ISO_8601,
	$.datepick.RFC_822, $.datepick.RFC_850, $.datepick.RFC_1036,
	$.datepick.RFC_1123, $.datepick.RFC_2822, $.datepick.RSS,
	$.datepick.TICKS, $.datepick.TIMESTAMP, $.datepick.W3C];

$('#dateFormat').change(function() {
	$('#formatDatepicker').val('').
		datepick('option', {dateFormat: formats[$(this).val()]});
});

Day-by-day Modifications

You have some control over the behaviour and style of individual days shown in the datepicker by preventing days being selected, by changing their style, by providing a tool tip, or by changing their description in the status bar. The beforeShowDay function is called for each day shown and returns an array with a selectable flag, any CSS styles, and an optional tooltip.

Weekends not selectable:

$('#noWeekendsDatepicker').datepick({beforeShowDay: $.datepick.noWeekends,
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

National days (CSS):

$('#nationalDatepicker').datepick({beforeShowDay: nationalDays,
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});
	
var natDays = [[1, 26, 'au'], [2, 6, 'nz'], [3, 17, 'ie'], [4, 27, 'za'],
	[5, 25, 'ar'], [6, 6, 'se'], [7, 4, 'us'], [8, 17, 'id'],
	[9, 7, 'br'], [10, 1, 'cn'], [11, 22, 'lb'], [12, 12, 'ke']];

function nationalDays(date) {
	for (i = 0; i < natDays.length; i++) {
		if (date.getMonth() == natDays[i][0] - 1 && date.getDate() == natDays[i][1]) {
			return [false, natDays[i][2] + '_day'];
		}
	}
	return [true, ''];
}

td.ar_day { text-indent: -9999px; background: #eee url(ar.gif) no-repeat center; }
td.au_day { text-indent: -9999px; background: #eee url(au.gif) no-repeat center; }
...

Show tooltip (day of year):

$('#dayOfYearDatepicker').datepick({beforeShowDay: showDayOfYear,
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});
 
function showDayOfYear(date) { 
	var lastYearEnd = new Date(date.getFullYear() - 1, 12 - 1, 31, 0, 0, 0, 0);
	var doy = Math.floor(((date.getTime() - lastYearEnd.getTime()) / 86400000) + 0.25);
	return [true, '', 'Day ' + doy + ' of  the year'];
}

Highlight today (status): - hover over today

$('#highlightTodayDatepicker').datepick(
	{showStatus: true, statusForDate: highlightToday, 
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});
	
function highlightToday(date, inst) {
	var today = new Date();
	today = new Date(today.getFullYear(), today.getMonth(), today.getDate());
	return (today.getTime() == date.getTime() ? 'Select <b>today</b>' :
		$.datepick.dateStatus(date, inst));  
}

Date Ranges

You can choose date ranges instead of individual dates. The first selection picks the start of the range and the second selection is the end of the range.

Date range:

$('#rangeDatepicker').datepick({rangeSelect: true,
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Date range showing two months:

$('#range2Datepicker').datepick({rangeSelect: true, numberOfMonths: 2,
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Inline range showing six months:

$('#range6Datepicker').datepick({rangeSelect: true, numberOfMonths: [2, 3],
	stepMonths: 3, prevText: '<< Previous months', nextText: 'Next months >>'});

Date range with minimum/maximum:

$('#rangeMinmaxDatepicker').datepick({rangeSelect: true,
	minDate: -7, maxDate: '+1Y',
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Date range with no weekends:

$('#rangeNoWkendDatepicker').datepick(
	{rangeSelect: true, beforeShowDay: $.datepick.noWeekends,
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Date range with separate fields: to

$('#startDatepicker,#endDatepicker').datepick({beforeShow: customRange,
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});
	
function customRange(input) {
	return {minDate: (input.id == 'endDatepicker' ?
		$('#startDatepicker').datepick('getDate') : null),
		maxDate: (input.id == 'startDatepicker' ?
		$('#endDatepicker').datepick('getDate') : null)};
}

Multiple Dates

You can choose multiple individual dates - not in a range - and limit the number of dates so selected. The first selection of a date includes it and the second selection of the same date excludes it. The datepicker closes automatically when the maximum number of allowed dates is chosen.

If both range selection and multiple selection have been requested, range selection takes precedence.

Two dates:

$('#multi2Datepicker').datepick({multiSelect: 2,
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Four dates:

$('#multi4Datepicker').datepick({multiSelect: 4, multiSeparator: '+',
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

"Unlimited" dates:

$('#multi999Datepicker').datepick({multiSelect: 999,
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Three dates inline:

$('#multi3Datepicker').datepick({multiSelect: 3, numberOfMonths: 3,
	stepMonths: 3, prevText: '<< Previous months', nextText: 'Next months >>'});

Controls and Navigation

Modify the controls and month/year navigation, as shown below.

Show icons for controls:

$('#iconsDatepicker').datepick({clearText: '<img src="img/clear.gif"/>',
	closeText: '<img src="img/close.gif"/>',
	prevText: '<img src="img/prev.gif"/>',
	currentText: '<img src="img/current.gif"/>',
	nextText: '<img src="img/next.gif"/>',
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Clear/Close at bottom:

$('#controlsDatepicker').datepick({closeAtTop: false,
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Mandatory date (no Clear):

$('#mandatoryDatepicker').datepick({mandatory: true,
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Hide Prev/Next if not required:

$('#noPrevNextDatepicker').datepick({
	hideIfNoPrevNext: true, minDate: -20, maxDate: +20,
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Prev/Next as months:

$('#prevNextNameDatepicker').datepick({navigationAsDateFormat: true,
	prevText: '< M', currentText: 'M y', nextText: 'M >',
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Show big Prev/Next controls:

$('#bigPrevNextDatepicker').datepick({showBigPrevNext: true,
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Show big Prev/Next moving six months:

$('#bigPrevNext6Datepicker').datepick({showBigPrevNext: true, stepBigMonths: 6,
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

'Today' goes to current selection:

$('#currentDatepicker').datepick({
	gotoCurrent: true, currentText: 'Current',
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

No month/year drop-down:

$('#monthYearDatepicker').datepick({changeMonth: false, changeYear: false,
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Show -5 to +5 years around displayed date:

$('#yearsRel1Datepicker').datepick({yearRange: 'c-5:c+5',
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Show -7 to +3 years around today:

$('#yearsRel2Datepicker').datepick({yearRange: '-7:+3',
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Show years 1980 to 2010:

$('#yearsAbsDatepicker').datepick({yearRange: '1980:2010',
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Show years 1990 to 9 years ago:

$('#yearsMixDatepicker').datepick({yearRange: '1990:-9',
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Show month after year:

$('#monthAfterDatepicker').datepick({showMonthAfterYear: true,
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Month display

Modify the display of each month, as shown below.

Change first day of the week: - click on a day header

$('#firstDayDatepicker').datepick({changeFirstDay: true,
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Highlight the hovered week:

$('#highlightWeekDatepicker').datepick({highlightWeek: true,
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Show days from other months:

$('#otherMonthsDatepicker').datepick({showOtherMonths: true,
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Select days from other months:

$('#selectOtherDatepicker').datepick({
	showOtherMonths: true, selectOtherMonths: true,
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Show week of the year (ISO 8601):

$('#showWeekDatepicker').datepick({
	showWeeks: true, firstDay: 1, changeFirstDay: false, showOtherMonths: true,
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Show three months:

$('#months3Datepicker').datepick({numberOfMonths: 3,
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Show three months with current in the middle:

$('#months3MiddleDatepicker').datepick({numberOfMonths: 3, showCurrentAtPos: 1,
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Show three months ending at current one:

$('#months3LastDatepicker').datepick({numberOfMonths: 3, showCurrentAtPos: 2,
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Miscellaneous

Various other behaviours are available, as shown below.

Append text:

$('#appendDatepicker').datepick({appendText: '(calendar available)',
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Auto size for :

$('#sizeDatepicker').datepick({autoSize: true,
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});
	
$('#selectSize').change(function() {
	$('#sizeDatepicker').datepick('change', {dateFormat: $(this).val()});
});

Alignment :

$('#alignmentDatepicker').datepick({
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});
	
$('#selectAlignment').change(function() {
	$('#alignmentDatepicker').datepick('change', {alignment: $(this).val()});
});

Show status bar:

$('#statusDatepicker').datepick({showStatus: true,
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Alternate field and format:

$("#altDatepicker").datepick({dateFormat: 'D d MM, yy',
	altField: '#altOutput', altFormat: 'yy-mm-dd',
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Textarea with multiple dates:

$('#textDatepicker').datepick({multiSelect: 999, multiSeparator: ', ',
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Open in a "dialog":

$('#dialogButton').click(function() {
	$(this).datepick('dialog', $('#dialogDatepicker').val(),
		setDateFromDialog, {prompt: 'Choose a date', duration: ''})
});

function setDateFromDialog(date) {  
    $('#dialogDatepicker').val(date);  
}

Linked to drop-downs:

$('#selectedDatepicker').datepick({alignment: 'bottomRight',
	beforeShow: readSelected, onSelect: updateSelected,
	minDate: new Date(2001, 1 - 1, 1), maxDate: new Date(2010, 12 - 1, 31),
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});
	
// Prepare to show a date picker linked to three select controls
function readSelected() {
	$('#selectedDatepicker').val($('#selectMonth').val() + '/' +
		$('#selectDay').val() + '/' + $('#selectYear').val());
	return {};
}

// Update three select controls to match a date picker selection
function updateSelected(date) {
	$('#selectMonth').val(date.substring(0, 2));
	$('#selectDay').val(date.substring(3, 5));
	$('#selectYear').val(date.substring(6, 10));
}

Linked to inputs: / /

$('#linkedDatepicker').datepick({alignment: 'bottomRight',
	beforeShow: readLinked, onSelect: updateLinked,
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});
	
// Prepare to show a date picker linked to three input controls
function readLinked() {
	$('#linkedDatepicker').val($('#linkedMonth').val() + '/' +
		$('#linkedDay').val() + '/' + $('#linkedYear').val());
	return {};
}
 
// Update three input controls to match a date picker selection
function updateLinked(date) {
	$('#linkedMonth').val(date.substring(0, 2));
	$('#linkedDay').val(date.substring(3, 5));
	$('#linkedYear').val(date.substring(6, 10));
}

Events

There are several event hooks in the datepicker to allow you respond to user actions.

Select: a single date a date range multiple dates

$('input[name=useDatepicker]').click(function() {
	$('#events .hasDatepick').datepick('option', {
		rangeSelect: $('#useRange').is(':checked'),
		multiSelect: $('#useMulti').is(':checked') ? 2 : 0});
});

On change month/year:

$('#onChangeDatepicker').datepick(
	{onChangeMonthYear: function(year, month) {
		alert('Moving to month ' + month + '/' + year); },
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

On hover: You're looking at ...

$('#onHoverDatepicker').datepick(
	{onHover: function(value, date) { $('#hoverText').text(
		$.datepick.formatDate('DD, MM d, yy', date)); },
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

On selection:

$('#onSelectDatepicker').datepick(
	{onSelect: function(value, date) { alert('The chosen date is ' + value); },
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

On close:

$('#onCloseDatepicker').datepick(
	{onClose: function(value, date) { alert('Closed with date ' + value); },
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Inline Configuration

Instead of configuring input fields via parameters to the datepicker instantiation, you can specify them inline. You must add the jQuery Metadata plugin to your page and then encode the settings in the class attribute (by default).

Inline configuration:

<input type="text" id="configDatepicker" value="" size="10"
	class="{closeAtTop: false, firstDay: 1, appendText: '(pick a date)',
	minDate: new Date(2008, 12 - 1, 25)}"/>

$('#configDatepicker').datepick({
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Localisation

You can localise the datepicker for other languages and regional differences. The datepicker defaults to English with a date format of mm/dd/yyyy. Select a language for the datepicker.

$('#l10nDatepicker').datepick($.extend({showStatus: true,
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif',
	altField: '#l10nAlternate', altFormat: 'DD, d MM, yy'},
	$.datepick.regional['fr']));
	
$('#l10nLanguage').change(function() {
	var language = $(this).val();
	$.localise('js/jquery.datepick', {language: language});
	$('#l10nDatepicker').datepick('option', $.datepick.regional[language]);
	$.datepick.setDefaults($.datepick.regional['']);
});

Some localisations read right-to-left.

$('#rtlDatepicker').datepick($.extend({showStatus: true,
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif',
	altField: '#rtlAlternate', altFormat: 'DD, d MM, yy'},
	$.datepick.regional['ar']));
	
$('#rtlLanguage').change(function() {
	var language = $(this).val();
	$.localise('js/jquery.datepick', {language: language});
	$('#rtlDatepicker').datepick('option', $.datepick.regional[language]);
	$.datepick.setDefaults($.datepick.regional['']);
});

You need to load the appropriate language package (see list below), which adds a language set ($.datepick.regional[langCode]) and automatically sets this language as the default for all datepicker fields.

<script type="text/javascript" src="jquery.datepick-fr.js"></script>

Thereafter, if desired, you can restore the original language settings.

$.datepick.setDefaults($.datepick.regional['']);

And then configure the language per datepicker field.

$('#l10nDatepicker').datepick($.datepick.regional['fr']);

Validation Integration

Datepicker can be integrated with Jörn Zaefferer's validation plugin by adding the jquery.datepick-validation.js extension to your page. Four new validations are defined, as listed below. All automatically handle date ranges. The first may be added as a class to your datepicker fields, while the others must be defined in the validate settings and be passed an empty array.

dpDate - basic format validation
dpMinDate - validation against a minimum date limit only
dpMaxDate - validation against a maximum date limit only
dpMinMaxDate - validation against minimum and maximum date limits

There is also a custom errorPlacement function defined so that the error messages appear after any trigger button or image.

You can override the validation error messages through the messages setting of the validation plugin, or globally via the datepicker setDefaults function with the following settings: validateDate, validateDateMin, validateDateMax, and validateDateMinMax.

$('#validateForm').validate({
	errorPlacement: $.datepick.errorPlacement,
	rules: {
		validMinDatepicker: {dpMinDate: []},
		validMaxDatepicker: {dpMaxDate: []},
		validMinMaxDatepicker: {dpMinMaxDate: []}
	},
	messages: {
		validRangeDatepicker: 'Please enter a valid date range',
		validMultiDatepicker: 'Please enter at most three valid dates'
	}});

Validate date (dpDate):

$('#validDefaultDatepicker').datepick(
	{showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Validate alternate format (dpDate):

$('#validFormatDatepicker').datepick({dateFormat: 'yy-mm-dd'});

Validate date range (dpDate):

$('#validRangeDatepicker').datepick({rangeSelect: true,
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Validate multiple dates (dpDate):

$('#validMultiDatepicker').datepick({multiSelect: 3,
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Validate minimum (dpMinDate):

$('#validMinDatepicker').datepick({minDate: -7, 
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Validate maximum (dpMaxDate):

$('#validMaxDatepicker').datepick({maxDate: +7,
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Validate min/max (dpMinMaxDate):

$('#validMinMaxDatepicker').datepick({minDate: -7, maxDate: +7,
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

Datepicker Styling

Use CSS to style the datepicker for your site. Now you can also apply ThemeRoller styles to the datepicker by setting the useThemeRoller option to true and including the appropriate stylesheets.

To use a non-ThemeRoller style you just need to include the appropriate stylesheet in your page:

<style type="text/css">
@import "css/jquery.datepick.css";
</style>

To use a ThemeRoller style you need to obtain and include the appropriate ThemeRoller CSS in your page, along with the corresponding local overrides:

<style type="text/css">
@import "themes/cupertino/ui.all.css";
@import "css/ui-cupertino.datepick.css";
</style>

Change style:

See a ThemeRoller version.

$('#styleDatepicker,#styleInlineDatepicker').datepick({
	showWeeks: true, showOtherMonths: true, showStatus: true,
	numberOfMonths: 2, firstDay: 1, showOn: 'both',
	buttonImageOnly: true, buttonImage: 'img/calendar.gif'});

$('#styleSelect').change(function() {
	var themes = $(this).val().split(',');
	$.datepick.setDefaults({useThemeRoller: !!themes[1]});
	if (themes[1] && !$.browser.msie) {
		$('#themeui').attr('href',
			'themes16/' + themes[1] + '/ui.all.css');
	}
	$('#theme').attr('href', 'css/' + themes[0]);
	// Allow time to load styles, then redraw inline datepickers
	setTimeout(function() {
			$('span.hasDatepick').each(function() {
				var settings = $.data(this, 'datepick').settings;
				$(this).datepick('destroy').datepick(
					$.extend(settings, {useThemeRoller: !!themes[1]}));
			});
		}, 500);
});

The default basic structure is shown below:

<div id="datepick-div">
	<div class="datepick-control">
		<div class="datepick-clear"><a>Clear</a></div>
		<div class="datepick-close"><a>Close</a></div>
	</div>
	<div class="datepick-links">
		<div class="datepick-prev"><a><Prev</a></div>
		<div class="datepick-current"><a>Today</a></div>
		<div class="datepick-next"><a>Next></a></div>
	</div>
	<div class="datepick-one-month datepick-new-row">
		<div class="datepick-header">
			<select class="datepick-new-month">...</select>
			<select class="datepick-new-year">...</select>
		</div>
		<table cellspacing="0" cellpadding="0" class="datepick">
			<thead>
				<tr class="datepick-title-row">
					<th>Wk</th>
					<th class="datepick-week-end-cell"><span title="Sunday">Su</span></th>
					<th><span title="Monday">Mo</span></th>...
				</tr>
			</thead>
			<tbody>
				<tr class="datepick-days-row">
					<td class="datepick-week-col">52</td>
					<td class="datepick-days-cell datepick-week-end-cell
						datepick-other-month datepick-unselectable">30</td>
					<td class="datepick-days-cell datepick-other-month
						datepick-unselectable">31</td>
					<td class="datepick-days-cell"><a>1</a></td>
					<td class="datepick-days-cell datepick-current-day"><a>2</a></td>
					<td class="datepick-days-cell datepick-days-cell-over
						datepick-today"><a>3</a></td>
					...
				</tr>
				...
			</tbody>
		</table>
	</div>
	...
	<div class="datepick-status">Select a date</div>
	<div style="clear: both;"/>
</div>

Whilst the ThemeRoller basic structure is shown here:

<div id="ui-datepicker-div" class="ui-datepicker
		ui-widget ui-widget-content ui-helper-clearfix ui-corner-all">
	<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
		<div class="ui-datepicker-clear"><a>Clear</a></div>
		<div class="ui-datepicker-close"><a>Close</a></div>
	</div>
	<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
		<div class="ui-datepicker-prev"><a><Prev</a></div>
		<div class="ui-datepicker-current"><a>Today</a></div>
		<div class="ui-datepicker-next"><a>Next></a></div>
	</div>
	<div class="ui-datepicker-group">
		<div class="ui-datepicker-header ui-widget-header ui-helper-clearfix ui-corner-all">
			<select class="ui-datepicker-month">...</select>
			<select class="ui-datepicker-year">...</select>
		</div>
		<table cellspacing="0" cellpadding="0" class="ui-datepicker-calendar">
			<thead>
				<tr>
					<th>Wk</th>
					<th class="ui-datepicker-week-end"><span title="Sunday">Su</span></th>
					<th><span title="Monday">Mo</span></th>...
				</tr>
			</thead>
			<tbody>
				<tr>
					<td class="ui-datepicker-week-col">52</td>
					<td class="ui-datepicker-week-end ui-datepicker-other-month
						ui-datepicker-unselectable ui-state-disabled">30</td>
					<td class="ui-datepicker-other-month
						ui-datepicker-unselectable ui-state-disabled">31</td>
					<td class="ui-state-default"><a>1</a></td>
					<td class="ui-state-default ui-state-active"><a>2</a></td>
					<td class="ui-state-default ui-state-highlight"><a>3</a></td>
					...
				</tr>
				...
			</tbody>
		</table>
	</div>
	...
	<div class="ui-datepicker-row-break"/>
	<div style="clear: both;"/>
	<div class="ui-datepicker-status">Select a date</div>
	<div style="clear: both;"/>
</div>

In the Wild

This tab highlights examples of this plugin in use "in the wild".

WestJet Vacations

WestJet Vacations is your first destination for planning your vacation experience. WestJet Vacations has a variety of distinctive destinations and deals to choose from. The datepicker is used in the selection of departing and returning dates.

Welcome Travel

Website of a travel agent from Bulgaria. The plugin is used for enriching the search forms throughout the website and for date picking in the administration area. The calendar's display was customized using addon .css file. Also it was localised using the file provided. Some settings were modified to fit the current needs through an addon .js file.

Apartmani Lozo, Brela

Home page of Apartments Lozo in Brela, Croatia. Here you can find accommodation in the beautiful town of Brela, Croatia. The datepicker is used on the reservations part of the site, so users can easily pick departure and arrival dates. It uses CSS for additional styling, and makes use of the localizations for other languages (there is even Croatian!).

To add another example, please contact me (kbwood{at}iinet.com.au) and provide the plugin name, the URL of your site, its title, and a short description of its purpose and where/how the plugin is used.

Quick Reference

A full list of all possible settings is shown below. Note that not all would apply in all cases. For more detail see the documentation reference page.

$(selector).datepick({
	// Regional
	clearText: 'Clear', // Display text for clear link
	clearStatus: 'Erase the current date', // Status text for clear link
	closeText: 'Close', // Display text for close link
	closeStatus: 'Close without change', // Status text for close link
	prevText: '<Prev', // Display text for previous month link
	prevStatus: 'Show the previous month', // Status text for previous month link
	prevBigText: '<<', // Display text for previous year link
	prevBigStatus: 'Show the previous year', // Status text for previous year link
	nextText: 'Next>', // Display text for next month link
	nextStatus: 'Show the next month', // Status text for next month link
	nextBigText: '>>', // Display text for next year link
	nextBigStatus: 'Show the next year', // Status text for next year link
	currentText: 'Today', // Display text for current month link
	currentStatus: 'Show the current month', // Status text for current month link
	// Names of months for drop-down and formatting
	monthNames: ['January','February','March','April','May','June',
		'July','August','September','October','November','December'],
	monthNamesShort: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
		'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], // For formatting
	monthStatus: 'Show a different month', // Status text for selecting a month
	yearStatus: 'Show a different year', // Status text for selecting a year
	weekHeader: 'Wk', // Header for the week of the year column
	weekStatus: 'Week of the year', // Status text for the week of the year column
	dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday',
		'Thursday', 'Friday', 'Saturday'], // For formatting
	dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'], // For formatting
	// Column headings for days starting at Sunday
	dayNamesMin: ['Su','Mo','Tu','We','Th','Fr','Sa'],
	// Status text for the day of the week selection
	dayStatus: 'Set DD as first week day',
	dateStatus: 'Select DD, M d', // Status text for the date selection
	dateFormat: 'mm/dd/yy', // See format options on parseDate
	firstDay: 0, // The first day of the week, Sun = 0, Mon = 1, ...
	initStatus: 'Select a date', // Initial Status text on opening
	isRTL: false, // True if right-to-left language, false if left-to-right
	showMonthAfterYear: false, // True if the year select precedes month,
		// false for month then year
	yearSuffix: '', // Additional text to append to the year in the month headers

	// Non-regional
	useThemeRoller: false, // True to apply ThemeRoller styling,
		// false for default styling
	showOn: 'focus', // 'focus' for popup on focus,
		// 'button' for trigger button, or 'both' for either
	showAnim: 'show', // Name of jQuery animation for popup
	showOptions: {}, // Options for enhanced animations
	duration: 'normal', // Duration of display/closure
	buttonText: '...', // Text for trigger button
	buttonImage: '', // URL for trigger button image
	buttonImageOnly: false, // True if the image appears alone,
		// false if it appears on a button
	alignment: 'bottom', // Alignment of popup - with nominated corner of input:
		// 'top' or 'bottom' aligns depending on language direction,
		// 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'
	defaultDate: null, // Used when field is blank: actual date,
		// +/-number for offset from today, null for today
	appendText: '', // Display text following the input box, e.g. showing the format
	closeAtTop: true, // True to have the clear/close at the top,
		// false to have them at the bottom
	mandatory: false, // True to hide the Clear link, false to include it
	hideIfNoPrevNext: false, // True to hide next/previous month links
		// if not applicable, false to just disable them
	navigationAsDateFormat: false, // True if date formatting
		// applied to prev/today/next links
	showBigPrevNext: false, // True to show big prev/next links
	stepMonths: 1, // Number of months to step back/forward
	stepBigMonths: 12, // Number of months to step back/forward for the big links
	gotoCurrent: false, // True if today link goes back to current selection instead
	changeMonth: true, // True if month can be selected directly, false if only prev/next
	changeYear: true, // True if year can be selected directly, false if only prev/next
	yearRange: '-10:+10', // Range of years to display in drop-down,
		// either relative to current year (-nn:+nn) or absolute (nnnn:nnnn)
	changeFirstDay: false, // True to click on day name to change, false to remain as set
	showOtherMonths: false, // True to show dates in other months, false to leave blank
	selectOtherMonths: false, // True to allow selection of dates in other months,
		// false for unselectable
	highlightWeek: false, // True to highlight the selected week
	showWeeks: false, // True to show week of the year, false to omit
	calculateWeek: this.iso8601Week, // How to calculate the week of the year,
		// takes a Date and returns the number of the week for it
	shortYearCutoff: '+10', // Short year values < this are in the current century,
		// > this are in the previous century,
		// string value starting with '+' for current year + value
	showStatus: false, // True to show status bar at bottom, false to not show it
	statusForDate: this.dateStatus, // Function to provide status text for a date -
		// takes date and instance as parameters, returns display text
	minDate: null, // The earliest selectable date, or null for no limit
	maxDate: null, // The latest selectable date, or null for no limit
	numberOfMonths: 1, // Number of months to show at a time
	showCurrentAtPos: 0, // The position in multiple months at which
		// to show the current month (starting at 0)
	rangeSelect: false, // Allows for selecting a date range on one date picker
	rangeSeparator: ' - ', // Text between two dates in a range
	beforeShow: null, // Function that takes an input field and
		// returns a set of custom settings for the date picker
	beforeShowDay: null, // Function that takes a date and returns an array with
		// [0] = true if selectable, false if not, [1] = custom CSS class name(s) or '',
		// [2] = cell title (optional), e.g. $.datepick.noWeekends
	onChangeMonthYear: null, // Define a callback function when the month or year is changed
	onHover: null, // Define a callback function when hovering over a day
	onSelect: null, // Define a callback function when a date is selected
	onClose: null, // Define a callback function when the datepicker is closed
	altField: '', // Selector for an alternate field to store selected dates into
	altFormat: '', // The date format to use for the alternate field
	constrainInput: true // The input is constrained by the current date format
});

$.datepick.setDefaults(settings) // Set defaults for all instances

$(selector).datepick('option', settings) // Change settings
$(selector).datepick('option', name, value) // Change single setting
$(selector).datepick('option', name) // Retrieve setting(s)

$(selector).datepick('dialog', date, onSelect, settings, pos) // Popup dialog

$(selector).datepick('destroy') // Remove the datepicker functionality

$(selector).datepick('enable') // Enable datepicker
$(selector).datepick('disable') // Disable datepicker
$(selector).datepick('isDisabled') // Is datepicker disabled?

$(selector).datepick('show') // Display the datepicker
$(selector).datepick('hide') // Hide the datepicker
$(selector).datepick('refresh') // Redraw the datepicker

$(selector).datepick('setDate', date, endDate) // Change datepicker date(s)
$(selector).datepick('getDate') // Retrieve datepicker date(s)

$.datepick.dateStatus(date, inst) // Retrieve status message for a date
$.datepick.iso8601Week(date) // Retrieve ISO 8601 week number
$.datepick.noWeekends(date) // Don't allow selection of weekends

$.datepick.formatDate(format, date, settings) // Convert a Date to a string
$.datepick.parseDate(format, value, settings) // Convert a string to a Date

Usage

Localisations

Localisation packages are available for download and should be loaded after the main datepicker code. These packages automatically apply their settings as global default values.

Version	Date	Changes
3.7.4	12 Dec 2009	Corrected rendering of inline datepicker when picking a single date Corrected disabling of inline datepicker Corrected keyboard interactions with inline datepicker Added Bosnian localisation
3.7.3	05 Dec 2009	Disable opening animation with `showAnim` setting instead of `duration` Added `yearRange` relative to today's year and allowed combinations of formats Corrected handling of `showCurrentAtPos` setting Corrected handling of non-alphanumerics in IDs Added Afrikaans localisation Corrected Serbian localisations
3.7.2	03 Oct 2009	Use default date for initial display of inline datepickers Omit dates from `setDate` command to clear dates Added English/UK localisation
3.7.1	08 Aug 2009	Values for `setDate` can be relative to the current date value Added `autoSize` setting Corrected year drop-down generation around 1970 Handle '$' in control IDs
3.7.0	11 Jul 2009	Added option of jQuery UI ThemeRoller compatibility Changed inline configuration to work from metadata in `class` attribute Added support for datepicker attached to `textarea` Added `alignment` setting for more control over popup position Added week of the year format (w) Initial value for a dialog call may be a `Date` Values for `defaultDate`, `minDate`, and `maxDate` can be a date string in the current format Corrected disabling of Next link in multi-row datepickers Corrected `onChangeMonthYear` when moving by day/week Added Basque, French/Swiss, and Vietnamese localisations
3.6.1	30 May 2009	Corrected error in `onChangeMonthYear` when using the drop-downs Corrected error in display of month/year drop-downs when selecting a range Corrected error in minimised and packed versions
3.6.0	02 May 2009	Added `multiSelect` and `multiSeparator` settings to select multiple unrelated dates Added `showDefault` setting Manual entry updates calendar and alternate field Validation now validates the individual field rather than the whole form Allowed override of validation messages Added Azerbaijani and Estonian localisations
3.5.2	04 Apr 2009	Setting of dates now respects any minimum/maximum settings and updating minimum/maximum settings restricts selected date Corrected cross-talk when enabling/disabling/destroying sibling datepickers 'option' command now retrieves instance settings when given a name but no value Added Windows ticks format: '!' Corrected parsing of short years and a `shortYearCutoff` of -1 disables adjusting years less than 100 Updated validation for date ranges to check start is not after end Callbacks `onHover`, `onChangeMonthYear`, `onSelect`, and `onClose` now return date(s) as a string and Date object(s) Moved `showMonthAfterYear` to localisation settings Added `yearSuffix` to localisation settings Added Serbian (Cyrillic and Latin) localisations
3.5.1	24 Jan 2009	Added validation plugin support Corrected external click check Corrected display error in IE6 Corrected positioning in IE Added Greek localisation
3.5.0	10 Jan 2009	Separated from jQuery UI as that version desired simplified functionality `changeFirstDay` now defaults to false Added `selectOtherMonths` to allow selection of days from other months Added `onHover` event Added Malaysian localisation Added several alternate stylesheets