Popup

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.

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, or combine date and time entry with the jQuery Date/Time Entry plugin.

The current version is 5.1.0 and is available under the MIT licence. 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.

Introduction

A datepicker can easily be added as a popup to a text field or inline in a division or span with appropriate default settings. The popup shows when the field gains focus and is closed by clicking on the Close link or clicking anywhere else on the page. You can also remove the datepicker widget if it is no longer required.

 

Popup datepicker (input):  

Inline datepicker (div/span):  

$('#defaultPopup,#defaultInline').datepick();

$('.disablePicker').click(function() {
	var enable = $(this).text() === 'Enable';
	$(this).text(enable ? 'Disable' : 'Enable').
		siblings('.is-datepick').datepick(enable ? 'enable' : 'disable');
});

$('#removePicker').click(function() {
	var destroy = $(this).text() === 'Remove';
	$(this).text(destroy ? 'Re-attach' : 'Remove');
	$('#defaultPopup,#defaultInline').datepick(destroy ? 'destroy' : {});
});

The default settings are:

You can set defaults that apply to all datepicker instances as shown below:

$.datepick.setDefaults({pickerClass: 'my-picker'});

Processed fields are marked with a class of is-datepick and are not re-processed if targeted a second time.


A note on Date - the JavaScript Date constructor expects the year, month, and day as parameters. However, the month ranges from 0 to 11. To make explicit what date is intended (does a month of 3 mean March or April?) I specify the month from 1 to 12 and manually subtract the 1. Thus the following denotes 25 December, 2014.

$(selector).datepick({minDate: new Date(2014, 12-1, 25)});
Invocation

By default a popup datepicker appears when its input field gains focus. You can configure an external trigger in addition to or instead of the default. Clicking on the trigger toggles the popup open and closed.

Focus and button:  

$('#bothPicker').datepick({
	showTrigger: '<button type="button" class="trigger">...</button>'});

From a button only:  

$('#buttonPicker').datepick({showOnFocus: false,
	showTrigger: '<button type="button" class="trigger">' +
	'<img src="img/calendar.gif" alt="Popup"></button>'});

From an image only:  

$('#imagePicker').datepick({showOnFocus: false, showTrigger: '#calImg'});
<div style="display: none;">
	<img id="calImg" src="img/calendar.gif" alt="Popup" class="trigger">
</div>

Embedded image trigger:  

$('#embeddedPicker').datepick({showOnFocus: false, showTrigger: '#calImg'});
.embed + img { position: relative; left: -24px; top: 0px; }

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. Use '' for no animation.

Show :

$('#animDatepicker').datepick({showTrigger: '#calImg'});

var anims = ['show', 'fadeIn', 'slideDown', 'blind', 'blind', 'bounce', 'clip',
	'clip', 'drop', 'drop', 'fold', 'fold', 'slide', 'slide', ''];
var animOpts = [null, null, null, {}, {direction: 'horizontal'}, {}, {},
	{direction: 'horizontal'}, {}, {direction: 'up'}, {},
	{horizFirst: true}, {}, {direction: 'up'}, {}];

$('#speed,#animation').change(function() {
	var index = parseInt($('#animation').val(), 10);
	$('#animDatepicker').datepick('option', {showAnim: anims[index],
		showOptions: animOpts[index], showSpeed: $('#speed').val()});
});
Keyboard Equivalents

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

In addition, if you include the MouseWheel plugin in your page, you can use the mouse wheel to move through the months or years (with the Ctrl key).

Keyboard equivalents:

$('#keyboardPicker').datepick({showTrigger: '#calImg'});
Date Formats

You can specify the format in which the date is to appear. Use a combination of the field formats below, which may vary depending on the localisation used ('mm/dd/yyyy' by default). 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:

 

$('#formatPicker').datepick({showTrigger: '#calImg'});
	
var formats = ['mm/dd/yyyy', 'M d, yyyy', 'MM d, yyyy',
	'DD, MM d, yyyy', 'mm/dd/yy', 'dd/mm/yyyy',
	'mm/dd/yyyy (\'w\'w)', '\'Day\' d \'of\' MM, yyyy',
	$.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() {
	$('#formatPicker').val('').datepick('option',
		{dateFormat: formats[$(this).val()]});
});
Getting and Setting Dates

You can retrieve or supply the date(s) for the datepicker by using the 'getDate' or 'setDate' commands. The dates are returned as an array (possibly empty) of Date objects. When setting the dates you can provide one value, two values (for a range), or mutliple values in an array. Each value may be a Date, the date as a string in the current date format, a number of days relative to today (+5), or a string to specify one or more units and periods relative to today ('+1m -1d'). For the last, use 'd' for days, 'w' for weeks, 'm' for months, or 'y' for years.

Popup single:

$('#getSetSinglePicker').datepick({showTrigger: '#calImg'});

Popup range:

$('#getSetRangePicker').datepick({rangeSelect: true, showTrigger: '#calImg'});

Popup multiple:

$('#getSetMultiPicker').datepick({multiSelect: 4, showTrigger: '#calImg'});

Inline multiple:

$('#getSetInlinePicker').datepick({multiSelect: 4, showTrigger: '#calImg'});

Get/set dates:

 

$('#getDates').click(function() {
	var dates = $('#' + $('#getSetSelect').val()).datepick('getDate');
	var value = '';
	for (var i = 0; i < dates.length; i++) {
		value += (i == 0 ? '' : ',') + $.datepick.formatDate(dates[i]);
	}
	$('#getSetValue').val(value || 'none');
});

$('#setDates').click(function() {
	var dates = $('#getSetValue').val().split(',');
	$('#' + $('#getSetSelect').val()).datepick('setDate', dates);
});
Default Date

You can set the default date to display when no other is set in the datepicker. In addition, you can set this date to be automatically selected.

Without any modification, the default date is today. The default date can be set as an absolute date as either a Date or a string (in the current date format). Or it may be set as a relative value by using a simple number to offset from today's date a given number of days (+5), or a string to specify one or more units and periods ('+1m -1d'). Use 'd' for days, 'w' for weeks, 'm' for months, or 'y' for years.

Actual date - January 1, 2014:

$('#defaultActualPicker').datepick({
	defaultDate: new Date(2014, 1 - 1, 1), showTrigger: '#calImg'});

Date string - January 1, 2014:

$('#defaultDatePicker').datepick({
	defaultDate: '01/01/2014', showTrigger: '#calImg'});

Seven days ahead:

$('#defaultNumPicker').datepick({
	defaultDate: +7, showTrigger: '#calImg'});

Two weeks ahead:

