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: JQuery<HTMLElement>
container: JQuery<HTMLElement>

The container element of the date picker.

defaultElement: string
document: Document
element: JQuery<HTMLElement>
eventNamespace: string

Namespace for event triggered by this widget.

focusable: JQuery<HTMLElement>

The DOM element that is focusable.

hasCustomYearRange: boolean

Whether a custom year range was specified.

hoverable: JQuery<HTMLElement>

The DOM element that is hoverable.

inputfield: JQuery<HTMLElement>

The hidden input field containing the currently selected value.

mask: null | JQuery<HTMLElement>

Mask for the modal overlay.

monthsMetadata: DayListInMonth[]

List of all days in the current year.

namespace: string
options: PickerOptions

The current options of this widget instance.

panel: JQuery<HTMLElement>

The panel element of the date picker.

ticksTo1970: number

Number of microseconds since January 1, 1970.

transition?: null | CssTransitionHandler

Handler for CSS transitions used by this date picker.

triggerButton?: JQuery<HTMLElement>

Trigger button that opens or closes the date picker.

uuid: string
value: Date | Date[]

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

viewDate: Date | Date[]

The currently displayed date or dates.

widgetEventPrefix: string
widgetFullName: string
window: Window

Methods

  • 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(): void
  • clearTimePickerTimer(): void
  • 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.

  • 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(): string[]
  • createWeekDaysMin(): string[]
  • createWeekDaysShort(): string[]
  • 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(): 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(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(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(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(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(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(): null | "" | Date
  • Retrieves the currently selected date of this date picker.

    Returns null | "" | Date

    The currently selected date.

  • 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(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(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(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(month: number, year: number): MonthInstant
  • Finds the month of the year index and year index of the month preceding the given month.

    Parameters

    • month: number

      Month to check.

    • year: number

      Year to check.

    Returns MonthInstant

    The month before the given month.

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

    Returns number

    The day of the week index that represents sunday.

  • 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(input: HTMLElement, event: TriggeredEvent<any, any, any, any>): void
  • Callback that is invoked when a value was entered in the hour input.

    Parameters

    • input: HTMLElement

      Hour input element.

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

      Event that occurred.

    Returns void

  • handleMillisecondsInput(input: HTMLElement, event: TriggeredEvent<any, any, any, any>): void
  • handleMinutesInput(input: HTMLElement, event: TriggeredEvent<any, any, any, any>): void
  • handleSecondsInput(input: HTMLElement, event: TriggeredEvent<any, any, any, any>): void
  • hideOverlay(): void
  • 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.

  • 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(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.

  • 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(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(): boolean
  • isInMinYear(): boolean
  • 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(): boolean
  • isPanelVisible(): boolean
  • isRangeSelection(): boolean
  • 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

  • isSingleSelection(): boolean
  • 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.

  • onMonthDropdownChange(event: TriggeredEvent<any, any, any, any>): void
  • 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

  • onTimePickerElementMouseUp(event: TriggeredEvent<any, any, any, any>): void
  • 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(text: string): Date
  • parseOptionValue(option: string): Date
  • 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(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.

  • 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(): string
  • renderButtonBar(): string
  • Creates the HTML snippet for the button bar with the today and clear buttons.

    Returns string

    The rendered HTML snippet.

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

    Returns string

    The rendered HTML snippet.

  • 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.

  • 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(): string
  • renderFractionSeparator(): string
  • renderHourPicker(): string
  • renderMillisecondPicker(): string
  • renderMinutePicker(): string
  • 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(): string
  • Creates the HTML snippet for the month view with the days in the current month.

    Returns string

    The rendered HTML snippet.

  • 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(): string
  • renderPanelElements(): string
  • renderSecondPicker(): string
  • renderSeparator(): string
  • Creates the HTML snippet for separator between hours, minutes, and seconds (such as a colon).

    Returns string

    The rendered HTML snippet.

  • 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(): 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(): string
  • renderTimePickerUpButton(): string
  • 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(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(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(): void
  • 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

  • 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(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(): void
  • 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.

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

    Parameters

    Returns void

  • unbindDocumentClickListener(): void
  • Updates the hidden input field and saves the currently selected value.

    Parameters

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

      Event that occurred.

    • value: null | Date | Date[]

      Date that is selected.

    Returns void

  • 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

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

Generated using TypeDoc