Skip to content

SiDatepickerComponent documentation

selector
si-datepicker

Input Properties

Name Type Default Description
activeHover
 Cell The cell which which has the mouse hover.
calendarWeekLabel
 TranslatableString $localize`:@@SI_DATEPICKER.CALENDAR_WEEK_LABEL:Calendar week` Aria label for week number column
config
 DatepickerConfig {} Object to configure the datepicker.
date
 Date The selected date of the datepicker. Use for initialization and for bidirectional binding.
dateRange
 DateRange The selected date range of the datepicker. Use for initialization and for bidirectional binding.
dateRangeRole
 RangeType Role of this calendar when a date range is displayed across two calendars.
disabledTime
 boolean false Disabled the optional visible time picker.
focusedDate
 Date The date which is currently focused Compare to the selected date or range the calendar requires to have one element to focus.
hideCalendar
 boolean false Whether the calendar is hidden while retaining the optional timepicker.
hideTimeToggle
 boolean false Option to hide the time switch.
initialFocus
 boolean false Set initial focus to calendar body.
maxMonth
 Date Optional input to control the maximum month the datepicker can show and the user can navigate. The maxMonth can be smaller than the maxDate This option enables the usage of multiple datepickers next to each other while the more left calendar always shows a earlier month the the more right one.
minMonth
 Date Optional input to control the minimum month the datepicker can show and the user can navigate. The minMonth can be larger than the minDate This option enables the usage of multiple datepickers next to each other while the more left calendar always shows a earlier month the the more right one.
nextLabel
 TranslatableString $localize`:@@SI_DATEPICKER.NEXT:Next` Aria label for the next button. Needed for a11y.
previousLabel
 TranslatableString $localize`:@@SI_DATEPICKER.PREVIOUS:Previous` Aria label for the previous button. Needed for a11y.
rangeType
 RangeType 'START' Use this to force date range operation to select either start date or end date.
time12h
 boolean undefined Enable/disable 12H mode in timepicker. Defaults to locale
timepickerLabel
 string Optional timepicker label.

Output Properties

Name Type Description
activeHoverChange
 Cell The cell which which has the mouse hover.
configChange
 DatepickerConfig Object to configure the datepicker.
dateChange
 Date The selected date of the datepicker. Use for initialization and for bidirectional binding.
dateRangeChange
 DateRange The selected date range of the datepicker. Use for initialization and for bidirectional binding.
disabledTimeChange
 boolean Disabled the optional visible time picker.
focusedDateChange
 Date The date which is currently focused Compare to the selected date or range the calendar requires to have one element to focus.
rangeTypeChange
 RangeType Use this to force date range operation to select either start date or end date.

Attributes and Methods

Name Type Default Description
focusActiveCell()
 () => void Focus the active cell in view. The function is required to transfer the focus from input to the active date cell.

Types Documentation

(string & Translatable)
Represents a translatable string. This can either be a translation key, e.g. ACTIONS.EDIT that will be automatically translated when displayed on the UI or a pre-translated string, e.g. Edit . Equivalent to a normal string in usage and functionality.
Properties
Defines the time is disabled when visible. Will also be updated on user change. Default is false .
disabledTime?: boolean
Text or translation key for the disabled disable time. Default is Ignore time .
disabledTimeText?: TranslatableString
Options to turn on date range selection.
enableDateRange?: boolean
Text or translation key for the enabled disable time. Default is Consider time .
enabledTimeText?: TranslatableString
Consider time with minDate and maxDate
enableTimeValidation?: boolean
Option to use two months view for date range picking.
enableTwoMonthDateRange?: boolean
endTimeLabel?: string
hideLabels?: boolean
Configuration for hiding week numbers. Default is false .
hideWeekNumbers?: boolean
hoursAriaLabel?: string
hoursLabel?: string
hoursPlaceholder?: string
Hides disable time switch in the timepicker part and includes mandatory the time in the picker.
mandatoryTime?: boolean
Maximal (latest) selectable date.
maxDate?: Date
meridians?: string[]
meridiansAriaLabel?: string
meridiansLabel?: string
millisecondsAriaLabel?: string
millisecondsLabel?: string
millisecondsPlaceholder?: string
Minimal (earliest) selectable date.
minDate?: Date
minutesAriaLabel?: string
minutesLabel?: string
minutesPlaceholder?: string
Only month and year are selectable.
onlyMonthSelection?: boolean
secondsAriaLabel?: string
secondsLabel?: string
secondsPlaceholder?: string
Defines the timepicker milliseconds visibility . Default is false .
showMilliseconds?: boolean
Defines the timepicker minutes visibility. Default is true .
showMinutes?: boolean
Defines the timepicker seconds visibility . Default is false .
showSeconds?: boolean
Defines the timepicker visibility. Default is false .
showTime?: boolean
startTimeLabel?: string
Text or translation key for today button title. Default is Today .
todayText?: TranslatableString
Defines the starting day of the week. Default is monday .
weekStartDay?: WeekStart
("START" | "END" | undefined)
("monday" | "saturday" | "sunday" | undefined)

Except where otherwise noted, content on this site is licensed under MIT License.