Datepicker Settings

A separate datepicker instance is created for each targeted 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 adding a data-datepick attribute, e.g.

<input type="text" data-datepick="rangeSelect: true, minDate: 'new Date()'"/>

The datepicker functionality can only be applied once. Affected controls are flagged with the is-datepick class and are not re-processed if targeted again. Use the option command if you want to change settings after the initial setup.

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


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)});

alignment | altField | altFormat | autoSize | calculateWeek | changeMonth | commands | commandsAsDateFormat | constrainInput | defaultDate | fixedWeeks | maxDate | minDate | monthsOffset | monthsToJump | monthsToShow | monthsToStep | multiSelect | multiSeparator | onChangeMonthYear | onClose | onDate | onSelect | onShow | pickerClass | popupContainer | rangeSelect | rangeSeparator | selectDefaultDate | selectOtherMonths | shortYearCutoff | showAnim | showOnFocus | showOptions | showOtherMonths | showSpeed | showTrigger | useMouseWheel | yearRange

NameTypeDefaultComments
pickerClassstring'' Any extra CSS class(es) to add to this datepicker instance. By specifying a unique class you can individually target datepicker instances with special styling.

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

Since 4.0.0.
showOnFocusbooleantrue When true a popup datepicker appears for an input field when it gains focus. When false you should specify a showTrigger instead.

Since 4.0.0 - previously incorporated into showOn.
showTriggerstring or element or jQuerynull The element(s) that will trigger a popup datepicker to appear when they are clicked. You can provide either the element itself, a jQuery collection containing the element, a string selector for the desired element, or a string version of the element. The trigger is cloned and placed after the input field (taking right-to-left languages into account).

$(selector).datepick({showTrigger:
    '<img src="img/calendar.gif" alt="Popup" class="trigger">'});
$(selector).datepick({showTrigger: '#myicon'});

Since 4.0.0 - previously you used showOn, buttonText, buttonImage, and buttonImageOnly.
showAnimstring'show' The name of the animation to use when a popup datepicker appears and disappears. The value can be one of the standard animations - 'show', 'fadeIn', or 'slideDown' - or any of the jQuery UI effects (provided you have included the appropriate plugin). Set this to '' for no animation.

$(selector).datepick({showAnim: 'fadeIn'});
$(selector).datepick({showAnim: 'clip'});
$(selector).datepick({showAnim: ''}); // Immediate

Since 3.7.3 - '' for no animation.
showOptionsobject{} For jQuery UI animations you can specify any additional options with this setting. For example, the clip animation can be set to run horizontally instead of vertically.

$(selector).datepick({showAnim: 'clip',
    showOptions: {direction: 'horizontal'}});
showSpeedstring or number'normal' The speed at which the animation runs. Use one of the standard speeds - 'slow', 'normal', or 'fast' - or specify the duration in milliseconds.

$(selector).datepick({showSpeed: 'fast'});
$(selector).datepick({showSpeed: 1500});

Since 4.0.0 - previously it was duration.
popupContainer string or element or jQuerynull The container for the popup datepicker, allowing you to control where in the DOM the datepicker is appended. You can provide either the element itself, a jQuery collection containing the element, or a string selector for the desired element. It defaults to the document body.

$(selector).datepick({popupContainer: '#mydiv'});

Since 4.0.0.
alignmentstring'bottom' Control the alignment of a popup datepicker with respect to its input field. Use one of the following values: 'bottom' for below or 'top' for above, both of which are left- or right- aligned depending on the localisation preference, or 'topLeft', 'topRight', 'bottomLeft', or 'bottomLeft'. The first two options will reposition the datepicker if it does not fit in the requested space.

Since 3.7.0.
fixedWeeksbooleanfalse Set to true to always have six weeks shown, or false to only show as many weeks as are needed. This setting only applies to a datepicker for a single month as all multi-month datepickers are always fixed.

Since 4.0.0.
calculateWeekfunction$.datepick. iso8601Week A function to calculate the week of the year for a given date. The date (Date) is passed as a parameter and the function returns a number indicating the corresponding week of the year. If set to null the built-in ISO 8601 calculation is used. You should use the weekOfYearRenderer to actually display the value.

$(selector).datepick({calculateWeek: myWeek,
    renderer: $.datepick.weekOfYearRenderer});
	
function myWeek(date) {
    return Math.floor(($.datepick.dayOfYear(date) - 1) / 7) + 1;
}
monthsToShownumber or number[2]1 The number of months to show in the datepicker. It may be expressed as a single number of columns, or as an array of rows and columns.

$(selector).datepick({monthsToShow: 3});
$(selector).datepick({monthsToShow: [2, 3]});

Since 4.0.0 - previously it was numberOfMonths.
Since 4.0.1 - mark first and last months in each row with classes first and last.
monthsOffsetnumber or function0 When showing multiple months, this setting indicates at which position the current month is shown, starting from zero. If specified as a function, it accepts a date as its parameter and returns the corresponding offset. The example below shows three months with the current one in the middle.

$(selector).datepick({
    monthsToShow: 3, monthsOffset: 1});

Since 4.0.0 - previously it was showCurrentAtPos.
Since 4.0.6 - can be a function.
monthsToStepnumber1 The number of months to move when the previous or next month commands are invoked.

Since 4.0.0 - previously it was stepMonths.
monthsToJumpnumber12 The number of months to move when the previous or next year commands are invoked.

Since 4.0.0 - previously it was stepBigMonths.
useMouseWheelbooleantrue If the MouseWheel plugin is available and this setting is true then you can use the mouse wheel to step through the months or years (with the Ctrl key). If this setting is false then the mouse wheel has no effect within the datepicker, even if the plugin is available.

Since 4.0.3.
changeMonthbooleantrue Set to true to allow the month and year to be changed via a drop-down selection on the first month shown in the datepicker. Set to false to only allow changes via the various previous and next commands.

Since 4.0.0 - previously it only affected the month drop-down with changeYear controlling the year drop-down.
yearRangestring'c-10:c+10' Specify the range of years shown in the year drop-down. The setting contains the start and end of the range separated by a colon (:). Each limit may be an absolute year ('1980'), an offset from today ('-10' or '+10'), or an offset from the currently selected date ('c-5' or 'c+5'). Place the maximum value first to have the list appear in descending order. Set to 'any' to allow direct input of the year without selection from a drop-down list. The default is to show 10 years before and after the currently selected date.