$('#defaultStr1Picker').datepick({
	defaultDate: '+2w', showTrigger: '#calImg'});

One month and ten days ahead:

$('#defaultStr2Picker').datepick({
	defaultDate: '+1m +10d', showTrigger: '#calImg'});

Select default date:

$('#selectDefaultPicker').datepick({
	defaultDate: '-1w', selectDefaultDate: true, showTrigger: '#calImg'});
Minimum and Maximum Dates

You can set minimum and/or maximum dates within which a date may be chosen. These dates can be set as an absolute date as either a Date or a string (in the current date format). Or they may be set as relative values by using a simple number to offset from today's date a given number of days, or 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, 2012 to Jan 1, 2014:

$('#minmaxPicker').datepick({
	minDate: new Date(2012, 1 - 1, 26),
	maxDate: new Date(2014, 1 - 1, 26), showTrigger: '#calImg'});

As date strings:

$('#minmax2Picker').datepick({
	minDate: '01/26/2012', maxDate: '01/26/2014', showTrigger: '#calImg'});

Seven days ago to 30 days ahead:

$('#minmaxNumPicker').datepick({
	minDate: -7, maxDate: +30, showTrigger: '#calImg'});

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

$('#minmaxStrPicker').datepick({
	minDate: '-2w', maxDate: '+1m +2w +3d', showTrigger: '#calImg'});
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 changing their description, or by replacing the cell content. The onDate function is called for each day shown and returns an object with (optionally) a selectable flag (selectable), any CSS styles (dateClass), a description (title), and /or new content (content).

Weekends not selectable: See the Extensions tab.

National days (CSS):

$('#nationalPicker').datepick({
	onDate: nationalDays, showTrigger: '#calImg'});

var natDays = [[1, 26, 'au', 'Australia'], [2, 6, 'nz', 'New Zealand'],
	[3, 17, 'ie', 'Ireland'], [4, 27, 'za', 'South Africa'],
	[5, 25, 'ar', 'Argentina'], [6, 6, 'se', 'Sweden'],
	[7, 4, 'us', 'United States'], [8, 17, 'id', 'Indonesia'],
	[9, 7, 'br', 'Brazil'], [10, 1, 'cn', 'China'],
	[11, 22, 'lb', 'Lebanon'], [12, 12, 'ke', 'Kenya']];

