A jQuery plugin that attaches a popup calendar to your input fields or shows an inline calendar for selecting individual dates or date ranges.

This page provides a documentation reference for working with the plugin v5.1.0. Download a copy for your own reference - just add jQuery JavaScript for full functionality.

See a demonstration of the datepicker plugin and download the code from there. Or see a minimal page that you could use as a basis for your own investigations.

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

Name Type Default Comments
pickerClass string '' 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.
showOnFocus boolean true 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.

showTrigger string or element or jQuery null 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.
showAnim string '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.
showOptions object {} 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'}});
showSpeed string 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 jQuery null 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.
alignment string '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 'bottomRight'. The first two options will reposition the datepicker if it does not fit in the requested space.

Since 3.7.0.

fixedWeeks boolean false 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.

calculateWeek function $.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; }
monthsToShow number 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.
monthsOffset number or function 0 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.
monthsToStep number 1 The number of months to move when the previous or next month commands are invoked.

Since 4.0.0 - previously it was stepMonths.

monthsToJump number 12 The number of months to move when the previous or next year commands are invoked.

Since 4.0.0 - previously it was stepBigMonths.

useMouseWheel boolean true 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.

changeMonth boolean true 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.

yearRange string '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.
shortYearCutoff string 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.

showOtherMonths boolean false Set to true to show the days in other months that appear in the partial weeks before or after the current month.
selectOtherMonths boolean false 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.
Date or number or string null 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.
boolean false 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.
Date or number or string null 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.
Date or number or string null 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.
autoSize boolean false 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.

rangeSelect boolean false 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.
rangeSeparator string ' - ' Specify the separator shown between the two dates in a date range.
multiSelect number 0 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.

multiSeparator string ',' Specify the separator shown between the dates selected in a multiple date datepicker.

Since 3.6.0.

function null 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.
onShow function null 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.
onChangeMonthYear function null 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); } });
onSelect function null 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.
onClose function null 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.
altField string or element or jQuery null 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'});
altFormat string null 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.
constrainInput boolean true Set to true to only allow the entry of characters specified by the dateFormat, or false to allow any characters.
boolean false 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.
commands object $.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.

Name Type Comments
text string The name of the localisation setting that provides the text value for this command.
status string The name of the localisation setting that provides the tooltip (status) value for this command.
keystroke object 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.

enabled function 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.
function 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.
action function 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.

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 | earlierText | firstDay | isRTL | laterText | monthNames | monthNamesShort | monthStatus | nextJumpStatus | nextJumpText | nextStatus | nextText | prevJumpStatus | prevJumpText | prevStatus | prevText | renderer | todayStatus | todayText | weekStatus | weekText | yearStatus

Name Type Default Comments
monthNames string[] ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'] The full names of the months.
monthNamesShort string[] ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'] The abbreviated names of the months.
dayNames string[] ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'] The full names of the days of the week, starting from Sunday.
dayNamesShort string[] ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'] The abbreviated names of the days of the week, starting from Sunday.
dayNamesMin string[] ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa'] The minimal names of the days of the week, starting from Sunday.
string '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});
firstDay number 0 The number of the first day of the week shown in the datepicker, with 0 being Sunday, 1 being Monday, etc.
renderer object $.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.
prevText string '<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});
prevStatus string 'Show the previous month' The tooltip text for the prev command.
prevJumpText string '<<' 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.

prevJumpStatus string 'Show the previous year' The tooltip text for the prevJump command.

Since 4.0.0 - previously it was prevBigStatus.

nextText string '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});
nextStatus string 'Show the next month' The tooltip text for the next command.
nextJumpText string '>>' 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.

nextJumpStatus string 'Show the next year' The tooltip text for the nextJump command.

Since 4.0.0 - previously it was nextBigStatus.

currentText string 'Current' The display text for the current command. Use the commandsAsDateFormat setting to format the text to show date information.
currentStatus string 'Show the current month' The tooltip text for the current command.
todayText string 'Today' The display text for the today command. Use the commandsAsDateFormat setting to format the text to show date information.
todayStatus string 'Show today\'s month' The tooltip text for the today command.
clearText string 'Clear' The display text for the clear command.
clearStatus string 'Clear all the dates' The tooltip text for the clear command.
closeText string 'Close' The display text for the close command.
closeStatus string 'Close the datepicker' The tooltip text for the close command.
yearStatus string 'Change the year' The tooltip text for the year drop-down.
earlierText string '&#160;&#160;▲' The display text for previous years in the year drop-down.

Since 5.0.1.

laterText string '&#160;&#160;▼' The display text for following years in the year drop-down.

Since 5.0.1.

monthStatus string 'Change the month' The tooltip text for the month drop-down.
weekText string 'Wk' The display text for the week of the year column header.
weekStatus string 'Week of the year' The tooltip text for the week of the year column header.
dayStatus string '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.

defaultStatus string '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.

isRTL boolean false 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

Name Type Comments
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.

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.

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.

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