Note that this setting does not restrict the dates that may be selected. You should use the minDate and maxDate settings to impose limits on the dates that may be selected.

$(selector).datepick({yearRange: '1980:2000'});
$(selector).datepick({yearRange: '1960:-18'});
$(selector).datepick({yearRange: 'c+10:c-10'}); // Descending
$(selector).datepick({yearRange: 'any'});

Since 3.7.3 - relative to today's year and combinations.
Since 4.0.0 - 'any'.
Since 4.0.3 - descending ranges.
shortYearCutoffstring or number'+10' When a two-digit year format is used (see dateFormat), this value helps determine the century for a given date. If expressed as a number (0 to 99) it is the year beyond which the century should be the last one instead of the current one. If expressed as a string, it is converted to a number and added to the current year before making the comparison above. If set to -1 the year is always in the 1900s.

Since 3.5.2 - disable with -1.
showOtherMonthsbooleanfalse Set to true to show the days in other months that appear in the partial weeks before or after the current month.
selectOtherMonthsbooleanfalse Set to true to allow the days in other months that appear in the partial weeks before or after the current month to be selected. This setting only applies if showOtherMonths is true.

$(selector).datepick({
    showOtherMonths: true, selectOtherMonths: true});

Since 3.5.0.
defaultDate Date or number or stringnull Specify the date to show if no other date has been selected. This may be specified as an actual date (Date), as a date string in the current dateFormat, as a number of days relative to today, or as a string of offsets and periods relative to today. For the last use 'y' for years, 'm' for months, 'w' for weeks, or 'd' for days. Multiple offsets may be combined in the one string. Set to null for a default date of today.

$(selector).datepick({
    defaultDate: new Date(2013, 1-1, 26)});
$(selector).datepick({defaultDate: '01/26/2013'});
$(selector).datepick({defaultDate: +7});
$(selector).datepick({defaultDate: '+1m -1d'});

Since 3.7.0 - added date string.
selectDefaultDatebooleanfalse Set to true to automatically select the defaultDate when no other date has been selected.

$(selector).datepick({
    defaultDate: '01/26/2013', selectDefaultDate: true});

Since 4.0.0 - previously it was showDefault.
minDate Date or number or stringnull Specify the minimum date allowed to be selected. This may be specified as an actual date (Date), as a date string in the current dateFormat, as a number of days relative to today, or as a string of offsets and periods relative to today. For the last use 'y' for years, 'm' for months, 'w' for weeks, or 'd' for days. Multiple offsets may be combined in the one string. Set to null for no minimum.

$(selector).datepick({
    minDate: new Date(2012, 12-1, 25)});
$(selector).datepick({minDate: '12/25/2012'});
$(selector).datepick({minDate: -10});
$(selector).datepick({minDate: '-1m -15d'});

Since 3.7.0 - added date string.
maxDate Date or number or stringnull Specify the maximum date allowed to be selected. This may be specified as an actual date (Date), as a date string in the current dateFormat, as a number of days relative to today, or as a string of offsets and periods relative to today. For the last use 'y' for years, 'm' for months, 'w' for weeks, or 'd' for days. Multiple offsets may be combined in the one string. Set to null for no maximum.

$(selector).datepick({
    maxDate: new Date(2013, 12-1, 25)});
$(selector).datepick({maxDate: '12/25/2013'});
$(selector).datepick({maxDate: +10});
$(selector).datepick({maxDate: '+1m +15d'});

Since 3.7.0 - added date string.
autoSizebooleanfalse Set to true to resize the input field based on the maximum length of a date in the current dateFormat. Set to false to not change the field length.

Since 3.7.1.
rangeSelectbooleanfalse Set to true to allow the selection of a date range in the datepicker. The first selected date is the start of the range and the second selected date is the end of the range. A popup datepicker closes automatically on selection of the range end. Set to false to select a single date.
rangeSeparatorstring' - ' Specify the separator shown between the two dates in a date range.
multiSelectnumber0 Specify the maximum number of individual separate dates that may be selected in the datepicker. Dates may be de-selected by clicked on them a second time. A popup datepicker closes automatically on selection of the maximum number allowed. Set to 0 to select a single date.

Since 3.6.0.
multiSeparatorstring',' Specify the separator shown between the dates selected in a multiple date datepicker.

Since 3.6.0.
onDatefunctionnull Specify a callback function to provide additonal details about individual dates shown in the datepicker. The function is called for each date displayed and receives the date as a parameter (Date, with time portion set to 12 noon), along with a Boolean indicating whether the date is in the main month being shown (as opposed to being an extra day before or after the main month), while this refers to the associated control. It returns an object with the following attributes (all optional):

selectable (boolean) true if the date is selectable, false if not;

dateClass (string) any CSS class(es) to apply to this date;

title (string) a tooltip for this date;

content (string) content for this date to replace the basic day number.

$(selector).datepick({
    onDate: function(date, current) {
        return !current ? {} :
			{content: date.getDate() + '<br><sub>' +
            $.datepick.dayOfYear(date) + '</sub>',
            dateClass: 'showDoY'};
    }
});

Since 4.0.0 - previously beforeShowDay provided similar functionality.
Since 4.0.4 - time portion is 12 noon.
onShowfunctionnull Specify a callback function to provide additonal functionality to a datepicker. The function is called just before the datepicker is shown and receives the completed datepicker division as a jQuery object and the current instance settings as parameters, while this refers to the associated control. It should update the datepicker division as necessary. See the various examples in the datepick.ext module. If you need multiple onShow callbacks, use the multipleEvents function and pass the relevant handlers to it.

$(selector).datepick({
    onShow: function(picker, inst) {
        picker.find('td:even').addClass('alternate-dates');
    }
});

Since 4.0.0.
onChangeMonthYearfunctionnull Specify a callback function to be notified of changes to the month and year shown in a datepicker. The function is called when the month/year changes and receives the year and month as parameters, while this refers to the associated control. If you need multiple onChangeMonthYear callbacks, use the multipleEvents function and pass the relevant handlers to it.

