Interface Datepicker

Hierarchy

Callable

  • __call(methodName: string): JQuery
  • __call(options: WidgetOptions): JQuery
  • __call(options: AccordionOptions): JQuery
  • __call(optionLiteral: string, optionName: string): any
  • __call(optionLiteral: string, options: WidgetOptions): any
  • __call(optionLiteral: string, optionName: string, optionValue: any): JQuery
  • __call<T>(name: string, prototype: T & ThisType<T & WidgetCommonProperties>): JQuery
  • __call<T>(name: string, base: Function, prototype: T & ThisType<T & WidgetCommonProperties>): JQuery
  • Parameters

    • methodName: string

    Returns JQuery

  • Parameters

    Returns JQuery

  • Parameters

    Returns JQuery

  • Parameters

    • optionLiteral: string
    • optionName: string

    Returns any

  • Parameters

    Returns any

  • Parameters

    • optionLiteral: string
    • optionName: string
    • optionValue: any

    Returns JQuery

  • Type parameters

    • T

    Parameters

    Returns JQuery

  • Type parameters

    • T

    Parameters

    Returns JQuery

Index

Properties

Optional altField

altField: any

An input element that is to be updated with the selected date from the datepicker. Use the altFormat option to change the format of the date within this field. Leave as blank for no alternate field.

Optional altFormat

altFormat: string | undefined

The dateFormat to be used for the altField option. This allows one date format to be shown to the user for selection purposes, while a different format is actually sent behind the scenes. For a full list of the possible formats see the formatDate function

Optional appendText

appendText: string | undefined

The text to display after each date field, e.g., to show the required format.

Optional autoSize

autoSize: boolean | undefined

Set to true to automatically resize the input field to accommodate dates in the current dateFormat.

Optional autohide

autohide: boolean | undefined

Set to true to automatically hide the datepicker.

Optional beforeShow

beforeShow: function | undefined

A function that takes an input field and current datepicker instance and returns an options object to update the datepicker with. It is called just before the datepicker is displayed.

Optional beforeShowDay

beforeShowDay: function | undefined

A function that takes a date as a parameter and must return an array with: [0]: true/false indicating whether or not this date is selectable [1]: a CSS class name to add to the date's cell or "" for the default presentation [2]: an optional popup tooltip for this date The function is called for each day in the datepicker before it is displayed.

Optional buttonImage

buttonImage: string | undefined

A URL of an image to use to display the datepicker when the showOn option is set to "button" or "both". If set, the buttonText option becomes the alt value and is not directly displayed.

Optional buttonImageOnly

buttonImageOnly: boolean | undefined

Whether the button image should be rendered by itself instead of inside a button element. This option is only relevant if the buttonImage option has also been set.

Optional buttonText

buttonText: string | undefined

The text to display on the trigger button. Use in conjunction with the showOn option set to "button" or "both".

Optional calculateWeek

calculateWeek: function | undefined

A function to calculate the week of the year for a given date. The default implementation uses the ISO 8601 definition: weeks start on a Monday; the first week of the year contains the first Thursday of the year.

Optional changeMonth

changeMonth: boolean | undefined

Whether the month should be rendered as a dropdown instead of text.

Optional changeYear

changeYear: boolean | undefined

Whether the year should be rendered as a dropdown instead of text. Use the yearRange option to control which years are made available for selection.

Optional closeText

closeText: string | undefined

The text to display for the close link. Use the showButtonPanel option to display this button.

Optional constrainInput

constrainInput: boolean | undefined

When true, entry in the input field is constrained to those characters allowed by the current dateFormat option.

Optional currentText

currentText: string | undefined

The text to display for the current day link. Use the showButtonPanel option to display this button.

Optional dateFormat

dateFormat: string | undefined

The format for parsed and displayed dates. For a full list of the possible formats see the formatDate function.

Optional dayNames

dayNames: string[] | undefined

The list of long day names, starting from Sunday, for use as requested via the dateFormat option.

Optional dayNamesMin

dayNamesMin: string[] | undefined

The list of minimised day names, starting from Sunday, for use as column headers within the datepicker.

Optional dayNamesShort

dayNamesShort: string[] | undefined

The list of abbreviated day names, starting from Sunday, for use as requested via the dateFormat option.

Optional defaultDate

defaultDate: any

Set the date to highlight on first opening if the field is blank. Specify either an actual date via a Date object or as a string in the current dateFormat, or a number of days from today (e.g. +7) or a string of values and periods ('y' for years, 'm' for months, 'w' for weeks, 'd' for days, e.g. '+1m +7d'), or null for today. Multiple types supported: Date: A date object containing the default date. Number: A number of days from today. For example 2 represents two days from today and -1 represents yesterday. String: A string in the format defined by the dateFormat option, or a relative date. Relative dates must contain value and period pairs; valid periods are "y" for years, "m" for months, "w" for weeks, and "d" for days. For example, "+1m +7d" represents one month and seven days from today.

Optional duration

duration: string | undefined

Control the speed at which the datepicker appears, it may be a time in milliseconds or a string representing one of the three predefined speeds ("slow", "normal", "fast").

Optional endDate

endDate: Date | undefined

Set to date to automatically enddate the datepicker.

Optional firstDay

firstDay: number | undefined

Set the first day of the week: Sunday is 0, Monday is 1, etc.

Optional gotoCurrent

gotoCurrent: boolean | undefined

When true, the current day link moves to the currently selected date instead of today.

Optional hideIfNoPrevNext

hideIfNoPrevNext: boolean | undefined