Name Module Comments
defaultRenderer datepick The standard renderer. Match it with the standard datepicker CSS.
weekOfYearRenderer datepick.ext The standard renderer enhanced to include a column for week of the year. Match it with the standard datepicker CSS.
themeRollerRenderer datepick.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.
themeRollerWeekOfYearRenderer datepick.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

Name Type Default Comments
commands object[] 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.
regionalOptions object[] 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

Signature Returns Comments
$.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.
jQuery object Hide the datepicker for the given field.
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.
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.
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.

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

Signature Returns Comments
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.
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.
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.
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:

Name Value Comments
ATOM yyyy-mm-dd RFC 3339/ISO 8601
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 RFC 822
TICKS !
TIMESTAMP @
W3C yyyy-mm-dd ISO 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

Signature Returns Comments
$.datepick.noWeekends object 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.
- 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:

  • dateFormat years have changed: use 'yy' for two digit year or 'yyyy' for four digit year.
  • showOn, buttonText, buttonImage, and buttonImageOnly settings are replaced by showOnFocus and showTrigger settings. $(selector).datepick({showOn: 'button'}); becomes $(selector).datepick({showOnFocus: false, showTrigger: '<button>...</button>'}); and $(selector).datepick({showOn: 'both', buttonImage: 'img/mycal.gif', buttonImageOnly: true}); becomes $(selector).datepick({showTrigger: '<img src="img/mycal.gif" alt="..."></img>'});
  • duration setting is replaced by the showSpeed setting.
  • numberOfMonths setting is replaced by the monthsToShow setting and showCurrentAtPos setting is replaced by the monthsOffset setting.
  • stepMonths setting is replaced by the monthsToStep setting and stepBigMonths setting is replaced by the monthsToJump setting.
  • changeYear setting is no longer available while the changeMonth setting now controls both drop-downs.
  • showDefault setting is replaced by the selectDefaultDate setting.
  • closeAtTop, gotoCurrent, mandatory, showBigPrevNext, and showMonthAfterYear settings are no longer available but the same functionality can be achieved with the renderer setting.
  • hideIfNoPrevNext setting is no longer available but the same functionality can be achieved with the pickerClass setting and some CSS.
  • navigationAsDateFormat setting is replaced by the commandsAsDateFormat setting.
  • onClose and onSelect functions only receive an array of Date objects as a parameter.
  • appendText setting is no longer available but the same functionality can be achieved using normal jQuery.
  • useThemeRoller setting is no longer available but the same functionality can be achieved with the renderer setting and the themeRollerRenderer object in the extension module. $(selector).datepick({useThemeRoller: true}); becomes $(selector).datepick({renderer: $.datepick.themeRollerRenderer});
  • beforeShowDay setting is replaced by onDate setting and returns an object with attributes instead of an array. $(selector).datepick({beforeShowDay: highlightDays}); function highlightDays(date) { return [true, 'highlight', 'tooltip']; } becomes $(selector).datepick({onDate: highlightDays}); function highlightDays(date) { return {selectable: true, dateClass: 'highlight', title: 'tooltip'}; }
  • beforeShow setting is no longer available but similar functionality can be achieved by using the option command at an earlier time.
  • changeFirstDay setting is no longer available but the same functionality can be achieved with the onShow setting and the changeFirstDay function in the extension module. $(selector).datepick({changeFirstDay: true}); becomes $(selector).datepick({onShow: $.datepick.changeFirstDay});
  • showWeeks setting is no longer available but the same functionality can be achieved with the renderer setting and the weekOfYearRenderer object in the extension module. $(selector).datepick({showWeeks: true}); becomes $(selector).datepick({renderer: $.datepick.weekOfYearRenderer});
  • highlightWeek setting is no longer available but the same functionality can be achieved with the onShow setting and the highlightWeek function in the extension module. $(selector).datepick({highlightWeek: true}); becomes $(selector).datepick({onShow: $.datepick.highlightWeek});
  • onHover setting is no longer available but the same functionality can be achieved with the onShow setting and the hoverCallback function in the extension module. $(selector).datepick({onHover: hoveringOver}); becomes $(selector).datepick({onShow: $.datepick.hoverCallback(hoveringOver)});
  • showStatus setting is no longer available but the same functionality can be achieved with the onShow setting and the showStatus function in the extension module. $(selector).datepick({showStatus: true}); becomes $(selector).datepick({onShow: $.datepick.showStatus});
  • Opening the datepicker in a dialog is no longer available but the same functionality can be achieved by combining the datepicker with the jQuery UI Dialog plugin.

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

© 2009-15, Keith Wood Valid HTML 5



Related news

Le cirque du soleil geneva tourism
Para que sirve el folivital 4mg
Que es una barra toolbar for firefox
Moda mini charm packs ukraine
Les comedies romantiques a voir imparfait
Niza moda coleccion primavera verano 2019
Siebengebirge sieben berge tourniquet
Moda style brenton
Hoje eu quero trair minha namorada download skype