Options
All
  • Public
  • Public/Protected
  • All
Menu

Optionts for the various methods of the Timepicker for working time date / time ranges.

Hierarchy

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.

altFieldTimeOnly

altFieldTimeOnly: boolean

Default: true - When altField is used from datepicker, altField will only receive the formatted time and the original field only receives date.

Optional altFormat

altFormat?: string

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

altRedirectFocus

altRedirectFocus: boolean

Default: true - Whether to immediately focus the main field whenever the altField receives focus. Effective at construction time only, changing it later has no effect.

altSeparator

altSeparator: string

Default: (separator option) - String placed between formatted date and formatted time in the altField.

altTimeFormat

altTimeFormat: string

Default: (timeFormat option) - The time format to use with the altField.

altTimeSuffix

altTimeSuffix: string

Default: (timeSuffix option) - String always placed after the formatted time in the altField.

alwaysSetTime

alwaysSetTime: boolean

Default: true - Always have a time set internally, even before user has chosen one.

amNames

amNames: string[]

Default: ["AM", "A"], A Localization Setting - Array of strings to try and parse against to determine AM.

Optional appendText

appendText?: string

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

Optional autoSize

autoSize?: boolean

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

Optional autohide

autohide?: boolean

Set to true to automatically hide the datepicker.

Optional beforeShow

beforeShow?: (input: Element, inst: any) => DatepickerOptions

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.

Type declaration

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

      Parameters

      • input: Element
      • inst: any

      Returns DatepickerOptions

Optional beforeShowDay

beforeShowDay?: (date: Date) => any[]

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.

Type declaration

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

      Parameters

      Returns any[]

Optional buttonImage

buttonImage?: string

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

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

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

Optional calculateWeek

calculateWeek?: (date: Date) => string

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.

Type declaration

    • (date: Date): string
    • 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.

      Parameters

      Returns string

Optional changeMonth

changeMonth?: boolean

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

Optional changeYear

changeYear?: boolean

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

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

Optional constrainInput

constrainInput?: boolean

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

controlType

controlType: ControlType | CustomControl

Default: slider - How to select a time (hour / minute / second). If slider is unavailable through jQueryUI, select will be used. For advanced usage you may set this to a custom control to use controls other than sliders or selects.

Optional currentText

currentText?: string

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

Optional dateFormat

dateFormat?: string

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

Optional dayNames

dayNames?: string[]

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

Optional dayNamesMin

dayNamesMin?: string[]

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

Optional dayNamesShort

dayNamesShort?: string[]

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.

defaultValue

defaultValue: null | string

Default: null - String of the default time value placed in the input on focus when the input is empty.

Optional duration

duration?: string

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").

end

end: Partial<DatetimepickerOptions>

Options that are applied only to the date / time picker for the end date / time.

Optional endDate

endDate?: Date

Set to date to automatically enddate the datepicker.

Optional firstDay

firstDay?: number

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

Optional gotoCurrent

gotoCurrent?: boolean

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

Optional hideIfNoPrevNext

hideIfNoPrevNext?: boolean

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.

hour

hour: number

Default: 0 - Initial hour set.

hourGrid

hourGrid: number

Default: 0 - When greater than 0 a label grid will be generated under the slider. This number represents the units (in hours) between labels.

hourMax

hourMax: number

Default: 23 - The maximum hour allowed for all dates.

hourMin

hourMin: number

Default: 0 - The minimum hour allowed for all dates.

hourText

hourText: string

Default: Hour, A Localization Setting - Label used to identify the hour slider.

Optional isRTL

isRTL?: boolean

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.

maxDateTime

maxDateTime: null | Date

Default: null - Date object of the maximum datetime allowed. Also Available as maxDate.

maxInterval

maxInterval: number

Max allowed interval in milliseconds

maxTime

maxTime: null | string

Default: null - String of the maximum time allowed. '8:00 pm' will restrict to times before 8pm

microsec

microsec: number

Default: 0 - Initial microsecond set. Note: Javascript's native Date object does not natively support microseconds. Timepicker extends the Date object with Date.prototype.setMicroseconds(m) and Date.prototype.getMicroseconds(). Date comparisons will not acknowledge microseconds. Use this only for display purposes.

microsecGrid

microsecGrid: number

Default: 0 - When greater than 0 a label grid will be genereated under the slider. This number represents the units (in microseconds) between labels.

microsecMax

microsecMax: number

Default: 999 - The maximum microsecond allowed for all dates.

microsecMin

microsecMin: number

Default: 0 - The minimum microsecond allowed for all dates.

microsecText

microsecText: string

Default: Microsecond, A Localization Setting - Label used to identify the microsecond slider.

millisec

millisec: number

Default: 0 - Initial millisecond set.

millisecGrid

millisecGrid: number

Default: 0 - When greater than 0 a label grid will be genereated under the slider. This number represents the units (in milliseconds) between labels.

millisecMax

millisecMax: number

Default: 999 - The maximum millisecond allowed for all dates.

millisecMin

millisecMin: number

Default: 0 - The minimum millisecond allowed for all dates.

millisecText

millisecText: string

Default: Millisecond, A Localization Setting - Label used to identify the millisecond slider.

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.

minDateTime

minDateTime: null | Date

Default: null - Date object of the minimum datetime allowed. Also available as minDate.

minInterval

minInterval: number

Min allowed interval in milliseconds

minTime

minTime: null | string

Default: null - String of the minimum time allowed. '8:00 am' will restrict to times after 8am

minute

minute: number

Default: 0 - Initial minute set.

minuteGrid

minuteGrid: number

Default: 0 - When greater than 0 a label grid will be generated under the slider. This number represents the units (in minutes) between labels.

