jQuery Datepicker Reference

Instance Settings

A separate datepicker instance is created for each targetted control: $(selector).datepick();. When applied to a div or span the datepicker is rendered inline. Otherwise it appears as a popup on demand.

Each instance may have different settings, e.g. $(selector).datepick({minDate: new Date()});.

Alternately, you can specify the settings per control by including the jQuery Metadata plugin in your page and adding options to the class attribute, e.g. <input type="text" class="{minDate: new Date()}"/>.

Below are the settings that may be applied to each datepicker instance. All are optional.

alignment | altField | altFormat | appendText | autoSize | beforeShow | beforeShowDay | buttonImage | buttonImageOnly | buttonText | calculateWeek | changeFirstDay | changeMonth | changeYear | closeAtTop | constrainInput | defaultDate | duration | gotoCurrent | hideIfNoPrevNext | highlightWeek | mandatory | maxDate | minDate | multiSelect | multiSeparator | navigationAsDateFormat | numberOfMonths | onChangeMonthYear | onClose | onHover | onSelect | rangeSelect | rangeSeparator | selectOtherMonths | shortYearCutoff | showAnim | showBigPrevNext | showCurrentAtPos | showDefault | showOn | showOptions | showOtherMonths | showStatus | showWeeks | statusForDate | stepBigMonths | stepMonths | useThemeRoller | yearRange

Localisation Settings

Below are the localisation settings that may be applied to each datepicker instance. All are optional. These options are designed to be updated when localising the datepicker for a given language and locale.

Use a localisation package (see the list on the demo page) by loading the appropriate file after the datepicker plugin itself. This 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']);

clearStatus | clearText | closeStatus | closeText | currentStatus | currentText | dateFormat | dateStatus | dayNames | dayNamesMin | dayNamesShort | dayStatus | firstDay | initStatus | isRTL | monthNames | monthNamesShort | monthStatus | nextBigStatus | nextBigText | nextStatus | nextText | prevBigStatus | prevBigText | prevStatus | prevText | showMonthAfterYear | weekHeader | weekStatus | yearStatus | yearSuffix

Global Settings

Below are the fields and functions available from the datepicker manager ($.datepick).

Fields

Functions

dateStatus | destroy | dialog | disable | enable | errorPlacement | formatDate | getDate | hide | isDisabled | iso8601Week | noWeekends | option | parseDate | refresh | setDate | setDefaults | show

$.datepick.setDefaults({dateFormat: 'dd/mm/yy'})

$(selector).datepick('option', {dateFormat: 'dd/mm/yy'})

$(selector).datepick('option', 'dateFormat', 'dd/mm/yy')

format = $(selector).datepick('option', 'dateFormat')

$(selector).datepick('dialog', new Date(), alertDate)

$(selector).datepick('setDate') // Clear
$(selector).datepick('setDate', new Date(2009, 1 - 1, 26))
$(selector).datepick('setDate', -7)
$(selector).datepick('setDate', '+20d')
$(selector).datepick('setDate', 'c+1w')
$(selector).datepick('setDate', [date1, date2, date3])

$.datepick.formatDate('yy-mm-dd', new Date())

$.datepick.parseDate('yy-mm-dd', '2009-01-26')

Validation Integration

Datepicker can be integrated with Jörn Zaefferer's validation plugin by adding the jquery.datepick-validation.js extension to your page.

Since 3.5.1.

Four new validations are defined, as listed below. All automatically handle date ranges (including checking that the start date is not after the end date) and multiple dates. The first may be added as a class to your datepicker fields, while the others must be defined in the validate settings and be passed an empty array.

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

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

You can customise the error messages via the datepicker defaults: $.datepick.setDefaults({...}). The message fields are validateDate, validateDateMin, validateDateMax, and validateDateMinMax. Within the latter use '{0}' and/or '{1}' for substituting in minimum/maximum date values.

The sample page below show how the validations would be used. It defines three datepicker fields: one plain, one a date range, and one with a maximum limit. The validations are applied to the first two by including the dpDate class on the fields. For the last one the validation is defined in the validate call on the form, linking the field to the dpMaxDate rule. Also note that a custom message is defined for the date range field.

<head>
<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript" src="jquery.validate.js"></script>
<script type="text/javascript" src="jquery.datepick.js"></script>
<script type="text/javascript" src="jquery.datepick-validation.js"></script>
<script type="text/javascript">
$(function() {
	$('#favDate').datepick();
	$('#holidayDates').datepick({rangeSelect: true});
	$('#birthDate').datepick({maxDate: new Date()});

	$('#validateForm').validate({
		errorPlacement: $.datepick.errorPlacement,
		rules: {
			birthDate: {dpMaxDate: []}
		},
		messages: {
			holidayDates: 'Please enter a valid date range'}
		});
});
</script>
<style type="text/css">@import "jquery.datepick.css";</style>
</head>
<body>
	<form id="validateForm">
		<p>Favourite date: <input type="text" id="favDate"
			name="favDate" size="10" class="dpDate"/></p>
		<p>Period of last holiday: <input type="text" id="holidayDates"
			name="holidayDates" size="24" class="dpDate"/></p>
		<p>Date of birth: <input type="text" id="birthDate"
			name="birthDate" size="10"/></p>
	</form>
</body>