function nationalDays(date, inMonth) {
	if (inMonth) {
    	for (i = 0; i < natDays.length; i++) {
        	if (date.getMonth() + 1 == natDays[i][0] &&
					date.getDate() == natDays[i][1]) {
            	return {dateClass: natDays[i][2] + '_day',
					selectable: false, title: natDays[i][3]};
        	}
    	}
	}
    return {};
}
.ar_day { text-indent: -9999px; background: #eee url(ar.gif) no-repeat center; }
.au_day { text-indent: -9999px; background: #eee url(au.gif) no-repeat center; }
...

Highlight today (tooltip): Hover over today.

$('#tooltipTodayPicker').datepick({
	onDate: tooltipToday, showTrigger: '#calImg'});

function tooltipToday(date) {
    return {title: (date.getTime() == $.datepick.today().getTime() ?
		'Select today' : $.datepick.formatDate('Select DD, M d, yyyy', date))};
}

Day of year in content:

$('#dayOfYearPicker').datepick({
	onDate: showDayOfYear, showTrigger: '#calImg'});

function showDayOfYear(date) {
	return {content: date.getDate() + '<br><sub>' +
		$.datepick.dayOfYear(date) + '</sub>', dateClass: 'showDoY'};
}
.showDoY { height: 2em; line-height: 0.75em; }
Date Ranges

The datepicker can be configured to allow the selection of a date range within the one picker. The first click selects the start of the range and the second selects the end.

Date range:

$('#rangePicker').datepick({
	rangeSelect: true, showTrigger: '#calImg'});

Date range showing two months:

$('#range2Picker').datepick({
	rangeSelect: true, monthsToShow: 2, showTrigger: '#calImg'});

Inline range showing six months:

$('#rangeInlinePicker').datepick({
	rangeSelect: true, monthsToShow: [2, 3]});

Date range with minimum/maximum:

$('#rangeMinMaxPicker').datepick({rangeSelect: true,
	minDate: -7, maxDate: '+1y', showTrigger: '#calImg'});

Date range with no weekends:

$('#rangeNoWeekendPicker').datepick({rangeSelect: true,
	onDate: $.datepick.noWeekends, showTrigger: '#calImg'});

Date range with separate fields: to

$('#startPicker,#endPicker').datepick({
	onSelect: customRange, showTrigger: '#calImg'});
	
function customRange(dates) {
    if (this.id == 'startPicker') {
		$('#endPicker').datepick('option', 'minDate', dates[0] || null);
	}
	else {
		$('#startPicker').datepick('option', 'maxDate', dates[0] || null);
	}
}
Multiple Dates

The datepicker can be configured to allow the selection of multiple individual dates. Clicking on an already selected date de-selects it. The datepicker automatically closes when the maximum number of allowed dates has been chosen.

Two separate dates:

$('#multi2Picker').datepick({
	multiSelect: 2, showTrigger: '#calImg'});

Four separate dates:

$('#multi4Picker').datepick({
	multiSelect: 4, multiSeparator: '+',
	showTrigger: '#calImg'});

"Unlimited" dates:

$('#multi999Picker').datepick({
	multiSelect: 999, monthsToShow: 2,
	showTrigger: '#calImg'});

Three dates inline:

$('#multiInlinePicker').datepick({
	multiSelect: 3, monthsToShow: 3, monthsToStep: 3,
	prevText: 'Prev months', nextText: 'Next months'});
Controls and Navigation

Modify the controls and month/year navigation, as shown below. Control inclusion and/or placement are defined in the renderer for the datepicker. Thereafter, several settings affect their appearance.

You can override parts of the default renderer by creating a new empty renderer and extending it with the default values and then the overridden ones.

Controls as buttons:

$('#controlsPicker').datepick({
	renderer: $.extend({}, $.datepick.defaultRenderer,
		{picker: $.datepick.defaultRenderer.picker.
			replace(/\{link:clear\}/, '{button:clear}').
			replace(/\{link:close\}/, '{button:close}')}),
	showTrigger: '#calImg'});

Show icons for controls:

$('#iconsPicker').datepick({prevText: '<img src="img/prev.gif">',
	todayText: '<img src="img/current.gif">',
	nextText: '<img src="img/next.gif">',
	clearText: '<img src="img/clear.gif">',
	closeText: '<img src="img/close.gif">',
	showTrigger: '#calImg'});

Mandatory date - remove Clear:

$('#mandatoryPicker').datepick({
	renderer: $.extend({}, $.datepick.defaultRenderer,
		{picker: $.datepick.defaultRenderer.picker.
			replace(/\{link:clear\}/, '')}),
	showTrigger: '#calImg'});

Alternate mandatory date (CSS):

$('#mandatory2Picker').datepick({
	pickerClass: 'mandatory', showTrigger: '#calImg'});
.mandatory .datepick-cmd-clear { display: none; }

Hide Prev/Next if not available:

$('#noPrevNextPicker').datepick({
	pickerClass: 'noPrevNext', minDate: -20, maxDate: +20,
	showTrigger: '#calImg'});
.noPrevNext .datepick-cmd.datepick-disabled { visibility: hidden; }

Prev/Next as months:

$('#prevNextFormatPicker').datepick({
	prevText: '< M', todayText: 'M yyyy', nextText: 'M >',
	commandsAsDateFormat: true, showTrigger: '#calImg'});

Show yearly Prev/Next controls:

$('#yearPrevNextPicker').datepick({pickerClass: 'datepick-jumps',
	renderer: $.extend({}, $.datepick.defaultRenderer,
		{picker: $.datepick.defaultRenderer.picker.
			replace(/\{link:prev\}/, '{link:prevJump}{link:prev}').
			replace(/\{link:next\}/, '{link:nextJump}{link:next}')}),
	showTrigger: '#calImg'});
.datepick-jumps .datepick-cmd-prev, .datepick-jumps .datepick-cmd-next { width: 20%; }

Show large Prev/Next moving six months:

$('#month6PrevNextPicker').datepick({
	monthsToJump: 6, pickerClass: 'datepick-jumps',
	prevJumpStatus: 'Back 6 months', nextJumpStatus: 'Ahead 6 months',
	renderer: $.extend({}, $.datepick.defaultRenderer,
		{picker: $.datepick.defaultRenderer.picker.
			replace(/\{link:prev\}/, '{link:prevJump}{link:prev}').
			replace(/\{link:next\}/, '{link:nextJump}{link:next}')}),
	showTrigger: '#calImg'});

Replace 'Today' with 'Current':

$('#currentPicker').datepick({
	renderer: $.extend({}, $.datepick.defaultRenderer,
		{picker: $.datepick.defaultRenderer.picker.
			replace(/\{link:today\}/, '{link:current}')}),
	showTrigger: '#calImg'});
Commands

Controls appearing on the datepicker are defined as commands - encapsulating the displayed text, a triggering keystroke, whether or not it is enabled, a representative date, and the actual action itself. They are positioned in the renderer as substitution points of the form '{link:name}' or '{button:name}', depending on whether they are to show as links or buttons.

You can override parts of the default commands by creating a new empty command object and extending it with the default values ($.datepick.commands) and then the overridden settings.

Change keystrokes (Alt+Page Up/Down):

var altCommands = $.extend(true, {}, $.datepick.commands);
altCommands.prevJump.keystroke = {keyCode: 33, altKey: true};
altCommands.nextJump.keystroke = {keyCode: 34, altKey: true};

$('#keystrokePicker').datepick({
	commands: altCommands, showTrigger: '#calImg'});

You can also define an entirely new command and add it to the datepicker.

New command - 'Millenium':

var newCommands = $.extend({}, $.datepick.commands);
newCommands.millenium = {
	text: 'milleniumText', status: 'milleniumStatus',
	keystroke: {keyCode: 112, shiftKey: true}, // Shift+F1
	enabled: function(inst) { return true; },
	date: function(inst) {
		return inst.drawDate.newDate(2001, 1, 1); },
	action: function(inst) {
		$.datepick.showMonth(this, 2001, 1, 1); }
};

$('#commandPicker').datepick({commands: newCommands,
	renderer: $.extend({}, $.datepick.defaultRenderer,
		{picker: $.datepick.defaultRenderer.picker.
			replace(/\{link:today\}/, '{link:millenium}')}),
	milleniumText: 'Millenium', milleniumStatus: 'Start of the millenium',
	showTrigger: '#calImg'});
Month and Year Selection

Determine whether or not the month and year may be directly selected. Specify which years appear in the drop-down - by default it shows 10 years before and after the currently selected date.

Note that the yearRange setting only applies to the year drop-down. It does not restrict date selection directly. You must still provide minDate and/or maxDate settings if restrictions apply.

No month/year selection:

$('#monthYearDatepicker').datepick({
	changeMonth: false, showTrigger: '#calImg'});

Show -5 to +5 years:

$('#yearsRelPicker').datepick({
	yearRange: 'c-5:c+5', showTrigger: '#calImg'});

Show years 1980 to 2010:

$('#yearsAbsPicker').datepick({
	minDate: new Date(1980, 1-1, 1), maxDate: new Date(2010, 12-1, 31),
	yearRange: '1980:2010', showTrigger: '#calImg'});

Show 1980 to 18 years ago:

$('#yearsMixedPicker').datepick({
	minDate: new Date(1980, 1-1, 1), maxDate: '-18y',
	yearRange: '1980:-18', showTrigger: '#calImg'});

Descending order:

$('#yearsDescPicker').datepick({
	minDate: new Date(1990, 1-1, 1), maxDate: new Date(2010, 12-1, 31),
	yearRange: '2010:1990', showTrigger: '#calImg'});

Show unlimited years:

$('#yearsAnyPicker').datepick({
	yearRange: 'any', showTrigger: '#calImg'});
Month display

Modify the display of each month, as shown below.

Show days from other months:

$('#otherMonthsPicker').datepick({
	showOtherMonths: true, showTrigger: '#calImg'});

Select days from other months:

$('#selectOtherPicker').datepick({
	showOtherMonths: true, selectOtherMonths: true,
	showTrigger: '#calImg'});

Show three months:

$('#months3Picker').datepick({
	monthsToShow: 3, monthsToStep: 3, showTrigger: '#calImg'});

Show three months with current in the middle:

$('#months3MiddlePicker').datepick({
	monthsToShow: 3, monthsToStep: 3, monthsOffset: 1,
	showTrigger: '#calImg'});

Show three months ending at current one:

$('#months3LastPicker').datepick({
	monthsToShow: 3, monthsToStep: 3, monthsOffset: 2,
	showTrigger: '#calImg'});

Show three months starting on the quarter:

$('#monthsQuarterPicker').datepick({
	monthsToShow: 3, monthsToStep: 3, monthsOffset: function(date) {
		return date.getMonth() % 3;
	}, showTrigger: '#calImg'});
Miscellaneous

Various other behaviours are available, as shown below.

Auto size for :

$('#sizePicker').datepick({
	autoSize: true, showTrigger: '#calImg'});
	
$('#selectSize').change(function() {
	$('#sizePicker').datepick('option', {dateFormat: $(this).val()});
});

Alignment :

$('#alignmentPicker').datepick({showTrigger: '#calImg'});
	
$('#selectAlignment').change(function() {
	$('#alignmentPicker').datepick('option', {alignment: $(this).val()});
});

Alternate field and format:

$("#altPicker").datepick({dateFormat: 'D d MM, yyyy',
	altField: '#altOutput', altFormat: 'yyyy-mm-dd',
	showTrigger: '#calImg'});

No mousewheel navigation:

$('#noWheelPicker').datepick({
	useMouseWheel: false, showTrigger: '#calImg'});

Textarea with multiple dates:

$('#textPicker').datepick({
	multiSelect: 999, multiSeparator: ', ',
	showTrigger: '#calImg'});

Linked to drop-downs:

function updateSelected(dates) {
    $('#selectedMonth').val(dates.length ? dates[0].getMonth() + 1 : '');
    $('#selectedDay').val(dates.length ? dates[0].getDate() : '');
    $('#selectedYear').val(dates.length ? dates[0].getFullYear() : '');
	checkLinkedDays();
}

$('#selectedPicker').datepick({
	minDate: '01/01/2011', maxDate: '12/31/2020',
	alignment: 'bottomRight', onSelect: updateSelected,
	showTrigger: '#calImg'});

$('#selectedMonth,#selectedDay,#selectedYear').change(function() {
	$('#selectedPicker').datepick('setDate', new Date(
		$('#selectedYear').val(), $('#selectedMonth').val() - 1,
		$('#selectedDay').val()));
});

Linked to inputs: / /

function updateLinked(dates) {
    $('#linkedMonth').val(dates.length ? dates[0].getMonth() + 1 : '');
    $('#linkedDay').val(dates.length ? dates[0].getDate() : '');
    $('#linkedYear').val(dates.length ? dates[0].getFullYear() : '');
}

$('#linkedPicker').datepick({
	alignment: 'bottomRight', onSelect: updateLinked,
	showTrigger: '#calImg'});

$('#linkedMonth,#linkedDay,#linkedYear').change(function() {
	$('#linkedPicker').datepick('setDate', new Date(
		parseInt($('#linkedYear').val(), 10),
		parseInt($('#linkedMonth').val(), 10) - 1,
		parseInt($('#linkedDay').val(), 10)));
});
Events

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

Select:

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

On change month/year:

$('#onChangePicker').datepick({
	onChangeMonthYear: function(year, month) {
		alert('Moving to month ' + month + '/' + year); },
	showTrigger: '#calImg'});

On hover: See the Extensions tab.

On selection:

$('#onSelectPicker').datepick({
	onSelect: function(dates) { alert('The chosen date(s): ' + dates); },
	showTrigger: '#calImg'});

On close:

$('#onClosePicker').datepick({
	onClose: function(dates) { alert('Closed with date(s): ' + dates); },
	showTrigger: '#calImg'});
Datepicker Extensions

The jquery.datepick.ext.js module provides additional functionality to extend the datepicker. These include onShow callbacks that enhance the datepicker. If you need multiple onShow functions, use the $.datepick.multipleEvents function and pass the relevant handlers to it.

Weekends not selectable:

$('#noWeekendsPicker').datepick({
	onDate: $.datepick.noWeekends, showTrigger: '#calImg'});

Change first day of the week: Click on a day header.

$('#firstDayPicker').datepick({
	onShow: $.datepick.changeFirstDay, showTrigger: '#calImg'});

Highlight the hovered week:

$('#highlightWeekPicker').datepick({
	onShow: $.datepick.highlightWeek, showTrigger: '#calImg'});

Respond to date hovering: You're looking at nothing.

$('#hoverPicker').datepick({
	onShow: $.datepick.hoverCallback(showHover),
	showTrigger: '#calImg'});
	
function showHover(date, selectable) {
	$('#hoverOutput').text(
		(selectable ? $.datepick.formatDate(date) : null) || 'nothing');
}

Show status bar:

$('#statusPicker').datepick({
	onShow: $.datepick.showStatus, showTrigger: '#calImg'});

Show week of the year (ISO8601 default):

$('#showWeekPicker').datepick({
	renderer: $.datepick.weekOfYearRenderer,
	firstDay: 1, showOtherMonths: true,
	showTrigger: '#calImg'});

Show week of the year (custom):

$('#customWeekPicker').datepick({
	renderer: $.datepick.weekOfYearRenderer,
	calculateWeek: customWeek, firstDay: 1,
	showOtherMonths: true, showTrigger: '#calImg'});

function customWeek(date) {
	return Math.floor(($.datepick.dayOfYear(date) - 1) / 7) + 1;
}

Month/year navigation:

$('#monthNavPicker').datepick({changeMonth: false,
	minDate: new Date(2001, 7 - 1, 1), maxDate: new Date(2012, 3 - 1, 1),
	onShow: $.datepick.monthNavigation, showTrigger: '#calImg'});

Select the entire week: Click on the week number.

$('#selectWeekPicker').datepick({
	renderer: $.datepick.weekOfYearRenderer,
	firstDay: 1, showOtherMonths: true, rangeSelect: true,
	onShow: $.datepick.selectWeek, showTrigger: '#calImg'});

Select a month only:

$('#selectMonthPicker').datepick({
	onShow: $.datepick.monthOnly, showTrigger: '#calImg'});

Combination:

$('#multiShowPicker').datepick({
	renderer: $.datepick.weekOfYearRenderer,
	firstDay: 1, showOtherMonths: true, rangeSelect: true,
	onShow: $.datepick.multipleEvents(
		$.datepick.selectWeek, $.datepick.showStatus),
	showTrigger: '#calImg'});
Inline Configuration

Instead of configuring fields via parameters to the datepicker instantiation, you can specify them inline. You must encode the settings in the data-datepick attribute.

Inline configuration:

<input type="text" id="configPicker" size="10"
	data-datepick="showOtherMonths: true, firstDay: 1, dateFormat: 'yyyy-mm-dd',
		minDate: 'new Date(2012, 12 - 1, 25)'">
$('#configPicker').datepick({showTrigger: '#calImg'});
Localisation

You can localise the datepicker for other languages and regional differences (over 70 now available). The datepicker defaults to US English with a date format of mm/dd/yyyy.

:  

$('#l10nPicker').datepick($.extend({
	showTrigger: '#calImg',
	altField: '#l10nAlternate', altFormat: 'DD, d MM, yyyy'},
	$.datepick.regionalOptions['fr']));
	
$('#l10nLanguage').change(function() {
	var language = $(this).val();
	$.localise('js/jquery.datepick', language);
	$('#l10nPicker').datepick('option', $.datepick.regionalOptions[language]);
	$.datepick.setDefaults($.datepick.regionalOptions['']);
});

Some localisations read right-to-left.

:  

$('#rtlPicker').datepick($.extend({
	showTrigger: '#calImg',
	altField: '#rtlAlternate', altFormat: 'DD, d MM, yyyy'},
	$.datepick.regionalOptions['ar']));
	
$('#rtlLanguage').change(function() {
	var language = $(this).val();
	$.localise('js/jquery.datepick', language);
	$('#rtlPicker').datepick('option', $.datepick.regionalOptions[language]);
	$.datepick.setDefaults($.datepick.regionalOptions['']);
});

You need to load the appropriate language packages for the datepicker. The latter adds a language set ($.datepick.regionalOptions[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.regionalOptions['']);

And then configure the language per datepicker field.

$('#l10nPicker').datepick($.extend(
	{pickerClass: 'my-picker'}, $.datepick.regionalOptions['fr']));
Datepicker Layout and Styling

The datepicker uses a templating mechanism to render its layout. So it is easy to change the structure of the datepicker to suit your needs: from minor changes such as adding or removing controls, to major adjustments that drastically alter its appearance. Combine the layout with appropriate CSS to create your datepicker.

Month to a line:

$('#listRender').datepick({monthsToShow: [6, 1], showOtherMonths: true,
	onSelect: function(date) { alert('You picked ' + date); },
	renderer: {picker: '<div><ul class="days">' +
		'{weekHeader}{weekHeader}{weekHeader}{weekHeader}{weekHeader}{weekHeader}' +
		'</ul><div>{months}</div></div>',
		monthRow: '<div>{months}</div>',
		month: '<div class="month"><div>{monthHeader:M yyyy}</div><ul>{weeks}</ul></div>',
		weekHeader: '{days}',
		dayHeader: '<li>{day}</li>',
		week: '{days}',
		day: '<li>{day}</li>',
		monthSelector: '.month',
		daySelector: 'li',
		rtlClass: 'rtl',
		multiClass: 'multi',
		defaultClass: 'default',
		selectedClass: 'selected',
		highlightedClass: 'highlight',
		todayClass: 'today',
		otherMonthClass: 'other-month',
		weekendClass: 'weekend',
		commandClass: 'cmd-',
		disabledClass: 'disabled'}});
#listRender { font-size: 11px; }
#listRender .month { clear: left; border: none;
	border-right: 1px solid #ccc; text-align: center; }
#listRender .month div { float: left; width: 9.5em;
	padding-right: 0.5em; text-align: right; }
#listRender ul { float: left; margin: 0em; padding: 0em;
	list-style: none; overflow: hidden; }
#listRender ul.days { margin-left: 10em; text-align: center; }
#listRender ul.days span { background-color: #777; color: #fff; }
#listRender li { float: left; width: 1.75em; margin: 0em; border: 1px solid #aaa; }
#listRender li a { display: block; width: 100%; padding: 0.125em;
	background-color: #eee; color: #000; text-decoration: none; }
#listRender li span { display: block; width: 100%; padding: 0.125em;
	background-color: #fff; color: #888; }
#listRender li .weekend { background-color: #ddd; }
#listRender li .highlight { background-color: #f08080; }
#listRender li .selected { background-color: #777; }

You can tweak the styling of a particular datepicker by providing a pickerClass setting that is added to that instance as a CSS class.

Individualise styling:

$('#classPicker').datepick({
	pickerClass: 'myPicker', showTrigger: '#calImg'});
.myPicker .datepick-month-header,
.myPicker .datepick-month-header select { background-color: #f00; }

Or change the appearance of all datepickers with a different stylesheet by including it in your page:

<link rel="stylesheet" type="text/css" href="css/jquery.datepick.css">

Alternate stylesheets:

 

 

$('#stylePopup').datepick({showOtherMonths: true, firstDay: 1,
	renderer: $.extend({}, $.datepick.weekOfYearRenderer,
		{picker: $.datepick.defaultRenderer.picker.
			replace(/\{link:clear\}/, '{button:clear}').
			replace(/\{link:close\}/, '{button:close}')}),
	onShow: $.datepick.showStatus, showTrigger: '#calImg'});
$('#styleInline').datepick({
	monthsToShow: 2, showOtherMonths: true, firstDay: 1,
	renderer: $.datepick.weekOfYearRenderer,
	onShow: $.datepick.showStatus});

$('#styleSelect').change(function() {
	$('#theme').attr('href', 'css/' + $(this).val());
	setTimeout(function() {
		$('.inlinePicker').datepick('option'); }, 0);
});

The jquery.datepick.ext.js module also defines a renderer that produces the standard structure, but using the ThemeRoller classes to help blend your datepicker with other jQuery UI components. Don't forget to load the appropriate ThemeRoller CSS, along with the corresponding local overrides:

<link rel="stylesheet" type="text/css" href="https://code.jquery.com/ui/1.10.3/themes/south-street/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="css/ui-south-street.datepick.css">

ThemeRoller look-and-feel:

 

 

$('#themeRollerPopup').datepick({pickerClass: 'demo',
	renderer: $.datepick.themeRollerRenderer, showTrigger: '#calImg'});
		
$('#themeRollerInline').datepick({
	monthsToShow: [2, 3], showOtherMonths: true,
	renderer: $.datepick.themeRollerRenderer});
	
$('#themeRollerSelect').change(function() {
	$('#themeUI').attr('href', 'themesDemo/' + $(this).val() + '/jquery-ui.css');
	$('#themeTR').attr('href', 'css/ui-' + $(this).val() + '.datepick.css');
});
Validation Integration

Datepicker can be integrated with Jörn Zaefferer's validation plugin by adding the jquery.datepick.validation.js extension to your page. One new validation is defined (dpDate) for basic date checking. It automatically handles date ranges and multiple dates, checks against any minDate and/or maxDate settings, and calls any onDate callback to verify selectability. It may be added as a class to your datepicker fields, or may be defined in the validate settings.

Another new validation (dpCompareDate) lets you compare one date field against another date - either the value of another datepicker field, a specific date, or today.

There is also a custom errorPlacement function defined so that the error messages appear after any trigger button or image (or before them if using a right-to-left localisation).

You can override the validation error messages through the messages setting of the validation plugin, or globally via the datepicker setDefaults function with any or all of the following settings: validateDate, validateDateMin, validateDateMax, validateDateMinMax, validateDateCompare, validateDateToday, validateDateOther, validateDateEQ, validateDateNE, validateDateLT, validateDateGT, validateDateLE, validateDateGE.

$('#validateForm').validate({
	errorPlacement: $.datepick.errorPlacement,
	rules: {
		validFormatPicker: {
			required: true,
			dpDate: true
		},
		validBeforePicker: {
			dpCompareDate: ['before', '#validAfterPicker']
		},
		validAfterPicker: {
			dpCompareDate: {after: '#validBeforePicker'}
		},
		validTodayPicker: {
			dpCompareDate: 'ne today'
		},
		validSpecificPicker: {
			dpCompareDate: 'notBefore 01/01/2012'
		}
	},
	messages: {
		validFormatPicker: 'Please enter a valid date (yyyy-mm-dd)',
		validRangePicker: 'Please enter a valid date range',
		validMultiPicker: 'Please enter at most three valid dates',
		validAfterPicker: 'Please enter a date after the previous value'
	}});

Validate date:

$('#validDefaultPicker').datepick({showTrigger: '#calImg'});

Validate alternate format:

$('#validFormatPicker').datepick({
	dateFormat: 'yyyy-mm-dd', showTrigger: '#calImg'});

Validate right-to-left:

$('#validRTLPicker').datepick({
	isRTL: true, showTrigger: '#calImg'});

Validate date range:

$('#validRangePicker').datepick({
	rangeSelect: true, showTrigger: '#calImg'});

Validate multiple dates:

$('#validMultiPicker').datepick({
	multiSelect: 3, showTrigger: '#calImg'});

Validate minimum:

$('#validMinPicker').datepick({
	minDate: -7, showTrigger: '#calImg'});

Validate maximum:

$('#validMaxPicker').datepick({
	maxDate: +7, showTrigger: '#calImg'});

Validate min/max:

$('#validMinMaxPicker').datepick({
	minDate: -7, maxDate: +7, showTrigger: '#calImg'});

Comparison before/after: to

$('#validBeforePicker,#validAfterPicker').datepick({
	showTrigger: '#calImg'});

Comparison not today:

$('#validTodayPicker').datepick({showTrigger: '#calImg'});

Comparison specific date:

$('#validSpecificPicker').datepick({showTrigger: '#calImg'});

 

Date Functions

Datepicker provides a number of functions to work with dates.

The constructor for a JavaScript Date expects the year, month, day, and (optionally) the hour, minute, and second. The month must be in the range 0 to 11 rather than the normal 1 to 12. So to avoid confusion in my code (does a month of 3 mean March or April?) I always use the 1 to 12 value and explicitly subtract the 1:

var d = new Date(2014, 1 - 1, 26);

Alternately, you can use the datepicker newDate function without having to worry about the month:

var d = $.datepick.newDate(2014, 1, 26);

This function also zeroes out any time information and makes adjustments for certain daylight saving cutovers.

For today's date use $.datepick.today().

Other functions include the following:

Format date: =

$('#formatSpec').change(reformatDate);
$('#formatDate').datepick({onSelect: reformatDate}).
	datepick('setDate', new Date());
	
function reformatDate() {
	$('#formatOutput').val($.datepick.formatDate(
		$('#formatSpec').val(), $('#formatDate').datepick('getDate')[0]));
}

Parse date: =

$('#parseSpec,#parseInput').change(function() {
		try {
			$('#parseDate').val($.datepick.formatDate(
				$.datepick.parseDate(
					$('#parseSpec').val(), $('#parseInput').val())));
		}
		catch (e) {
			alert(e);
		}
	}).
	change();

Determine date: =

$('#determineSpec').change(function() {
		$('#determineDate').val($.datepick.formatDate(
			$.datepick.determineDate($(this).val())));
	}).
	change();

Days in month: =

$('#dimMonth,#dimYear').change(function() {
		$('#dimDays').val($.datepick.daysInMonth(
			parseInt($('#dimYear').val(), 10), parseInt($('#dimMonth').val(), 10)));
	}).
	change();

Day of year: =

$('#doyDate').datepick({onSelect: function(dates) {
		$('#doyDays').val($.datepick.dayOfYear(dates[0]));
	}}).
	datepick('setDate', new Date());

Set year/month/day: =

$('#setDay,#setMonth,#setYear').change(function() {
		var date = $.datepick.day(
			$.datepick.month(
				$.datepick.year(
					$.datepick.today(), $('#setYear').val()),
				$('#setMonth').val()),
			$('#setDay').val());
		$('#setDate').val($.datepick.formatDate(date));
	}).
	change();

Add periods: + =

$('#addDate').datepick({onSelect: addPeriods}).
	datepick('setDate', new Date());
$('#addAmount,#addPeriod').change(addPeriods);

function addPeriods() {
	var date = new Date($('#addDate').datepick('getDate')[0].getTime());
	$.datepick.add(date, parseInt($('#addAmount').val(), 10), $('#addPeriod').val());
	$('#addedDate').val($.datepick.formatDate(date));
}
Compatibility

Version 4.0.0 was a major update to the datepicker. As such, several compatibility issues arise when upgrading from version 3.7.x:

In the Wild

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

To add another example, please contact me (wood.keith{at}optusnet.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({
	pickerClass: '', // CSS class to add to this instance of the datepicker
	showOnFocus: true, // True for popup on focus, false for not
	showTrigger: null, // Element to be cloned for a trigger, null for none
	showAnim: 'show', // Name of jQuery animation for popup, '' for no animation
	showOptions: {}, // Options for enhanced animations
	showSpeed: '_default', // Duration of display/closure
	popupContainer: null, // The element to which a popup calendar is added, null for body
	alignment: 'bottom', // Alignment of popup - with nominated corner of input:
		// 'top' or 'bottom' aligns depending on language direction,
		// 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'
	fixedWeeks: false, // True to always show 6 weeks, false to only show as many as are needed
	firstDay: null, // First day of the week, 0 = Sunday, 1 = Monday, ...
		// defaults to calendar local setting if null
	calculateWeek: null, // Calculate week of the year from a date, null for calendar default
	monthsToShow: 1, // How many months to show, cols or [rows, cols]
	monthsOffset: 0, // How many months to offset the primary month by
	monthsToStep: 1, // How many months to move when prev/next clicked
	monthsToJump: 12, // How many months to move when large prev/next clicked
	changeMonth: true, // True to change month/year via drop-down, false for navigation only
	yearRange: 'c-10:c+10', // Range of years to show in drop-down: 'any' for direct text entry
		// or 'start:end', where start/end are '+-nn' for relative to today
		// or 'c+-nn' for relative to the currently selected date
		// or 'nnnn' for an absolute year
	shortYearCutoff: '+10', // Cutoff for two-digit year in the current century
	showOtherMonths: false, // True to show dates from other months, false to not show them
	selectOtherMonths: false, // True to allow selection of dates from other months too
	defaultDate: null, // Date to show if no other selected
	selectDefaultDate: false, // True to pre-select the default date if no other is chosen
	minDate: null, // The minimum selectable date
	maxDate: null, // The maximum selectable date
	dateFormat: null, // Format for dates, defaults to calendar setting if null
	autoSize: false, // True to size the input field according to the date format
	rangeSelect: false, // Allows for selecting a date range on one date picker
	rangeSeparator: ' - ', // Text between two dates in a range
	multiSelect: 0, // Maximum number of selectable dates, zero for single select
	multiSeparator: ',', // Text between multiple dates
	onDate: null, // Callback as a date is added to the datepicker
	onShow: null, // Callback just before a datepicker is shown
	onChangeMonthYear: null, // Callback when a new month/year is selected
	onSelect: null, // Callback when a date is selected
	onClose: null, // Callback when a datepicker is closed
	altField: null, // Alternate field to update in synch with the datepicker
	altFormat: null, // Date format for alternate field, defaults to dateFormat
	constrainInput: true, // True to constrain typed input to dateFormat allowed characters
	commandsAsDateFormat: false, // True to apply formatDate to the command texts
	commands: this.commands, // Command actions that may be added to a layout by name

	// Localisation settings
	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'],
	dayNames: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'],
	dayNamesShort: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
	dayNamesMin: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'],
	dateFormat: 'mm/dd/yyyy', // See format options on parseDate
	firstDay: 0, // The first day of the week, Sun = 0, Mon = 1, ...
	renderer: this.defaultRenderer, // The rendering templates
	prevText: '<Prev', // Text for the previous month command
	prevStatus: 'Show the previous month', // Status text for the previous month command
	prevJumpText: '<<', // Text for the previous year command
	prevJumpStatus: 'Show the previous year', // Status text for the previous year command
	nextText: 'Next>', // Text for the next month command
	nextStatus: 'Show the next month', // Status text for the next month command
	nextJumpText: '>>', // Text for the next year command
	nextJumpStatus: 'Show the next year', // Status text for the next year command
	currentText: 'Current', // Text for the current month command
	currentStatus: 'Show the current month', // Status text for the current month command
	todayText: 'Today', // Text for the today's month command
	todayStatus: 'Show today\'s month', // Status text for the today's month command
	clearText: 'Clear', // Text for the clear command
	clearStatus: 'Clear all the dates', // Status text for the clear command
	closeText: 'Close', // Text for the close command
	closeStatus: 'Close the datepicker', // Status text for the close command
	yearStatus: 'Change the year', // Status text for year selection
	earlierText: '  ▲', // Text for earlier years
	laterText: '  ▼', // Text for later years
	monthStatus: 'Change the month', // Status text for month selection
	weekText: 'Wk', // Text for week of the year column header
	weekStatus: 'Week of the year', // Status text for week of the year column header
	dayStatus: 'Select DD, M d, yyyy', // Status text for selectable days
	defaultStatus: 'Select a date', // Status text shown by default
	isRTL: false // True if language is right-to-left
});

$.datepick.regionalOptions[] // Language/country-specific localisations

$.datepick.commands = { // Command actions that may be added to a layout by name
	// name: { // The command name, use '{button:name}' or '{link:name}' in layouts
	//		text: '', // The field in the regional settings for the displayed text
	//		status: '', // The field in the regional settings for the status text
	//      // The keystroke to trigger the action
	//		keystroke: {keyCode: nn, ctrlKey: boolean, altKey: boolean},
	//		enabled: fn, // The function that indicates the command is enabled
	//		date: fn, // The function to get the date associated with this action
	//		action: fn} // The function that implements the action
	prev: {...}, // Previous month
	prevJump: {...}, // Previous year
	next: {...}, // Next month
	nextJump: {...}, // Next year
	current: {...}, // Currently selected month
	today: {...}, // Today's month
	clear: {...}, // Clear the datepicker
	close: {...}, // Close the datepicker
	prevWeek: {...}, // Previous week
	prevDay: {...}, // Previous day
	nextDay: {...}, // Next day
	nextWeek: {...} // Next week
}

$.datepick.defaultRenderer = { // The standard datepicker renderer
	picker: '...', // Overall structure
	monthRow: '...', // One row of months
	month: '...', // A single month
	weekHeader: '...', // A week header
	dayHeader: '...', // Individual day header
	week: '...', // One week of the month
	day: '...', // An individual day
	monthSelector: '...', // jQuery selector, relative to picker, for a single month
	daySelector: '...', // jQuery selector, relative to picker, for individual days
	rtlClass: '...', // Class for right-to-left (RTL) languages
	multiClass: '...', // Class for multi-month datepickers
	defaultClass: '...', // Class for selectable dates
	selectedClass: '...', // Class for currently selected dates
	highlightedClass: '...', // Class for highlighted dates
	todayClass: '...', // Class for today
	otherMonthClass: '...', // Class for days from other months
	weekendClass: '...', // Class for days on weekends
	commandClass: '...', // Class prefix for commands
	commandButtonClass: '...', // Extra class(es) for commands that are buttons
	commandLinkClass: '...', // Extra class(es) for commands that are links
	disabledClass: '...' // Class for disabled commands
}

$.datepick.setDefaults(settings) // Set global defaults
$.datepick.multipleEvents(fns) // Apply multiple callbacks to an event

$.datepick.formatDate(format, date, settings) // Format a date
$.datepick.parseDate(format, value, settings) // Parse a date from a string
// Calculate a date
$.datepick.determineDate(dateSpec, defaultDate, currentDate, dateFormat, settings)
$.datepick.daysInMonth(year, month)
$.datepick.dayOfYear(year, month, day)
$.datepick.iso8601Week(year, month, day) // ISO 8601 week of year
$.datepick.today()
$.datepick.newDate(year, month, day)
$.datepick.year(date, year) // Set year for a date
$.datepick.month(date, month) // Set month for a date
$.datepick.day(date, day) // Set day for a date
$.datepick.add(date, amount, period) // Add periods to a date

$(selector).datepick('option', settings) // Update multiple settings
$(selector).datepick('option', name, value) // Update a single setting
$(selector).datepick('option', name) // Retrieve a current setting
$(selector).datepick('destroy') // Remove datepicker functionality
$(selector).datepick('enable') // Enable datepicker and field
$(selector).datepick('disable') // Disable datepicker and field
$(selector).datepick('isDisabled') // Determine if a datepicker is disabled
$(selector).datepick('show') // Display a popup datepicker
$(selector).datepick('hide') // Close a popup datepicker
$(selector).datepick('clear') // Close a popup datepicker and clear its field
$(selector).datepick('getDate') // Retrieve the selected dates
$(selector).datepick('setDate', dates, endDate) // Set the selected dates
$(selector).datepick('retrieveDate', elem) // Retrieve the date for a selected datepicker element
$(selector).datepick('performAction', action) // Execute a named command
$(selector).datepick('changeMonth', offset) // Move a number of months
$(selector).datepick('showMonth', year, month) // Show a specific month and year
$(selector).datepick('changeDay', offset) // Move a number of days
$(selector).datepick('selectDate', elem) // Select the date for a datepicker element

// And in the extension module

$.datepick.weekOfYearRenderer // Renderer showing week of the year
$.datepick.themeRollerRenderer // Renderer using ThemeRoller styling
$.datepick.themeRollerWeekOfYearRenderer // Renderer combining the above two

$.datepick.noWeekends // onDate callback to not allow weekend dates
$.datepick.changeFirstDay // onShow callback to allow changing the first day of the week
$.datepick.hoverCallback(onHover) // onShow callback to follow date hovers
$.datepick.highlightWeek // onShow callback to highlight a hovered week
$.datepick.showStatus // onShow callback to show a status bar
$.datepick.monthNavigation // onShow callback to navigate to other months/years
$.datepick.selectWeek // onShow callback to select an entire week
$.datepick.selectMonth // onShow callback to select an entire month
Usage
  1. Include the jQuery library in the head section of your page.
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  2. Download and include the base jQuery Datepicker CSS and JavaScript in the head section of your page.
    <link rel="stylesheet" type="text/css" href="css/jquery.datepick.css">
    <script type="text/javascript" src="js/jquery.plugin.js"></script>
    <script type="text/javascript" src="js/jquery.datepick.js"></script>
    Alternately, you can use the minified version jquery.datepick.min.js (36.8K vs 93.9K, 10.9K when zipped).
  3. Connect the datepicker functionality to your input field or division/span.
    $(selector).datepick();
    You can include custom settings as part of this process.
    $(selector).datepick({dateFormat: 'yyyy-mm-dd'});
  4. If you need to retrieve the date(s) programatically, use the getDate method, which returns an array of Date objects:
    var dates = $(selector).datepick('getDate');

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.

All of the localisation files are also available in one module: jquery.datepick.lang.js.

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

Your datepicker control is awesome! Thanks for making such a great control, it has so many useful options, and is so easy to use. I applaud you, sir!

Ryan O'Boril

Contact Keith Wood at wood.keith{at}optusnet.com.au with comments or suggestions.

Change History
VersionDateChanges
5.1.029 Oct 2016
  • Trigger change event when updating field value
  • JSHint corrections
  • Better inline JSDoc
5.0.108 Aug 2015
  • Added earlierText and laterText to regional options to allow for easier navigation within the year drop-down
  • Corrected day highlighting for inline datepicker
  • Changed &nbsp; to &#160;
  • Added Tatar localisation
5.0.022 Mar 2014
  • Updated underlying plugin framework
  • Updated for jQuery UI 1.9
  • Changed regional to regionalOptions
  • Marker class changed from hasDatepick to is-datepick
  • Corrected null option setting
  • Namespaced external click and resize checks to allow them to easily be removed.
4.1.026 Jan 2013
  • Updated for jQuery 1.9
  • Changed 'options' command to 'option'
  • Updated underlying plugin framework
  • Date parsing is now case-insensitive
  • Dropped iframe fix for z-index issues for popups in IE
  • Added Amharic, Arabic/Egypt, Georgian, Hindi, Hindi/India, Khmer, Maltese, Portuguese localisations
  • Updated Korean localisation
4.0.630 Apr 2011
  • Allow monthsOffset to be a function
  • Corrected parsing of short years
  • determineDate always returns a new date
  • Added Arabic/Algeria, Malayalam, Romansh, Spanish/Peru localisations
  • Added CSS for more ThemeRoller themes (thanks to Jacques Garcia Vazquez)
  • Corrected ThemeRoller CSS overrides for jQuery UI themes 1.8.9+
4.0.522 Jan 2011
  • onChangeMonthYear now called before onDate
  • Simplified basic validation to a single rule (dpDate) with no parameters
  • Added cross-validation between date fields and specified dates (dpCompareDate)
  • Added Montenegrin (Roman and Cyrillic) localisations
  • Updated Norwegian localisation
4.0.430 Oct 2010
  • All dates now have time set to 12 noon to overcome daylight saving issues
  • Corrected interaction with jQuery UI effects for show/hide
  • Added Macedonian localisation
4.0.325 Sep 2010
  • Initialise datepicker with pre-existing date value
  • Allow yearRange to be in descending order
  • Added isSelectable command to test a date against a datepicker
  • Added mouse wheel support for changing months/years and useMouseWheel option
  • Allow changeFirstDay, selectWeek, and selectMonth to work with ThemeRoller renderer
  • Corrected selectMonth extension
  • Corrected Thai localisation
4.0.226 Jun 2010
  • Updated to co-exist with jQuery UI 1.7
  • Check for disabled input fields on setup
  • Remove automatic setting of z-index
  • Added monthNavigation extension for simpler navigation between months/years
  • Corrected errorPlacement for non-datepicker validations
4.0.124 Apr 2010
  • Corrected error selecting dates prior to 1970
  • Corrected error selecting dates over daylight savings start/end
  • Compute datepicker width from all individual months
  • Mark first and last months in a row
  • Added Gujarati, Spanish/Argentina, and Urdu localisations
4.0.010 Apr 2010
  • Complete refactor of datepicker - WARNING - compatibility issues on upgrade
  • Added template based layouts
  • Added datepicker commands
  • Moved less common extra functionality to a separate module
  • Automatically set z-index
  • Corrected Unix timestamp calculations (was milliseconds instead of seconds)
  • Added onDate callback selectability check to validation
  • Added Belgian Dutch, Chinese Hong Kong, Faroese, Galician, Swiss-German, and Tamil localisations
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