Options
All
  • Public
  • Public/Protected
  • All
Menu

The date picker instance used by the JQuery UI widget. You can retrieve it via $(...).datePicker("instance").

Hierarchy

Index

Properties

Methods

Properties

bindings

bindings: JQuery<HTMLElement>

container

container: JQuery<HTMLElement>

The container element of the date picker.

defaultElement

defaultElement: string

document

document: Document

element

eventNamespace

eventNamespace: string

Namespace for event triggered by this widget.

focusable

focusable: JQuery<HTMLElement>

The DOM element that is focusable.

hasCustomYearRange

hasCustomYearRange: boolean

Whether a custom year range was specified.

hoverable

hoverable: JQuery<HTMLElement>

The DOM element that is hoverable.

inputfield

inputfield: JQuery<HTMLElement>

The hidden input field containing the currently selected value.

mask

mask: null | JQuery<HTMLElement>

Mask for the modal overlay.

monthsMetadata

monthsMetadata: DayListInMonth[]

List of all days in the current year.

namespace

namespace: string

options

options: PickerOptions

The current options of this widget instance.

panel

The panel element of the date picker.

ticksTo1970

ticksTo1970: number

Number of microseconds since January 1, 1970.

Optional transition

transition?: null | CssTransitionHandler

Handler for CSS transitions used by this date picker.

Optional triggerButton

triggerButton?: JQuery<HTMLElement>

Trigger button that opens or closes the date picker.

uuid

uuid: string

value

value: Date | Date[]

The currently selected date time, list of date times, or date time range.

viewDate

viewDate: Date | Date[]

The currently displayed date or dates.

widgetEventPrefix

widgetEventPrefix: string

widgetFullName

widgetFullName: string

window

window: Window

Methods

alignPanel

  • alignPanel(): void
  • If the date picker is shown in an overlay panel, adjusts the position of that overlay panel so that is shown at its proper location.

    Returns void

bindDocumentClickListener

  • bindDocumentClickListener(): void

clearTimePickerTimer

  • clearTimePickerTimer(): void

createMonth

  • createMonth(month: number, year: number, index: number): DayListInMonth
  • Creates a list of all days in the given month.

    Parameters

    • month: number

      A month to check.

    • year: number

      A year to check.

    • index: number

      Index that will be included in the return value.

    Returns DayListInMonth

    All days in the given month.

createMonths

  • Creates a list of all days in the year, starting at the given month.

    Parameters

    • month: number

      Month where to start. Months before that are not included in the returned list.

    • year: number

      Year to check.

    Returns DayListInMonth[]

    A list with all days in the year, starting at the given month.

createWeekDays

  • createWeekDays(): string[]

createWeekDaysMin

  • createWeekDaysMin(): string[]

createWeekDaysShort

  • createWeekDaysShort(): string[]

daylightSavingAdjust

decrementHour

decrementMillisecond

decrementMinute

decrementSecond

disableModality

  • disableModality(): void
  • Removes the modality feature from the overlay panel so that other elements in the page can be interacted with while the overlay date picker is shown.

    Returns void

enableModality

  • enableModality(): void
  • Makes the overlay panel a modal dialog so that other elements in the page cannot be interacted with while the overlay date picker is shown.

    Returns void

escapeHTML

  • escapeHTML(value: string): string
  • Escapes characters that have a special meaning in HTML, so that the given value can be used safely as a value in an HTML attribute or text node.

    Parameters

    • value: string

      Value to escape.

    Returns string

    The given value, escaped for use in an HTML attribute or text node.

formatDate

  • formatDate(date: undefined | Date, format: string): string
  • Formats the given point in time as a string, omitting the time part.

    Parameters

    • date: undefined | Date

      A point in time to format.

    • format: string

      Date format to use.

    Returns string

    A textual representation of the given point in time, including the date but omitting the time part.

formatDateTime

  • formatDateTime(date: undefined | Date): null | string
  • Formats the given point in time as a string with a date and a time.

    Parameters

    • date: undefined | Date

      A point in time to format.

    Returns null | string

    A textual representation of the given point in time, with a date and a time part.

formatTime

  • formatTime(date: undefined | Date): string
  • Formats the given point in time as a string, omitting the date part.

    Parameters

    • date: undefined | Date

      A point in time to parse.

    Returns string

    A text represent of the given point in time, including the time part but omitting the date part.

getClassesToAdd

  • getClassesToAdd(classes: string[]): string
  • Joins the given style class names for use in the HTML class attribute.

    Parameters

    • classes: string[]

      List of style classes.

    Returns string

    The given classes, joined with a space.

