Skip to content

SiDatepickerOverlayComponent documentation

selector
si-datepicker-overlay

Input Properties

NameTypeDefaultDescription
config
DatepickerConfig{}Object to configure the datepicker.
date
DateThe selected date of the datepicker. Use for initialization and for bidirectional binding.
dateRange
DateRangeThe selected date range of the datepicker. Use for initialization and for bidirectional binding.
initialFocus
booleanfalseSet initial focus to calendar body.
isMobile
booleanfalseIndicate that the overlay is opened in small screen. A modal dialog animation display when true and a wrapped two month calendar layout is displayed.
rangeType
("START" | "END")Use this to force date range operation to select either start date or end date.
time12h
booleanfalseEnable/disable 12H mode in timepicker. Defaults to locale

Output Properties

NameTypeDescription
dateChange
DateThe selected date of the datepicker. Use for initialization and for bidirectional binding.
dateRangeChange
DateRangeThe selected date range of the datepicker. Use for initialization and for bidirectional binding.
disabledTimeChange
booleanEmits an event to notify about disabling the time from the datepicker. When time is disable, we construct a pure date object in UTC 00:00:00 time.
rangeTypeChange
("START" | "END")Use this to force date range operation to select either start date or end date.

Attributes and Methods

NameTypeDefaultDescription
focusActiveCell()
() => voidFocus active cell in the current datepicker view.

Types Documentation

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
(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.
("monday" | "saturday" | "sunday" | undefined)
Translatable
import

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