Web Development with jQuery (2015)

Datepicker Methods

Method

Description

Return Value

datepicker(options)

Makes the selected elements into Datepickers (see “Datepicker Options”).

jQuery

datepicker('destroy')

Destroys the Datepicker.

jQuery

datepicker('dialog', date[, onSelect][, settings][, pos])

Opens a Datepicker in a dialog box.

jQuery

datepicker('getDate')

Retrieves the current date(s) for a Datepicker.

Date

datepicker('hide', speed)

Closes a previously open Datepicker.

jQuery

datepicker('isDisabled')

Determines whether a Datepicker field has been disabled.

Boolean

datepicker('option')

Returns an object of all options as key, value pairs.

Object

datepicker('option', optionName)

Returns the specified option.

Mixed

datepicker('option', optionName,value)

Sets the specified option to the specified value.

jQuery

datepicker('option',optionObject)

Sets options using an option object.

jQuery

datepicker('setDate', date,endDate)

Sets the current date(s) for a Datepicker.

jQuery

datepicker('show')

Opens a Datepicker.

jQuery

datepicker('widget')

Returns a jQuery object containing the Datepicker.

jQuery

Datepicker Options

Option

Description

Type

altField

The jQuery selector for another field that is to be updated with the selected date from the Datepicker. Use the altFormat setting below to change the format of the date within this field. Leave as blank for no alternative field.
Default value: "

String

altFormat

The dateFormat to be used for the altField above. This allows one date format to be shown to the user for selection purposes, whereas a different format is actually sent behind the scenes.
Default value: "

String

appendText

The text to display after each date field, for example, to show the required format.
Default value: "

String

autoSize

Set to true to automatically resize the input field to accommodate dates in the current dateFormat.
Default value: false

Boolean

beforeShow

Can be a function that takes an input field and current Datepicker instance and returns a settings (anonymous) object to update the Datepicker with. It is called just before the Datepicker is displayed.
Default value: null

function(input, obj)

beforeShowDay

The function takes a date as a parameter and must return an array, with [0] equal to true/false indicating whether this date is selectable, [1] equal to a CSS class name(s) or " for the default presentation. It is called for each day in the Datepicker before it is displayed.
Default value: null

function(date)

buttonImage

The URL for the pop-up button image. If set, button text becomes the alt value and is not directly displayed.
Default value: "

String

buttonImageOnly

Set to true to place an image after the field to use as the trigger without it appearing on a button.
Default value: false

Boolean

buttonText

The text to display on the trigger button. Use with showOn equal to 'button' or 'both'.
Default value: '...'

String

calculateWeek

Performs the week of the year calculation. This function accepts a Date as a parameter and returns the number of the corresponding week of the year. The default implementation uses the ISO 8601 definition of a week: Weeks start on a Monday, and the first week of the year contains January 4. This means that up to 3 days from the previous year may be included in the first week of the current year, and that up to 3 days from the current year may be included in the last week of the previous year.
Default value: $.datepicker.iso8601Week

function()

changeMonth

Whether the month should be rendered as a drop-down instead of as text.
Default value: false

Boolean

changeYear

Whether the year should be rendered as a drop-down instead of as text.
Default is value: false

Boolean

closeText

The text to display for the close link. Use the showButtonPanel option to display this button.
Default value: 'Done'

String

constrainInput

true if the input field is constrained to the current date format.
Default value: true

Boolean

currentText

The text to display for the current day link.
Default value: 'Today'

String

dateFormat

The format for parsed and displayed dates. For a full list of the possible formats, see “Format Options.”
Default value: 'mm/dd/yy'

String

dayNames

The list of long day names, starting from Sunday, for use as requested via the dateFormat setting. Day names also appear as pop-up hints when hovering over the corresponding column headings.
Default value: ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday']

Array

dayNamesMin

The list of minimized day names, starting from Sunday, for use as column headers within the Datepicker.
Default value: ['Su', 'Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa']

Array

dayNamesShort

The list of abbreviated day names, starting from Sunday, for use as requested via the dateFormat setting.
Default value: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']

Array

defaultDate

Sets the date to display on first opening if the field is blank. Specifies either an actual date via a Date object, or relative to today with a number (for example, +7) or a string of values and periods ('y' for years, 'm'for months, 'w' for weeks, 'd' for days; for example, '+1m +7d') or null for today.
Default value: null

Date, Number, String

duration

Controls the speed at which the Datepicker appears. It may be a time in milliseconds (ms), a string representing one of the three predefined speeds ('slow', 'normal', and 'fast') or " for immediately.
Default value: 'normal'

String, Number

firstDay

Sets the first day of the week: Sunday is 0, Monday is 1.
Default value: 0

Integer

gotoCurrent

If true, the current day link moves to the currently selected date instead of today.
Default value: false

Boolean

hideIfNoPrevNext

By default, the previous and next links are disabled with not applicable; setting this attribute to true hides them altogether.
Default value: false

Boolean

isRTL

true if the current language is drawn from right to left.
Default value: false

Boolean

maxDate

Sets a maximum selectable date via a Date object, or relative to today with a number (for example, +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, and 'd' for days; for example,'+1m +1w'), or null for no limit.
Default value: null

Number, String, Date

minDate

Sets a minimum selectable date via a Date object, or relative to today with a number (for example, +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days; for example, '-1y -1m'), or null for no limit.
Default value: null

Number, String, Date

monthNames

The list of full month names, as used in the month header on each Datepicker and as requested via the dateFormat setting.
Default value: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']

Array

monthNamesShort

The list of abbreviated month names, for use as requested via the dateFormat setting.
Default value: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']