getDate

  • getDate(): null | "" | Date
  • Retrieves the currently selected date of this date picker.

    Returns null | "" | Date

    The currently selected date.

getDaysCountInMonth

  • getDaysCountInMonth(month: number, year: number): number
  • Finds the number of day in the given month.

    Parameters

    • month: number

      Month to check.

    • year: number

      Year to check.

    Returns number

    The number of days in the given month.

getDaysCountInPrevMonth

  • getDaysCountInPrevMonth(month: number, year: number): number
  • Finds the number of day in month before the given month.

    Parameters

    • month: number

      Month to check.

    • year: number

      Year to check.

    Returns number

    The number of days in month before the given month.

getFirstDayOfMonthIndex

  • getFirstDayOfMonthIndex(month: number, year: number): number
  • Finds the day of the week index that represents the first day of the week for the given month.

    Parameters

    • month: number

      Month to check.

    • year: number

      Year to check.

    Returns number

    The day of the week index that represents the first day of the week for the given month.

getNextMonthAndYear

  • getNextMonthAndYear(month: number, year: number): MonthInstant
  • Finds the month of the year index and year index of the month succeeding the given month.

    Parameters

    • month: number

      Month to check.

    • year: number

      Year to check.

    Returns MonthInstant

    The month after the given month.

getPreviousMonthAndYear

  • getPreviousMonthAndYear(month: number, year: number): MonthInstant

getSundayIndex

  • getSundayIndex(): number
  • Finds the day of the week index that represents sunday.

    Returns number

    The day of the week index that represents sunday.

getValueToRender

  • getValueToRender(): string
  • Finds the formatted date or time string that is to be shown as the currently selected date or time.

    Returns string

    The currently selected date or time, formatted according to the current options.

handleHoursInput

handleMillisecondsInput

handleMinutesInput

handleSecondsInput

hideOverlay

  • hideOverlay(): void

incrementHour

incrementMillisecond

incrementMinute

incrementSecond

isDate

  • isDate(value: unknown): value is Date
  • Parameters

    • value: unknown

      A value to check whether it is a Date instance.

    Returns value is Date

    true if the value is an instance of Date, and false otherwise.

isDateBetween

  • Checks whether the given date lies in the given range.

    Parameters

    • start: undefined | Date

      Start point of the date range.

    • end: undefined | Date

      End point of the date range.

    • dateMeta: DayInstantSelectable

      Date to check whether it lies in the given range.

    Returns boolean

    true if the given date lies in the range [start, end] (inclusive), or false otherwise.

isDateDisabled

  • isDateDisabled(day: number, month: number, year: number): boolean
  • Checks whether the given date is currently disabled and cannot be selected.

    Parameters

    • day: number

      Day to check.

    • month: number

      Month to check.

    • year: number

      Year to check.

    Returns boolean

    Whether the given date is currently disabled and cannot be selected.

isDateEquals

  • Checks whether the given date equals the other given date.

    Parameters

    Returns boolean

    true if both given values represent the same date, or false otherwise.

isDayDisabled

  • isDayDisabled(day: number, month: number, year: number): boolean
  • Checks whether the given day is currently disabled and cannot be selected.

    Parameters

    • day: number

      Day to check.

    • month: number

      Month to check.

    • year: number

      Year to check.

    Returns boolean

    Whether the given day is currently disabled and cannot be selected.

isInMaxYear

  • isInMaxYear(): boolean

isInMinYear

  • isInMinYear(): boolean

isMonthSelected

  • isMonthSelected(month: number): boolean
  • Checks whether the given month is currently selected.

    Parameters

    • month: number

      A month to check.

    Returns boolean

    Whether the given month is currently selected.

isMultipleSelection

  • isMultipleSelection(): boolean

isPanelVisible

  • isPanelVisible(): boolean

isRangeSelection

  • isRangeSelection(): boolean

isSelectable

  • isSelectable(day: number, month: number, year: number, otherMonth: boolean): boolean
  • Checks whether thee given day can be selected.

    Parameters

    • day: number

      A day to check.

    • month: number

      A month to check.

    • year: number

      A year to check.

    • otherMonth: boolean

      Whether the given month belongs to another month other than the currently displayed month. See PickerOptions.selectOtherMonths.

    Returns boolean

isSelected

isSingleSelection

  • isSingleSelection(): boolean