$(selector).datepick({
    onChangeMonthYear: function(year, month) {
        $('#monthYear').text(month + '/' + year);
    }
});
onSelectfunctionnull Specify a callback function to be notified of date selection in a datepicker. The function is called when each date is selected and receives the currently selected dates (Date[]) as the parameter, while this refers to the associated control. The array is empty if no dates have been selected. All dates have their time portion set to 12 noon. Note that when the start of a range is selected the dates array contains two entries, with both being that starting date. If you need multiple onSelect callbacks, use the multipleEvents function and pass the relevant handlers to it.

$(selector).datepick({
    onSelect: function(dates) {
        $('#count').text('Selected ' + dates.length + ' date(s)');
        var minDate = dates[0];
        for (var i = 1; i < dates.length; i++) {
            if (dates[i].getTime() < minDate.getTime()) {
                minDate = dates[i];
            }
        }
        $('#minDate').text($.datepick.formatDate(minDate));
    }
});

Since 3.5.2 - added Date type parameter.
Since 4.0.0 - dates parameter only.
Since 4.0.4 - time portion is 12 noon.
onClosefunctionnull Specify a callback function to be notified of a popup datepicker closing. The function is called when the datepicker is closed (by any means) and receives the currently selected dates (Date[]) as the parameter, while this refers to the associated control. The array is empty if no dates have been selected. All dates have their time portion set to 12 noon. Note that range selections always have two entries, with both being the starting date if no end date has been selected. If you need multiple onClose callbacks, use the multipleEvents function and pass the relevant handlers to it.

$(selector).datepick({
    onClose: function(dates) {
        var selected = '';
        for (var i = 0; i < dates.length; i++) {
            selected += ',' + $.datepick.formatDate(dates[i]);
        }
        alert('Selected dates are: ' + selected.substring(1));
    }
});

Since 3.5.2 - added Date type parameter.
Since 4.0.0 - dates parameter only.
Since 4.0.4 - time portion is 12 noon.
altFieldstring or element or jQuerynull Specify another field to be updated in sync with the datepicker selections. This and the following setting allow you to automatically show selected dates in one format for the user, while maintaining a second field with a more useful format for further processing. The alternate field may be specified as either the element itself, a jQuery collection containing the element, or a string selector for the desired element.

$(selector).datepick({dateFormat: 'DD, MM d, yyyy',
    altField: '#isoDate', altFormat: 'yyyy-mm-dd'});