Normally the previous and next links are disabled when not applicable (see the minDate and maxDate options). You can hide them altogether by setting this attribute to true.

Optional isRTL

isRTL: boolean | undefined

Whether the current language is drawn from right to left.

Optional maxDate

maxDate: any

The maximum selectable date. When set to null, there is no maximum. Multiple types supported: Date: A date object containing the maximum date. Number: A number of days from today. For example 2 represents two days from today and -1 represents yesterday. String: A string in the format defined by the dateFormat option, or a relative date. Relative dates must contain value and period pairs; valid periods are "y" for years, "m" for months, "w" for weeks, and "d" for days. For example, "+1m +7d" represents one month and seven days from today.

Optional minDate

minDate: any

The minimum selectable date. When set to null, there is no minimum. Multiple types supported: Date: A date object containing the minimum date. Number: A number of days from today. For example 2 represents two days from today and -1 represents yesterday. String: A string in the format defined by the dateFormat option, or a relative date. Relative dates must contain value and period pairs; valid periods are "y" for years, "m" for months, "w" for weeks, and "d" for days. For example, "+1m +7d" represents one month and seven days from today.

Optional monthNames

monthNames: string[] | undefined

The list of full month names, for use as requested via the dateFormat option.

Optional monthNamesShort

monthNamesShort: string[] | undefined

The list of abbreviated month names, as used in the month header on each datepicker and as requested via the dateFormat option.

Optional navigationAsDateFormat

navigationAsDateFormat: boolean | undefined

Whether the prevText and nextText options should be parsed as dates by the formatDate function, allowing them to display the target month names for example.

Optional nextText

nextText: string | undefined

The text to display for the next month link. With the standard ThemeRoller styling, this value is replaced by an icon.

Optional numberOfMonths

numberOfMonths: any

The number of months to show at once. Multiple types supported: Number: The number of months to display in a single row. Array: An array defining the number of rows and columns to display.

Optional onChangeMonthYear

onChangeMonthYear: function | undefined

Called when the datepicker moves to a new month and/or year. The function receives the selected year, month (1-12), and the datepicker instance as parameters. this refers to the associated input field.

Optional onClose

onClose: function | undefined

Called when the datepicker is closed, whether or not a date is selected. The function receives the selected date as text ("" if none) and the datepicker instance as parameters. this refers to the associated input field.

Optional onSelect

onSelect: function | undefined

Called when the datepicker is selected. The function receives the selected date as text and the datepicker instance as parameters. this refers to the associated input field.

Optional prevText

prevText: string | undefined

The text to display for the previous month link. With the standard ThemeRoller styling, this value is replaced by an icon.

regional

regional: object

Type declaration

  • [languageCod3: string]: any

Optional selectOtherMonths

selectOtherMonths: boolean | undefined

Whether days in other months shown before or after the current month are selectable. This only applies if the showOtherMonths option is set to true.

Optional shortYearCutoff

shortYearCutoff: any

The cutoff year for determining the century for a date (used in conjunction with dateFormat 'y'). Any dates entered with a year value less than or equal to the cutoff year are considered to be in the current century, while those greater than it are deemed to be in the previous century. Multiple types supported: Number: A value between 0 and 99 indicating the cutoff year. String: A relative number of years from the current year, e.g., "+3" or "-5".

Optional showAnim

showAnim: string | undefined

The name of the animation used to show and hide the datepicker. Use "show" (the default), "slideDown", "fadeIn", any of the jQuery UI effects. Set to an empty string to disable animation.

Optional showButtonPanel

showButtonPanel: boolean | undefined

Whether to display a button pane underneath the calendar. The button pane contains two buttons, a Today button that links to the current day, and a Done button that closes the datepicker. The buttons' text can be customized using the currentText and closeText options respectively.

Optional showCurrentAtPos

showCurrentAtPos: number | undefined

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

Optional showMonthAfterYear

showMonthAfterYear: boolean | undefined

Whether to show the month after the year in the header.

Optional showOn

showOn: string | undefined

When the datepicker should appear. The datepicker can appear when the field receives focus ("focus"), when a button is clicked ("button"), or when either event occurs ("both").

Optional showOptions

showOptions: any

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

Optional showOtherMonths

showOtherMonths: boolean | undefined

Whether to display dates in other months (non-selectable) at the start or end of the current month. To make these days selectable use the selectOtherMonths option.

Optional showWeek

showWeek: boolean | undefined

When true, a column is added to show the week of the year. The calculateWeek option determines how the week of the year is calculated. You may also want to change the firstDay option.

Optional stepMonths

stepMonths: number | undefined

Set how many months to move when clicking the previous/next links.

Optional weekHeader

weekHeader: string | undefined

The text to display for the week of the year column heading. Use the showWeek option to display this column.

Optional yearRange

yearRange: string | undefined

The range of years displayed in the year drop-down: either relative to today's year ("-nn:+nn"), relative to the currently selected year ("c-nn:c+nn"), absolute ("nnnn:nnnn"), or combinations of these formats ("nnnn:-nn"). Note that this option only affects what appears in the drop-down, to restrict which dates may be selected use the minDate and/or maxDate options.

Optional yearSuffix

yearSuffix: string | undefined

Additional text to display after the year in the month headers.

Methods

formatDate

iso8601Week

  • iso8601Week(date: Date): number
  • Parameters

    • date: Date

    Returns number

noWeekends

  • noWeekends(date: Date): any[]
  • Parameters

    • date: Date

    Returns any[]

parseDate

setDefaults