isToday

  • isToday(today: Date, day: number, month: number, year: number): boolean
  • Checks whether the given date is equal to the current date.

    Parameters

    • today: Date

      The date of today.

    • day: number

      Day to check.

    • month: number

      Month to check.

    • year: number

      Year to check.

    Returns boolean

    true if the given today represents the same date as the given day, month, and year.

navBackward

navForward

onButtonClick

onClearButtonClick

onDateSelect

onInputBlur

onInputClick

onInputFocus

onInputKeyDown

onMonthDropdownChange

  • onMonthDropdownChange(event: TriggeredEvent<any, any, any, any>): void

onMonthSelect

  • onMonthSelect(event: TriggeredEvent<any, any, any, any>, month: number): void
  • Callback that is invoked when a different month was selected by clicking on that month.

    Parameters

    • event: TriggeredEvent<any, any, any, any>

      Event that occurred.

    • month: number

      Month that was selected.

    Returns void

onPanelClick

onTimePickerElementMouseDown

onTimePickerElementMouseUp

  • onTimePickerElementMouseUp(event: TriggeredEvent<any, any, any, any>): void

onTodayButtonClick

onUserInput

onYearDropdownChange

parseDate

  • parseDate(value: string, format: string): Date
  • Parses a string with a date (but no time).

    Parameters

    • value: string

      The date string to parse.

    • format: string

      The format to use for parsing.

    Returns Date

    The parsed date.

parseDateTime

  • parseDateTime(text: string): Date

parseMinMaxValue

parseOptionValue

  • parseOptionValue(option: string): Date

parseTime

parseValue

  • Parses a string that either represents a date time, a list of date times, or a date time range, depending on the current PickerOptions.selectionMode setting.

    When the given value is a date time, a list of date times, or a date time range already, returns that value unchanged.

    Parameters

    Returns Date | Date[]

    The parsed date time, date times, or date time range.

parseValueFromString

  • parseValueFromString(text: string): Date | Date[]
  • Parses a string that either represent a date time, a list of date times, or a date time range, depending on the current PickerOptions.selectionMode setting.

    Parameters

    • text: string

      The string with the date time, date times, or date time range to parse.

    Returns Date | Date[]

    The parsed date time, date times, or date time range.

populateTime

renderAmPmPicker

  • renderAmPmPicker(): string
  • Creates the HTML snippet for the picker that lets the user choose between a.m. and p.m..

    Returns string

    The rendered HTML snippet.

renderBackwardNavigator

  • renderBackwardNavigator(): string

renderButtonBar

  • renderButtonBar(): string
  • Creates the HTML snippet for the button bar with the today and clear buttons.

    Returns string

    The rendered HTML snippet.

renderDateCellContent

renderDatePickerPanel

  • renderDatePickerPanel(): void

renderDateView

  • renderDateView(): string
  • Creates the HTML snippet for the date view that shows the current month page.

    Returns string

    The rendered HTML snippet.

renderDateViewGrid

  • renderDateViewGrid(monthMetadata: DayListInMonth, weekDaysMin: string[], weekDays: string[]): string
  • Creates the HTML snippet for the date view grid of the given month.

    Parameters

    • monthMetadata: DayListInMonth

      Month to use.

    • weekDaysMin: string[]

      List of super short week day names.

    • weekDays: string[]

      List of long week names.

    Returns string

    The rendered HTML snippet.

renderDates

renderDayNames

  • renderDayNames(weekDaysMin: string[], weekDays: string[]): string
  • Creates the HTML snippet for the names of the given days.

    Parameters

    • weekDaysMin: string[]

      List of super short week day names.

    • weekDays: string[]

      List of long week day names.

    Returns string

    The rendered HTML snippet.

renderForwardNavigator

  • renderForwardNavigator(): string

renderFractionSeparator

  • renderFractionSeparator(): string

renderHourPicker

  • renderHourPicker(): string

renderMillisecondPicker

  • renderMillisecondPicker(): string

renderMinutePicker

  • renderMinutePicker(): string

renderMonth

  • Creates the HTML snippet for the given days in a month.

    Parameters

    • monthMetadata: DayListInMonth

      List of days to render

    • index: number

      Month to which the days belong.

    Returns string

    The rendered HTML snippet.

renderMonthView

  • renderMonthView(): string
  • Creates the HTML snippet for the month view with the days in the current month.

    Returns string

    The rendered HTML snippet.

renderMonthViewMonth

  • renderMonthViewMonth(index: number): string
  • Creates the HTML snippet for the month part of the month view.

    Parameters

    • index: number

      Month to use.

    Returns string

    The rendered HTML snippet.

renderMonthViewMonths

  • renderMonthViewMonths(): string

renderMonths