altFormatstringnull Use in conjunction with the altField setting to automatically maintain two different views of the selected date(s). See the dateFormat setting for the list of possible values.
constrainInputbooleantrue Set to true to only allow the entry of characters specified by the dateFormat, or false to allow any characters.
commandsAsDateFormatbooleanfalse Set to true to apply the formatDate function to all command display text. This allows you to label commands with the dates to which they refer, for example the previous and next links could show the month to which they move. Remember to quote (') any command text you do not want substituted.

$(selector).datepick({commandsAsDateFormat: true,
    prevText: '< M', todayText: 'M y', nextText: 'M >'});

Since 4.0.0 - previously it was navigationAsDateFormat.
commandsobject$.datepick. commands See the Commands tab for more details.

Since 4.0.0.
Datepicker Commands

The datepicker contains a series of commands that operate upon it, allowing these to be customised or new commands added. Each command consists of an object with the attributes shown below, and is added to the commands setting. The standard commands are listed below.

Since 4.0.0.

NameTypeComments
textstring The name of the localisation setting that provides the text value for this command.
statusstring The name of the localisation setting that provides the tooltip (status) value for this command.
keystrokeobject The keystroke that triggers this command. The object's attributes are:

keyCode (number) the numeric code for the keystroke;

ctrlKey (boolean, optional) true if the Ctrl key must be used in conjunction with the above keyCode;

altKey (boolean, optional) true if the Alt key must be used in conjunction with the above keyCode;

shiftKey (boolean, optional) true if the Shift key must be used in conjunction with the above keyCode.
enabledfunction The function that indicates whether the command can be invoked at present. It takes the current instance settings as a parameter, while this is the associated target control. It returns true if the command may be executed or false if it may not.
datefunction The function that provides a target date for this command. For example, the target date for the previous command is the first day of the previous month. It takes the current instance settings as a parameter, while this is the associated target control. It returns a Date if an appropriate date can be determined or null if not.
actionfunction The function that implements the action for this command. It takes the current instance settings as a parameter, while this is the associated target control.

Standard Commands

The standard commands defined by the datepicker are shown below and are available as $.datepick.commands. These may be positioned in the datepicker by including the '{link:name}' or '{button:name}' substitution points in the renderer values, where name is the command name below. Commands can be invoked on a datepicker with the performAction command.

NameTextStatusKeystroke EnabledDateAction
prev prevText prevStatusPage Up If not at the minDate First day of previous month Move to the previous month (depending on the monthsToStep setting)
prevJump prevJumpText prevJumpStatusCtrl+Page Up If not at the minDate First day of 12 months ago Move to 12 months ago (depending on the monthsToJump setting)
next nextText nextStatusPage Down If not at the maxDate First day of next month Move to the next month (depending on the monthsToStep setting)
nextJump nextJumpText nextJumpStatusCtrl+Page Down If not at the maxDate First day of 12 months ahead Move to 12 months ahead (depending on the monthsToJump setting)
current currentText currentStatusCtrl+Home If not outside minDate to maxDate First selected date or today Move to the month of the first selected date, or today if no date has been selected
today todayText todayStatusCtrl+Home If not outside minDate to maxDate TodayMove to today's month
clear clearText clearStatusCtrl+End Always -Clear any selected dates and close a popup datepicker
close closeText closeStatusEsc Always -Close a popup datepicker
prevWeek prevWeekText prevWeekStatusCtrl+Up If not at the minDate One week agoMove to the previous week
prevDay prevDayText prevDayStatusCtrl+Left If not at the minDate One day agoMove to the previous day
nextDay nextDayText nextDayStatusCtrl+Right If not at the maxDate One day aheadMove to the next day
nextWeek nextWeekText nextWeekStatusCtrl+Down If not at the maxDate One week aheadMove to the next week
Datepicker Localisation

These settings comprise the regional settings that may be localised by a language package. They can be overridden for individual instances:

$(selector).datepick({prevText: '<'});

clearStatus | clearText | closeStatus | closeText | currentStatus | currentText | dateFormat | dayNames | dayNamesMin | dayNamesShort | dayStatus | defaultStatus | firstDay | isRTL | monthNames | monthNamesShort | monthStatus | nextJumpStatus | nextJumpText | nextStatus | nextText | prevJumpStatus | prevJumpText | prevStatus | prevText | renderer | todayStatus | todayText | weekStatus | weekText | yearStatus

NameTypeDefaultComments
monthNamesstring[] ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] The full names of the months.
monthNamesShortstring[] ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] The abbreviated names of the months.
dayNamesstring[] ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] The full names of the days of the week, starting from Sunday.
dayNamesShortstring[] ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] The abbreviated names of the days of the week, starting from Sunday.
dayNamesMinstring[] ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'] The minimal names of the days of the week, starting from Sunday.
dateFormatstring'mm/dd/yyyy' Specify the format applied to the selected dates. This may be any combination of the values below. To use any of these characters without substitution you must surround them in single quotes (').

  • d - day of the month (no leading zero)
  • dd - day of the month (two digit)
  • D - day name short
  • DD - day name long
  • o - day of the year (no leading zeros)
  • oo - day of the year (three digits)
  • w - week of year (no leading zero)
  • ww - week of year (two digit)
  • m - month of the year (no leading zero)
  • mm - month of the year (two digit)
  • M - month name short
  • MM - month name long
  • yy - year (two digit)
  • yyyy - year (four digit)
  • J - Julian date
  • @ - Unix timestamp (secs since 01/01/1970)
  • ! - Windows ticks (100ns since 01/01/0001)
  • '...' - literal text
  • '' - single quote

Or you can use one of the predefined formats from the datepicker:

  • ATOM - 'yyyy-mm-dd'
  • COOKIE - 'D, dd M yyyy'
  • FULL - 'DD, MM d, yyyy'
  • ISO_8601 - 'yyyy-mm-dd'
  • JULIAN - 'J'
  • RFC_822 - 'D, d M yy'
  • RFC_850 - 'DD, dd-M-yy'
  • RFC_1036 - 'D, d M yy'
  • RFC_1123 - 'D, d M yyyy'
  • RFC_2822 - 'D, d M yyyy'
  • RSS - 'D, d M yy'
  • TICKS - '!'
  • TIMESTAMP - '@'
  • W3C - 'yyyy-mm-dd'

$(selector).datepick({dateFormat: 'yyyy-mm-dd'});
$(selector).datepick({dateFormat:
    '\'day\' d \'of\' MM \'in the year\' yyyy'});
$(selector).datepick({dateFormat: $.datepick.FULL});
firstDaynumber0 The number of the first day of the week shown in the datepicker, with 0 being Sunday, 1 being Monday, etc.
rendererobject $.datepick. defaultRenderer The renderer used to generate the datepicker. You can use one of the predefined renderers, define your own, or extend an existing one with minor changes. See the Renderers tab for more details.

$(selector).datepick({
    renderer: $.datepick.weekOfYearRenderer});
$(selector).datepick({
    renderer: $.extend({}, $.datepick.defaultRenderer,
        {picker: $.datepick.defaultRenderer.picker.
            replace(/\{link:clear\}/, '{button:clear}').
            replace(/\{link:close\}/, '{button:close}')})});

Since 4.0.0.
prevTextstring'<Prev' The display text for the prev command. Use the commandsAsDateFormat setting to format the text to show date information.

$(selector).datepick({
    prevText: '< M', commandsAsDateFormat: true});
prevStatusstring'Show the previous month' The tooltip text for the prev command.
prevJumpTextstring'<<' The display text for the prevJump command. Use the commandsAsDateFormat setting to format the text to show date information.

Since 4.0.0 - previously it was prevBigText.
prevJumpStatusstring'Show the previous year' The tooltip text for the prevJump command.

Since 4.0.0 - previously it was prevBigStatus.
nextTextstring'Next>' The display text for the next command. Use the commandsAsDateFormat setting to format the text to show date information.

$(selector).datepick({
    nextText: 'M >', commandsAsDateFormat: true});
nextStatusstring'Show the next month' The tooltip text for the next command.
nextJumpTextstring'>>' The display text for the nextJump command. Use the commandsAsDateFormat setting to format the text to show date information.

Since 4.0.0 - previously it was nextBigText.
nextJumpStatusstring'Show the next year' The tooltip text for the nextJump command.

Since 4.0.0 - previously it was nextBigStatus.
currentTextstring'Current' The display text for the current command. Use the commandsAsDateFormat setting to format the text to show date information.
currentStatusstring'Show the current month' The tooltip text for the current command.
todayTextstring'Today' The display text for the today command. Use the commandsAsDateFormat setting to format the text to show date information.
todayStatusstring'Show today\'s month' The tooltip text for the today command.
clearTextstring'Clear' The display text for the clear command.
clearStatusstring'Clear all the dates' The tooltip text for the clear command.
closeTextstring'Close' The display text for the close command.
closeStatusstring'Close the datepicker' The tooltip text for the close command.
yearStatusstring'Change the year' The tooltip text for the year drop-down.
monthStatusstring'Change the month' The tooltip text for the month drop-down.
weekTextstring'Wk' The display text for the week of the year column header.
weekStatusstring'Week of the year' The tooltip text for the week of the year column header.
dayStatusstring'Select DD, M d, yyyy' The tooltip text for selectable days. The formatDate function is applied to the value before use.

Since 4.0.0 - previously it was dateStatus.
defaultStatusstring'Select a date' The tooltip text for areas of the datepicker not covered by one of the other statuses above.

Since 4.0.0 - previously it was initStatus.
isRTLbooleanfalse Set to true to indicate that this language runs right-to-left.
Datepicker Renderers

Renderers allow you to use a templating mechanism to construct the datepicker for display. They are assigned to a datepicker instance as the renderer setting, one of the localisation settings.

Since 4.0.0.

You control the structure of the datepicker, the placement of controls within it, and the CSS styling that is applied to it. Substitution points of the form '{xxx}' indicate where standard content should be inserted.

There is a default renderer defined in the datepick module and several alternative renderers in the datepick.ext module. These are all described below.

If you define your own custom render it must contain all of the attributes described below. Alternatively you can tweak an existing renderer:

$(selector).datepick({renderer: $.extend(
    {}, $.datepick.defaultRenderer,
    {picker: $.datepick.defaultRenderer.picker.
        replace(/\{link:today\}/, '{link:current}')})});

commandButtonClass | commandClass | commandLinkClass | day | dayHeader | daySelector | defaultClass | disabledClass | highlightedClass | month | monthSelector | monthRow | multiClass | otherMonthClass | picker | rtlClass | selectedClass | todayClass | week | weekHeader | weekendClass

NameTypeComments
The following substitution points may be used anywhere within the renderer structure:

'{l10n:name}' to insert the localised value for name;

'{link:name}' to insert a link for command name;

'{button:name}' to insert a button for command name;

'{popup:start}...{popup:end}' to delimit sections that only appear in a popup datepicker;

'{inline:start}...{inline:end}' to delimit sections that only appear in an inline datepicker.
picker string The overall structure of the datepicker. Use:

'{months}' to insert the generated content for all of the shown months.
monthRow string The structure of a single row of months in the datepicker. Use:

'{months}' to insert the generated content for all of the months in that row.
month string The structure of a single month in the datepicker. Use:

'{monthHeader:dateFormat}' to insert the header for that month using the specified dateFormat, which is optional and defaults to 'MM yyyy';

'{weekHeader}' to insert the list of days in a week;

'{weeks}' to insert the generated content for all of the weeks in the month.
weekHeader string The structure of a single list of days in a week. Use:

'{days}' to insert the generated content for all of the days in the week.
dayHeader string The structure of a single day header. Use:

'{day}' to insert the generated content for the name of the day.
week string The structure of a single week in a month. Use:

'{days}' to insert the generated content for all of the days in that week;

'{weekOfYear}' to insert the generated content for the week of the year number.
day string The structure of a single day in a month. Use:

'{day}' to insert the generated content for the number of the day. Selectable days are enclosed in a link (a) while non-selectable days are wrapped in a span.
monthSelector string The jQuery selector, relative to a wrapper around picker, for a single month.
daySelector string The jQuery selector, relative to a wrapper around picker, for a single day.
rtlClass string Any CSS class(es) to apply to a datepicker using a right-to-left language.
multiClass string Any CSS class(es) to apply to a datepicker showing more than one month.
defaultClass string Any CSS class(es) to apply to selectable days.
selectedClass string Any CSS class(es) to apply to selected days.
highlightedClass string Any CSS class(es) to apply to the cursor day.
todayClass string Any CSS class(es) to apply to today.
otherMonthClass string Any CSS class(es) to apply to days from other months.
weekendClass string Any CSS class(es) to apply to days on weekends.
commandClass string Any CSS class(es) to apply to command links or buttons. It is also used as a prefix (followed by '-') for an additional class based on the command name.
commandButtonClass string Any CSS class(es) to apply to command buttons only.
commandLinkClass string Any CSS class(es) to apply to command links only.
disabledClass string Any CSS class(es) to apply to disabled command links or buttons.

Standard Renderers

The standard renderers are listed below. Each is accessible within the $.datepick object via the given name.

NameModuleComments
defaultRendererdatepick The standard renderer. Match it with the standard datepicker CSS.
weekOfYearRendererdatepick.ext The standard renderer enhanced to include a column for week of the year. Match it with the standard datepicker CSS.
themeRollerRendererdatepick.ext A renderer using a similar structure to the default one, but with the standard ThemeRoller classes for styling. Match it with one of the ThemeRoller CSS themes.
themeRollerWeekOfYearRendererdatepick.ext The ThemeRoller renderer enhanced to include a column for week of the year. Match it with one of the ThemeRoller CSS themes.
Datepicker Globals
NameTypeDefaultComments
commandsobject[] See Commands tab The set of commands for the datepicker and the default value for the commands setting. Entries are indexed by the command name. Each entry is an object with the properties shown on the Commands tab.

You could, for example, change the keystrokes assigned to certain commands:

var altCommands = $.extend(true, {}, $.datepick.commands); // Clone
altCommands.prevJump.keystroke = {keyCode: 33, altKey: true}; // Alt+PageUp
altCommands.nextJump.keystroke = {keyCode: 34, altKey: true}; // Alt+PageDown

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

Since 4.0.0.
regionalOptionsobject[] See Localisation tab The set of regional settings for the datepicker fields. Entries are indexed by the country/region code with '' providing the default (English) settings. Each entry is an object with the properties shown on the Localisation tab. Language packages load new entries into this array and automatically apply them as global defaults.

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

If necessary, you can then revert to the default language settings with

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

and apply the language settings to individual fields with code like the following:

$('#frenchDatepicker').datepick($.datepick.regionalOptions['fr']);

Check out the list of available localisation packages.

Since 5.0.0 - previously called regional.
Functions and Commands

changeDay | changeMonth | clear | destroy | disable | enable | errorPlacement | getDate | hide | isDisabled | isSelectable | multipleEvents | option (get) | option (set) | performAction | retrieveDate | selectDate | setDate | setDefaults | show | showMonth

SignatureReturnsComments
$.datepick.setDefaults(settings)Datepicker object Update the default instance settings to use with all datepicker instances.

settings (object) is the collection of new settings.

$.datepick.setDefaults({dateFormat: 'yyyy-mm-dd'});
$(selector).datepick('option', settings)jQuery object Update the instance settings for the datepicker instance(s) attached to the given field(s).

settings (object) is the collection of new settings.

$(selector).datepick('option', {firstDay: 1});
$(selector).datepick('option', name, value)jQuery object Update a setting for the datepicker instance(s) attached to the given field(s).

name (string) is the name of the setting;

value (any) is the new value, or null to reset to the default.

$(selector).datepick('option', 'firstDay', 1);
$(selector).datepick('option', name)object or any Retrieve one or all of the current settings for the first datepicker instance attached to the given field(s).

name (string, optional) the name of the setting to retrieve; omit for all settings.

var settings = $(selector).datepick('option');
var firstDay = $(selector).datepick('option', 'firstDay');

Since 3.5.2.
Since 4.0.0 - previously it was part of the 'option' command.
Since 4.1.0 - previously you used the 'options' command.
$(selector).datepick('destroy')jQuery object Remove the datepicker functionality from the given field(s).
$(selector).datepick('enable')jQuery object Enable the datepicker for the given field(s) as well as the field itself.
$(selector).datepick('disable')jQuery object Disable the datepicker for the given field(s) as well as the field itself.
$(selector).datepick('isDisabled')boolean Determine whether the datepicker functionality has been disabled for the first of the given field(s).
$(selector).datepick('show')jQuery object Pop up the datepicker for the given field.
$(selector).datepick('hide')jQuery object Hide the datepicker for the given field.
$(selector).datepick('getDate') Date[] Retrieve the currently selected date(s) from the datepicker for the first given field. An empty array is returned if no dates are selected. All dates have their time portion set to 12 noon. A date range datepicker always returns two dates, being the start and end of the range.

var dates = $(selector).datepick('getDate');

Since 4.0.4 - time portion is 12 noon.
$(selector).datepick('setDate', dates)jQuery object Set the currently selected dates for the given field(s).

dates (Date) is the new date, or (string) the date in the current dateFormat, or (number) the number of days from today, or (string) a series of amounts and periods from today, or ([]) an array of any of these formats. Provide an empty array to clear all dates or use the clear command. Any dates in excess of those allowed by the datepicker are ignored.

$(selector).datepick('setDate', new Date(2013, 1-1, 26));
$(selector).datepick('setDate', '01/26/2013');
$(selector).datepick('setDate', '+1m'); // Today + 1 month
$(selector).datepick('setDate', 7); // Today + 7 days
$(selector).datepick('setDate',
    [new Date(2013, 1-1, 26), '+1m', 7]);

Since 3.7.0 - added date string.
Since 3.7.1 - added relative to current.
Since 3.7.2 - omit dates to clear all dates.
$(selector).datepick('setDate', startDate, endDate)jQuery object Set the currently selected date range for the given field(s).

startDate (see above) is the starting date for the date range.

endDate (see above) is the ending date for the date range.

$(selector).datepick('setDate',
    new Date(2013, 1-1, 26), new Date(2014, 1-1, 26));
$(selector).datepick('setDate', 7, '+1m');
$(selector).datepick('clear')jQuery object Clear the currently selected dates for the given field(s).

Since 4.0.0.
$(selector).datepick('isSelectable', date)boolean Determine whether a date is selectable for this datepicker. It checks against any minDate, maxDate, and/or onDate options that have been set.

date (Date or string or number, optional) the date to check. This may be specified as an actual date (Date), as a date string in the current dateFormat, as a number of days relative to today, or as a string of offsets and periods relative to today. For the last use 'y' for years, 'm' for months, 'w' for weeks, or 'd' for days. Multiple offsets may be combined in the one string. Omit to use the currently selected date, or today if none selected.

Since 4.0.3.
$(selector).datepick('performAction', name)jQuery object Execute a named command for a datepicker.

name (string) the name of the command.

$(selector).datepick('performAction', 'today');

Since 4.0.0.
$(selector).datepick('showMonth', year, month, day)jQuery object Change the displayed month to a specified month and year. If no month and year are given, today's month is shown.

year (number, optional) the year to show.

month (number, optional) the month (1-12) to show.

day (number, optional) the day to highlight initially - if omitted it defaults to the previously highlighted day.

$(selector).datepick('showMonth', 2013, 1);

Since 4.0.0.
$(selector).datepick('changeMonth', offset)jQuery object Change the displayed month by moving a number of months ahead or behind.

offset (number) the number of months to move.

$(selector).datepick('changeMonth', -6);

Since 4.0.0.
$(selector).datepick('changeDay', offset)jQuery object Change the cursor day by moving a number of days ahead or behind.

offset (number) the number of days to move.

$(selector).datepick('changeDay', -14);

Since 4.0.0.
$(selector).datepick('retrieveDate', element) Date Retrieve the date associated with a particular day element (a or span) within a datepicker.

element (element) the day element to extract the date from.

Since 4.0.0.
$(selector).datepick('selectDate', element)jQuery object Select the date associated with a particular day element (a or span) within a datepicker.

element (element) the day element to extract the date from.

Since 4.0.0.
$.datepick.multipleEvents(fns)function Allow multiple event handlers to be triggered by a single callback. The handlers are called in the order specified.

fns (function...) is the collection of event handlers.

$(selector).datepick({
    onShow: $.datepick.multipleEvents(
        $.datepick.changeFirstDay, $.datepick.showStatus)});

Since 4.0.0.
$.datepick.errorPlacement(error, element)- Correctly places a validation error message after any trigger button or icon (or before it if using a right-to-left localisation). It should be assigned as the errorPlacement setting for the validate call.

Since 3.5.1 - only available with the validation extension.
Datepicker Date Functions

There are a number of functions available on the $.datepick object to make it easier to work with dates.

add | day | dayOfYear | daysInMonth | determineDate | formatDate | iso8601Week | month | newDate | parseDate | today | year

SignatureReturnsComments
$.datepick.formatDate(format, date, settings) string Format a date into a string representation.

format (string, optional) is the format to apply, consisting of any combination of the specifications below or one of the predefined formats. If not specified, it uses the default format for all the datepickers.

  • d - day of month (no leading zero)
  • dd - day of month (two digit)
  • o - day of year (no leading zeros)
  • oo - day of year (three digit)
  • D - day name short
  • DD - day name long
  • w - week of year (no leading zero)
  • ww - week of year (two digit)
  • m - month of year (no leading zero)
  • mm - month of year (two digit)
  • M - month name short
  • MM - month name long
  • yy - year (two digit)
  • yyyy - year (four digit)
  • J - Julian date (days since January 1, 4713 BCE Greenwich noon)
  • @ - Unix timestamp (secs since 01/01/1970)
  • ! - Windows ticks (100ns since 01/01/0001)
  • '...' - literal text
  • '' - single quote

date (Date) is the date to format.

settings (object, optional) is any overrides for the formatting, being an object with the following attributes - all are optional with the default datepicker settings being used if they are not present:

    dayNames (string[]) is the full names of the days

    dayNamesShort (string[]) is the abbreviated names of the days

    monthNames (string[]) is the full names of the months

    monthNamesShort (string[]) is the abbreviated names of the months

    calculateWeek (function) is a function to determine the week of the year - it receives a Date as a parameter and returns a number being the corresponding week

var f = gc.formatDate('yyyy-mm-dd', date);
var f = gc.formatDate(
    '\'day\' d \'of\' MM \'in the year\' yyyy', date,
    {monthNames: ['1st month', '2nd month', ...]});

Since 3.5.2 - added Windows ticks.
Since 3.7.0 - added week of the year.
$.datepick.parseDate(format, value, settings) Date Convert a string representation into an actual date. The date has its time portion set to 12 noon.

format (string) is the format to apply. See the possibilities in the formatDate function, with the following addition:

  • * - ignore the remainder of the value

value (string) is the string to extract the date from.

settings (object, optional) is any overrides for the parsing, being an object with the following attributes - all are optional with the default datepicker settings being used if they are not present:

    dayNames (string[]) is the full names of the days

    dayNamesShort (string[]) is the abbreviated names of the days

    monthNames (string[]) is the full names of the months

    monthNamesShort (string[]) is the abbreviated names of the months

    shortYearCutoff (number or string) is the cutoff point for the current or previous century when using the shortened year format; if this is a string it is added to the current year value, e.g. '+10'

var date = gc.parseDate('yyyy-mm-dd', '2013-01-26');
var date = gc.parseDate(
    '\'day\' d \'of\' MM \'in the year\' yyyy',
    'day 26 of 1st month in the year 2013',
    {monthNames: ['1st month', '2nd month', ...]});

Since 4.0.4 - time portion is 12 noon.
Since 4.1.0 - name parsing is case-insensitive.
$.datepick.determineDate(dateSpec, defaultDate, currentDate, dateFormat, settings)Date Convert multiple representations of a date into an actual date. The date has its time portion set to 12 noon and is always a new date object.

dateSpec (Date) is the date to use or (number) is the offset in days from today or (string) is the date in the current format or (string) is one or more amounts and periods to offset from today. For the last use 'y' for years, 'm' for months, 'w' for weeks, or 'd' for days, e.g. '+1y +1d'. Prefix the value with 'c' to use the currentDate as the starting point instead of today.

defaultDate (Date) is the date to use if no other is specified. It may be null.

currentDate (Date, optional) is the current date to base 'c'-style offsets from. Today is used if this is not specified.

dateFormat (string, optional) is the dateFormat to use to check the dateSpec. If not specified, the default format for all datepickers is used.

settings (object, optional) is any overrides for the formatting. See the formatDate function for more details.

var date = gc.determineDate(+2);
var date = gc.determineDate('+2y -3w',
    gc.newDate(2001, 1, 1));
var date = gc.determineDate('2004-01-26',
    gc.newDate(2001, 1, 26), 'yyyy-mm-dd');

Since 4.0.0.
Since 4.0.4 - time portion is 12 noon.
Since 4.0.6 - always return a new date.
$.datepick.daysInMonth(year, month)number Calculate the number of days in the given month (1-31).

year (Date) is the date to get the month from or (number) the year.

month (number, optional) is the month (1-12). Omit if year is a Date.

var dim = $.datepick.daysInMonth(2014, 1);
var dim = $.datepick.daysInMonth($.datepick.today());

Since 4.0.0.
$.datepick.dayOfYear(year, month, day)number Calculate the day of the year for a given date (1-366).

year (Date) is the complete date or (number) the year.

month (number, optional) is the month (1-12). Omit if year is a Date.

day (number, optional) is the day. Omit if year is a Date.

var doy = $.datepick.dayOfYear(2014, 12, 25);
var doy = $.datepick.dayOfYear($.datepick.today());

Since 4.0.0.
$.datepick.iso8601Week(year, month, day)number Calculate the week of the year according to the ISO 8601 definition (1-53): weeks start on Monday; the first week of the year contains January 4. This is the default value for the calculateWeek setting.

year (Date) is the complete date or (number) the year.

month (number, optional) is the month (1-12). Omit if year is a Date.

day (number, optional) is the day. Omit if year is a Date.

var woy = $.datepick.iso8601Week(2014, 12, 25);
var woy = $.datepick.iso8601Week($.datepick.today());
$.datepick.today()Date Return today's date. The date has its time portion set to 12 noon.

var today = $.datepick.today();

Since 4.0.0.
Since 4.0.4 - time portion is 12 noon.
$.datepick.newDate(year, month, day)Date Create a new date or clone an existing one. The date has its time portion set to 12 noon.

year (Date) is the existing date or (number) the year.

month (number, optional) is the month (1-12). Omit if year is a Date.

day (number, optional) is the day. Omit if year is a Date.

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

Since 4.0.0.
Since 4.0.4 - time portion is 12 noon.
$.datepick.year(date, year)Date Set the year for a date. The updated date is returned.

date (Date) is the date to update.

year (number) is the new year.

$.datepick.year(d, 2001);
var millenium = $.datepick.day($.datepick.month(
    $.datepick.year(d, 2001), 1), 1);

Since 4.0.0.
$.datepick.month(date, month)Date Set the month for a date. The updated date is returned.

date (Date) is the date to update.

month (number) is the new month (1-12).

var dec = $.datepick.month(d, 12);

Since 4.0.0.
$.datepick.day(date, day)Date Set the day of the month for a date. The updated date is returned.

date (Date) is the date to update.

day (number) is the new day of the month.

var first = $.datepick.day(d, 1);

Since 4.0.0.
$.datepick.add(date, amount, period)Date Add a number of periods to a date. When adding months or years and the resulting month has fewer days than the original, the day of the month is reduced to the new maximum.

date (Date) is the date to update.

amount (number) is the number of periods to add, which may be negative.

period (string) is the type of period to add: 'y' for years, 'm' for months, 'w' for weeks, or 'd' for days.

$.datepick.add(d, 2, 'w');
$.datepick.add($.datepick.add(d, 1, 'm'), -1, 'd');

Since 4.0.0.

There are also several predefined date formats for the datepicker:

NameValueComments
ATOMyyyy-mm-ddRFC 3339/ISO 8601
COOKIED, dd M yyyy
FULLDD, MM d, yyyy
ISO_8601yyyy-mm-dd
JULIANJ
RFC_822D, d M yy
RFC_850DD, dd-M-yy
RFC_1036D, d M yy
RFC_1123D, d M yyyy
RFC_2822D, d M yyyy
RSSD, d M yyRFC 822
TICKS!
TIMESTAMP@
W3Cyyyy-mm-ddISO 8601
Datepicker Extensions

The functions shown below are available through the datepick.ext module. There are also several renderers available from this module.

changeFirstDay | highlightWeek | hoverCallback | monthNavigation | monthOnly | noWeekends | selectMonth | selectWeek | showStatus

SignatureReturnsComments
$.datepick.noWeekendsobject Attach this function to the onDate setting to not allow the selection of days on weekends.

$(selector).datepick({
    onDate: $.datepick.noWeekends});
$.datepick.changeFirstDay- Attach this function to the onShow setting to allow the first day of the week to be changed by clicking on the day column headers.

$(selector).datepick({
    onShow: $.datepick.changeFirstDay});

Since 4.0.0 - previously it was the changeFirstDay setting.
$.datepick.hoverCallback(onHover)- Attach this function to the onShow setting to provide a callback when hovering over a day.

onHover (function) is the callback function that receives the current date (Date) and a flag (boolean) indicating selectability as parameters on entry, and no parameters on exit, while this refers to the target input or division/span.

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

Since 4.0.0 - previously it was the onHover setting.
$.datepick.highlightWeek- Attach this function to the onShow setting to highlight the entire week when hovering over a day.

$(selector).datepick({
    onShow: $.datepick.highlightWeek});

Since 4.0.0 - previously it was the highlightWeek setting.
$.datepick.monthOnly- Attach this function to the onShow setting to only allow selection of a month as a whole. The date returned is the first day of the chosen month.

$(selector).datepick({
    onShow: $.datepick.monthOnly});

Since 4.0.0.
$.datepick.showStatus- Attach this function to the onShow setting to show a status bar beneath the month(s) and to redirect tooltip information to that area.

$(selector).datepick({
    onShow: $.datepick.showStatus});

Since 4.0.0 - previously it was the showStatus setting.
$.datepick.monthNavigation- Attach this function to the onShow setting to include links for each month and surrounding years above the month header to simplify navigation between months/years.

$(selector).datepick({changeMonth: false,
    onShow: $.datepick.monthNavigation});

Since 4.0.2.
$.datepick.selectWeek- Attach this function to the onShow setting to select the entire week when the associated week of the year entry is selected. You must use the weekOfYearRenderer or themeRollerWeekOfYearRenderer for this to work, and the datepicker should be set as a date range.

$(selector).datepick({rangeSelect: true,
    renderer: $.datepick.weekOfYearRenderer,
    onShow: $.datepick.selectWeek});

Since 4.0.0.
$.datepick.selectMonth- Attach this function to the onShow setting to select the entire month when the week of the year column header is selected. You must use the weekOfYearRenderer or themeRollerWeekOfYearRenderer for this to work, and the datepicker should be set as a date range.

$(selector).datepick({rangeSelect: true,
    renderer: $.datepick.weekOfYearRenderer,
    onShow: $.datepick.selectMonth});

Since 4.0.0.
Validation Integration

The 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.
Since 4.0.5 - combined validation rules into dpDate; previously there were also dpMinDate, dpMaxDate, and dpMinMaxDate, added dpCompareDate rule.

One new validation is defined (dpDate). It automatically handles date ranges (including checking that the start date is not after the end date) 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.

A second validation rule (dpCompareDate) lets you compare one date field with another date. This rule must be specified in the rules section of the validate call and be provided with a parameter to indicate the required comparison and the target date. Specify the comparison with any of the following: 'equal', 'eq', 'same', 'notEqual', 'ne', 'notSame', 'lessThan', 'lt', 'before', 'greaterThan', 'gt', 'after', 'notLessThan', 'ge', 'notBefore', 'notGreaterThan', 'le', 'notAfter'. Specify the target date as either the actual date (as a string in the current date format or a Date object), as 'today', or as another datepicker field (as a jQuery selector, jQuery collection, or DOM element). The two parameters can be combined into one string (if the latter is a string), be given as items in an array, or be given as an object with a single attribute named for the comparison and with a value of the target.

$('form').validate({
	rules: {
		field1: {
			dpCompareDate: 'before 12/25/2014'
		},
		field2: {
			dpCompareDate: ['ne', new Date(2014, 12 - 1, 25)]
		},
		field3: {
			dpCompareDate: {notLessThan: '#otherField'}
		}
	});

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

You can customise the error messages via the datepicker defaults: $.datepick.setDefaults({...}). The message fields are validateDate, validateDateMin, validateDateMax, validateDateMinMax, validateDateCompare, validateDateToday, validateDateOther, validateDateEQ, validateDateNE, validateDateLT, validateDateGT, validateDateLE, and validateDateGE. Within these messages '{n}' mark substitution points.

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 and last by including the dpDate class on the fields. For the middle one the validation is defined in the validate call on the form, along with a required setting. Also note that a custom message is defined for the date range field.

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

	$('#validateForm').validate({
		errorPlacement: $.datepick.errorPlacement,
		rules: {
			holidayDates: {
				required: true,
				dpDate: true
			}
		},
		messages: {
			holidayDates: 'Please enter a valid date range'
		}
	});
});
</script>
</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"/></p>
		<p>Date of birth: <input type="text" id="birthDate"
			name="birthDate" size="10" class="dpDate"/></p>
	</form>
</body>
Compatibility

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