Array

navigationAsDateFormat

When set to true, the formatDate function is applied to the prevText, nextText, and currentText values before display, allowing them to display the target month names, for example.
Default value: false

Boolean

nextText

The text to display for the next month link.
Default value: 'Next'

String

numberOfMonths

Sets how many months to show at once. The value can be a number, or it can be an array to define the number of rows and columns to display.
Default value: 1

Number, Array

onChangeMonth-Year

Allows you to define your own event when the Datepicker moves to a new month and/or year. The function receives the date of the first day of the first displayed month and the Datepicker instance as parameters. this refers to the associated input field.
Default value: null

function(year, month, inst)

onClose

Allows you to define your own event when the Datepicker is closed, regardless if a date is selected. The function receives the selected date(s) as a date or array of dates and the Datepicker instance as parameters.this refers to the associated input field.
Default value: null

function(dateText, inst)

onSelect

Allows you to define your own event when the Datepicker is selected. The function receives the selected date(s) as text and the Datepicker instance as parameters. this refers to the associated input field.
Default value: null

function(dateText, inst)

prevText

The text to display for the previous month link.
Default value: 'Prev'

String

select-OtherMonths

Displayed dates in other months shown before or after the current month are selectable.
Default value: false

Boolean

shortYearCutoff

Sets the cutoff year for determining the century for a date (used with dateFormat 'y'). If a numeric value (0–99) is provided, then this value is used directly. If a string value is provided, then it is converted to a number and added to the current year. When the cutoff year is calculated, any dates entered with a year value less than or equal to it are considered to be in the current century, whereas those greater than it are deemed to be in the previous century.
Default value: '+10'

String, Number

showAnim

Sets the name of the animation used to show/hide the Datepicker. Uses 'show' (the default), 'slideDown', and'fadeIn', or any of the show/hide jQuery UI effects.
Default value: 'show'

String

showButtonPanel

Whether to display a button pane underneath the calendar.
Default value: false

Boolean

showCurrent-AtPos

When displaying multiple months via the numberOfMonths option, the showCurrentAtPos option defines which position to display the current month in.
Default value: 0

Number

showMonth-AfterYear

Whether to show the month after the year in the header.
Default value: false

Boolean

showOn

Has the Datepicker appear automatically when the field receives focus, 'focus'; appear only when a button is clicked, 'button'; or appear when either event takes place, 'both'.
Default value: 'focus'

String

showOptions

If using one of the jQuery UI effects for showAnim, you can provide additional settings for that animation via this option.
Default value: {}

Options

showOtherMonths

Whether to display dates in other months (nonselectable) at the start or end of the current month. To make these dates selectable use the selectOtherMonths option.
Default value: false

Boolean

showWeek

Displays the week of the year alongside each month. The column header is specified by the weekHeader setting. The week number is calculated based on the first date shown in each row in the Datepicker and thus may not apply to all days in that row. The calculateWeek setting allows you to change the week of the year calculation from the default ISO 8601 implementation.
Default value: false

Boolean

stepMonths

Sets how many months to move when clicking the Previous/Next links.
Default value: 1

Number

weekHeader

The column header for the week of the year (see showWeeks).
Default value: 'wk'

String

yearRange

Controls the range of years displayed in the year drop-down. Sets a range of years relative to the current year '-nn:+nn', where n is the number of years forward or backward; or an arbitrary range of years'nnnn:nnnn', where n is the beginning and ending year.
Default value: 'c-10:c+10'

String

yearSuffix

Additional text to display after the year in the month headers.
Default value: "

String

Datepicker Utilities

Method

Description

Return Value

$.datepicker.formatDate(
format,
date,
options
)

Formats a date into a string value with a specified format. For the format argument, see “Format Options.” The optional options argument can be provided with an object literal of settings that include thedayNamesShort, dayNames, monthNamesShort, or monthNames options.

String

$.datepicker.iso8601Week(date)

Determines the week of the year for a given date: 1 to 53.

Number

$.datepicker.noWeekends

Used to set the beforeShowDay function with a predefined function that excludes weekends.

Function

$.datepicker.parseDate(
format,
value,
options
)

Extracts a date from a string value with a specified format. For the format option, see “Format Options.” The optional options argument can be provided with an object literal that includes the shortYearCutoff,dayNamesShort, dayNames, monthNamesShort, or monthNames options.

Date

$.datepicker.setDefaults(options)

Changes the default settings for all Datepickers. For the options argument, see “Datepicker Options.”

Datepicker

Format Options for $.DATEPICKER.FORMATDATE()

Option

Description

d

Day of the month with no leading zero

dd

Day of the month with leading zero

o

Day of the year (no leading zeros)

oo

Day of the year (three digit)

D

Day name short

DD

Day name long

m

Month of the year with no leading zero

mm

Month of the year with leading zero

M

Month name short

MM

Month name long

y

Two-digit year

yy

Four-digit year

@

UNIX timestamp (seconds elapsed since 01/01/1970)

...

Literal text

"

Single quote

Anything else

Literal text

ATOM

yy-mm-dd (same as RFC 3339/ISO 8601)

COOKIE

D, dd M yy

ISO_8601

yy-mm-dd

RFC_822

D, d M y

RFC_850

DD, dd-M-y

RFC_1036

D, d M y

RFC_1123

D, d M yy

RFC_2822

D, d M yy

RSS

D, d M y

TICKS

!

TIMESTAMP

@ (UNIX timestamp; seconds elapsed since 01/01/1970)

W3C

yy-mm-dd (same as ISO 8601)