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

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:

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:

 

  

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.

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.

Or you can use one of the predefined formats:

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({onSelect: customRange,
	showOn: 'both', buttonImageOnly: true, buttonImage: 'img/calendar.gif'});
	
function customRange(dateStr, date) {
	if (this.id == 'startDatepicker') {
		$('#endDatepicker').datepick('option', 'minDate', date);
	}
	else {
		$('#startDatepicker').datepick('option', 'maxDate', date);
	}
}

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: 

$('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.

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

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

  1. Include the jQuery library in the head section of your page. 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  2. Download and include the jQuery Datepicker CSS and JavaScript in the head section of your page. 
    <style type="text/css">@import "jquery.datepick.css";</style>
<script type="text/javascript" src="jquery.datepick.js"></script>
    Alternately, you can use the packed version jquery.datepick.pack.js (32.4K vs 95.6K), or the minified version jquery.datepick.min.js (44.4K, 12.6K when zipped).
  3. Connect the datepicker functionality to your input fields or divisions. 
    $(selector).datepick();
    You can include custom settings as part of this process. 
    $(selector).datepick({dateFormat: 'dd/mm/yy'});

For more detail see the documentation reference page. Or see a minimal page that you could use as a basis for your own investigations.

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.

Other translations are welcomed.

Comments

Just wanted to thank you for the fantastic Datepicker plug-in.

Josh Berman

I came across your date picker online. I have to say it is way nicer than anything else I've seen online.

Efrain Carballo

Your datepicker tool has worked flawlessly in my application.

Mike Longo

I wanted to thank you for this great plug in, it's full of features, very easy to use.

Ishai Hachlili

I just wanted to let you know that your datepicker is by far the best one out there I've found to date.

Marshall Stevenson

I looked around and I have to say this is the most feature rich and slick date picker on the web. Very impressive software.

Peter Schmandra

Contact Keith Wood at kbwood{at}iinet.com.au with comments or suggestions.

Change History

VersionDateChanges
3.7.520 Feb 2010
  • Corrected conflict when calling getDate from a beforeShowDay function
  • Corrected browser width/height calculation
  • Corrected cut and paste handling on Mac
3.7.412 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.305 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.203 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.108 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.011 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.130 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.002 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.204 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.124 Jan 2009
  • Added validation plugin support
  • Corrected external click check
  • Corrected display error in IE6
  • Corrected positioning in IE
  • Added Greek localisation
3.5.010 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