minuteMax

minuteMax: number

Default: 59 - The maximum minute allowed for all dates.

minuteMin

minuteMin: number

Default: 0 - The minimum minute allowed for all dates.

minuteText

minuteText: string

Default: Minute, A Localization Setting - Label used to identify the minute slider.

Optional monthNames

monthNames?: string[]

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

Optional monthNamesShort

monthNamesShort?: string[]

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

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

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?: (year: number, month: number, inst: any) => void

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.

Type declaration

    • (year: number, month: number, inst: any): void
    • 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.

      Parameters

      • year: number
      • month: number
      • inst: any

      Returns void

Optional onClose

onClose?: (dateText: string, inst: any) => void

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.

Type declaration

    • (dateText: string, inst: any): void
    • 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.

      Parameters

      • dateText: string
      • inst: any

      Returns void

oneLine

oneLine: boolean

Default: false - Try to show the time dropdowns all on one line. This should be used with controlType select and as few units as possible.

parse

Default: strict - How to parse the time string. You may also set this to a function to handle the parsing yourself.

pickerTimeFormat

pickerTimeFormat: string

Default: (timeFormat option) - How to format the time displayed within the timepicker.

pickerTimeSuffix

pickerTimeSuffix: string

Default: (timeSuffix option) - String to place after the formatted time within the timepicker.

pmNames

pmNames: string[]

Default: ["PM", "P"], A Localization Setting - Array of strings to try and parse against to determine PM.

Optional prevText

prevText?: string

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

second

second: number

Default: 0 - Initial second set.

secondGrid

secondGrid: number

Default: 0 - When greater than 0 a label grid will be genereated under the slider. This number represents the units (in seconds) between labels.

secondMax

secondMax: number

Default: 59 - The maximum second allowed for all dates.

secondMin

secondMin: number

Default: 0 - The minimum second allowed for all dates.

secondText

secondText: string

Default: Second, A Localization Setting - Label used to identify the second slider.

Optional selectOtherMonths

selectOtherMonths?: boolean

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.

separator

separator: string

Default: space ( ) - When formatting the time this string is placed between the formatted date and formatted time.

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

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.

showButtonPanel

showButtonPanel: boolean

Default: true - Whether to show the button panel at the bottom. This is generally needed.

Optional showCurrentAtPos

showCurrentAtPos?: number

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

showHour

showHour: null | boolean

Default: null - Whether to show the hour control. The default of null will use detection from timeFormat.

showMicrosec

showMicrosec: null | boolean

Default: null - Whether to show the microsecond control. The default of null will use detection from timeFormat.

showMillisec

showMillisec: null | boolean

Default: null - Whether to show the millisecond control. The default of null will use detection from timeFormat.

showMinute

showMinute: null | boolean

Default: null - Whether to show the minute control. The default of null will use detection from timeFormat.

Optional showMonthAfterYear

showMonthAfterYear?: boolean

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

Optional showOn

showOn?: string

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

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.

showSecond

showSecond: null | boolean

Default: null - Whether to show the second control. The default of null will use detection from timeFormat.

showTime

showTime: boolean

Default: true - Whether to show the time selected within the datetimepicker.

showTimepicker

showTimepicker: boolean

Default: true - Whether to show the timepicker within the datepicker.

showTimezone

showTimezone: null | boolean

Default: null - Whether to show the timezone select.

Optional showWeek

showWeek?: boolean

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.

start

start: Partial<DatetimepickerOptions>

Options that are applied only to the date / time picker for the start date / time.

stepHour

stepHour: number

Default: 1 - Hours per step the slider makes.

stepMicrosec

stepMicrosec: number

Default: 1 - Microseconds per step the slider makes.

stepMillisec

stepMillisec: number

Default: 1 - Milliseconds per step the slider makes.

stepMinute

stepMinute: number

Default: 1 - Minutes per step the slider makes.

Optional stepMonths

stepMonths?: number

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

stepSecond

stepSecond: number

Default: 1 - Seconds per step the slider makes.

timeFormat

timeFormat: string

Default: HH:mm, A Localization Setting - String of format tokens to be replaced with the time.

timeInput

timeInput: boolean

Default: false - Allows direct input in time field

timeOnly

timeOnly: boolean

Default: false - Hide the datepicker and only provide a time interface.

timeOnlyShowDate

timeOnlyShowDate: boolean

Default: false - Show the date and time in the input, but only allow the timepicker.

timeOnlyTitle

timeOnlyTitle: string

Default: Choose Time, A Localization Setting - Title of the wigit when using only timepicker.

timeSuffix

timeSuffix: string

Default: Empty string, A Localization Setting - String to place after the formatted time.

timeText

timeText: string

Default: Time, A Localization Setting - Label used within timepicker for the formatted time.

timezone

timezone: null | number

Default: null - Initial timezone set. If null, the browser's local timezone will be used.

timezoneList

timezoneList: Record<string, number> | Timezone[]

Default: [generated timezones] - An array of timezones used to populate the timezone select.

timezoneText

timezoneText: string

Default: Timezone, A Localization Setting - Label used to identify the timezone slider.

Optional weekHeader

weekHeader?: string

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

Optional yearRange

yearRange?: string

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

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

Methods

afterInject

  • afterInject(): void
  • Default: unset - Function to be called when the timepicker or selection control is injected or re-rendered.

    Returns void

onSelect

  • onSelect(datetimeText: string, timepicker: Timepicker): void
  • Default: unset - Function to be called when a date is chosen or time has changed.

    Parameters

    • datetimeText: string

      Currently selected date as text.

    • timepicker: Timepicker

      The current timepicker instance.

    Returns void

Generated using TypeDoc