renderPanelElements

  • renderPanelElements(): string

renderSecondPicker

  • renderSecondPicker(): string

renderSeparator

  • renderSeparator(): string
  • Creates the HTML snippet for separator between hours, minutes, and seconds (such as a colon).

    Returns string

    The rendered HTML snippet.

renderTimeElements

  • renderTimeElements(containerClass: string, text: string, type: ChangeTimeType): string
  • Creates the HTML snippet for container with the up and down button.

    Parameters

    • containerClass: string

      Style class for the container.

    • text: string

      Text to shown in the time element container.

    • type: ChangeTimeType

      Whether to render the time elements of a hour, minute, second, or millisecond.

    Returns string

    The rendered HTML snippet.

renderTimePicker

  • renderTimePicker(): string
  • Creates the HTML snippet for the time picker that lets the user select an hour, minute, and second.

    Returns string

    The rendered HTML snippet.

renderTimePickerDownButton

  • renderTimePickerDownButton(): string

renderTimePickerUpButton

  • renderTimePickerUpButton(): string

renderTitle

renderTitleMonthElement

  • renderTitleMonthElement(month: number, index: number): string
  • Creates the HTML snippet for a title bar that shows the given month.

    Parameters

    • month: number

      Month to use.

    • index: number

      0-based index of the month in the year.

    Returns string

    The rendered HTML snippet.

renderTitleOptions

  • renderTitleOptions(name: "month", options: string[]): string
  • renderTitleOptions(name: "year", options: number[]): string
  • Creates the HTML snippet for the options elements of the select element in the title bar that lets the user switch to another month.

    Parameters

    • name: "month"

      Whether to create the options for months or years.

    • options: string[]

      List of month names.

    Returns string

    The rendered HTML snippet.

  • Creates the HTML snippet for the options elements of the select element in the title bar that lets the user switch to another year.

    Parameters

    • name: "year"

      Whether to create the options for months or years.

    • options: number[]

      List of year numbers to use as options.

    Returns string

    The rendered HTML snippet.

renderTitleYearElement

  • renderTitleYearElement(year: number, index: number): string
  • Creates the HTML snippet for a title bar that shows the given year.

    Parameters

    • year: number

      Year to use.

    • index: number

      0-based index of the month in the year.

    Returns string

    The rendered HTML snippet.

renderTriggerButton

  • renderTriggerButton(): void

renderWeek

repeat

  • When the time picker up or down arrows are clicked and the mouse button is held down for a prolonged period of time: repeatedly increment the minute or hour.

    Parameters

    • event: TriggeredEvent<any, any, any, any>

      Event that occurred, such as a click event.

    • interval: number

      Amount of time between successive increments.

    • type: ChangeTimeType

      Which part of the time is to be incremented or decremented (hour, minute, second, or millisecond).

    • direction: OneDimensionalDirection

      Whether to increment or decrement the time part.

    Returns void

selectDate

setDate

  • setDate(date: string | Date): void
  • Changes the selected date of this date picker to the given date, and updates the UI.

    Parameters

    • date: string | Date

      The new date to set.

    Returns void

setNavigationState

  • setNavigationState(newViewDate: Date): void
  • Changes the current date of the navigation, i.e. the dates or times that are displayed from which the user can select an option.

    Parameters

    • newViewDate: Date

      New view date to set.

    Returns void

showOverlay

  • showOverlay(): void

toISODateString

  • toISODateString(date: Date): string
  • Converts a date object to an ISO date (date only, no time) string. Useful to check if a dates matches with a date sent from the backend without needing to parse the backend date first.

    Parameters

    • date: Date

      Date to convert.

    Returns string

    The data as an ISO date string.

toggleAmPm

  • Callback that is invoked when the button for switching between a.m. and p.m. was pressed.

    Parameters

    Returns void

unbindDocumentClickListener

  • unbindDocumentClickListener(): void

updateModel

updateTime

  • updateTime(event: TriggeredEvent<any, any, any, any>, hour: number, minute: number, second: number, millsecond: number): void
  • Updates the time display so that is shows the given time.

    Parameters

    • event: TriggeredEvent<any, any, any, any>

      Event that occurred.

    • hour: number

      Current hour.

    • minute: number

      Current minute.

    • second: number

      Current second.

    • millsecond: number

    Returns void

updateTimeAfterInput

updateViewDate

updateYearNavigator

  • updateYearNavigator(): void

validateTime

  • validateTime(hour: number, minute: number, second: number, millisecond: number, value: Date, direction: AlterationMode): boolean

Generated using TypeDoc