Skip to content

SiDatepickerOverlayDirective documentation

selectorexported-as
[siDatepickerOverlay]siDatepickerOverlay

Directive with the responsibility to open/close datepicker overlay.

Output Properties

NameTypeDescription
siDatepickerClose
CloseCauseOutput event on closing datepicker e.g. by clicking backdrop or escape key.

Attributes and Methods

NameTypeDefaultDescription
closeAfterSelection()
() => voidClose overlay with cause select, which will recover the focus
closeOverlay()
() => undefinedClose datepicker.
contains(...)
(element: HTMLElement) => booleanIndicate whether the HTML element is a child of the datepicker overlay.

Parameters
focus(...)
(focus: boolean = true) => thisFocus active cell in datepicker.
Returns current instance.

Parameters
  • focus: boolean = true  show transfer focus.
isShown()
() => (undefined | ComponentRef<SiDatepickerOverlayComponent>)Indicate the datepicker is visible.
Returns is visible.
setInputs(...)
(inputs: Partial<DatepickerInput>) => thisSet datepicker inputs

Parameters
showOverlay(...)
(focus: boolean = false, inputs: Partial<DatepickerInput>) => ComponentRef<SiDatepickerOverlayComponent>Show datepicker overlay.
Returns create datepicker overlay instance

Parameters

Types Documentation

Enum members
Backdrop: "backdrop"
Detach: "detach"
Escape: "escape"
Select: "select"
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)
("START" | "END" | undefined)
Translatable
import
implements OnChanges, OnInit, OnDestroy
Constructor
() => {}
Properties
activeHover?: Cell
completeAnimation: WritableSignal<boolean> = ...
Object to configure the datepicker.
config: InputSignal<DatepickerConfig> = {}
The selected date of the datepicker. Use for initialization and for bidirectional binding.
date: ModelSignal<(undefined | Date)> = ...
datepicker: Signal<SiDatepickerComponent> = ...
The selected date range of the datepicker. Use for initialization and for bidirectional binding.
dateRange: ModelSignal<(undefined | DateRange)> = ...
Emits 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.
disabledTimeChange: OutputEmitterRef<boolean> = ...
disableTime: boolean = false
document: Document = ...
elementRef: ElementRef<any> = ...
firstDatepickerConfig: WritableSignal<DatepickerConfig> = ...
focusMonitor: FocusMonitor = ...
focusTrap: ConfigurableFocusTrap
focusTrapFactory: ConfigurableFocusTrapFactory = ...
Set initial focus to calendar body.
initialFocus: InputSignalWithTransform<boolean, unknown> = false
Indicate that the overlay is opened in small screen. A modal dialog animation display when true and a wrapped two month calendar layout is displayed.
isMobile: InputSignal<boolean> = false
isTwoMonthDateRange: Signal<boolean> = ...
maxMonth: WritableSignal<(undefined | Date)> = ...
minMonth: WritableSignal<(undefined | Date)> = ...
previousActiveElement?: (Element | HTMLElement)
Use this to force date range operation to select either start date or end date.
rangeType: ModelSignal<(undefined | "START" | "END")> = ...
secondDatepickerConfig: WritableSignal<DatepickerConfig> = ...
Enable/disable 12H mode in timepicker. Defaults to locale
time12h: InputSignalWithTransform<boolean, unknown> = false
Methods
(newFocusedDate: Date) => void
Parameters
newFocusedDate?: Date
Focus active cell in the current datepicker view.
focusActiveCell: () => void
(changes: SimpleChanges) => void from OnChanges.ngOnChanges
A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.
Parameters
The changed properties.
changes: SimpleChanges
A callback method that performs custom clean-up, invoked immediately before a directive, pipe, or service instance is destroyed.
ngOnDestroy: () => void from OnDestroy.ngOnDestroy
A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.
ngOnInit: () => void from OnInit.ngOnInit
(newFocusedDate: Date) => void
Parameters
newFocusedDate?: Date
implements OnInit, OnChanges, AfterViewInit
Constructor
() => {}
Properties
The cell which which has the mouse hover.
activeHover: ModelSignal<(undefined | Cell)> = ...
Get the current shown view.
activeView: Signal<(undefined | SiDaySelectionComponent | SiMonthSelectionComponent | SiYearSelectionComponent)> = ...
actualFocusedDate: Signal<Date> = ...
Aria label for week number column
calendarWeekLabel: InputSignal<TranslatableString> = $localize`:@@SI_DATEPICKER.CALENDAR_WEEK_LABEL:Calendar week`
Aria label for week number column
Deprecated: Use calendarWeekLabel instead.
calenderWeekLabel: InputSignal<(undefined | TranslatableString)> = $localize`:@@SI_DATEPICKER.CALENDAR_WEEK_LABEL:Calendar week`
cdRef: ChangeDetectorRef = ...
Object to configure the datepicker.
config: ModelSignal<DatepickerConfig> = {}
The selected date of the datepicker. Use for initialization and for bidirectional binding.
date: ModelSignal<(undefined | Date)> = ...
The selected date range of the datepicker. Use for initialization and for bidirectional binding.
dateRange: ModelSignal<(undefined | DateRange)> = ...
dateRangeRole: InputSignal<RangeType> = ...
Reference to the current day selection component. Shown when view === 'week'
daySelection: Signal<(undefined | SiDaySelectionComponent)> = ...
defaultDisabledTimeText: TranslatableString = ...
defaultEnableTimeText: TranslatableString = ...
derivedWeekLabel: Signal<TranslatableString> = ...
Disabled the optional visible time picker.
disabledTime: ModelSignal<boolean> = false
The date which is currently focused Compare to the selected date or range the calendar requires to have one element to focus.
focusedDate: ModelSignal<(undefined | Date)> = ...
When the user switch from the year or month view via keyboard selection we force the focus.
forceFocus: Signal<boolean> = ...
hideCalendar: InputSignal<boolean> = ...
Option to hide the time switch.
hideTimeToggle: InputSignal<boolean> = false
includeTimeLabel: Signal<TranslatableString> = ...
Set initial focus to calendar body.
initialFocus: InputSignal<boolean> = false
locale: string = ...
localeWeekStart: WeekStart
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.
maxMonth: InputSignal<(undefined | 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.
minMonth: InputSignal<(undefined | Date)> = ...
months: string[] = []
Reference to the current month selection component. Shown when view === 'month'
monthSelection: Signal<(undefined | SiMonthSelectionComponent)> = ...
monthViewSwitchTo: ("month" | "week") = 'week'
Aria label for the next button. Needed for a11y.
nextLabel: InputSignal<TranslatableString> = $localize`:@@SI_DATEPICKER.NEXT:Next`
Aria label for the previous button. Needed for a11y.
previousLabel: InputSignal<TranslatableString> = $localize`:@@SI_DATEPICKER.PREVIOUS:Previous`
Used to hold the last time when setting the time to disabled. Value will be reset on enabling the time again.
previousTime?: Date
Use this to force date range operation to select either start date or end date.
rangeType: ModelSignal<RangeType> = 'START'
requireFocus: WritableSignal<boolean> = ...
switchId: string = ...
Date object to track and change the time. Keeping time and date in separate objects to not change the date when flipping time. After change, a new date object is created with an adapted time.
time: FormControl<(undefined | Date)> = ...
Enable/disable 12H mode in timepicker. Defaults to locale
time12h: InputSignalWithTransform<(undefined | boolean), unknown> = undefined
timepickerId: string = ...
Optional timepicker label.
timepickerLabel: InputSignal<(undefined | string)> = ...
The active view
view: WritableSignal<ViewType> = ...
Reference to the current year selection component. Shown when view === 'year'
yearSelection: Signal<(undefined | SiYearSelectionComponent)> = ...
Configuration which view shall be shown after year selection, when onlyMonthSelection is enabled the month view is shown otherwise the week view.
yearViewSwitchTo: ("month" | "week") = 'week'
Accessors
get endDate: (undefined | Date)
get hideWeekNumbers: boolean
get startDate: (undefined | Date)
get weekStartDay: WeekStart
Methods
(selection: (null | Date)) => void
Handle month/year changes
Parameters
the selected month or null of cancelled.
selection: (null | Date)
(selection: (null | Date)) => void
Handle year changes
Parameters
the selected year or null of cancelled.
selection: (null | Date)
Focus the active cell in view. The function is required to transfer the focus from input to the active date cell.
focusActiveCell: () => void
Returns the date object if not range selection is enabled. Otherwise, if the date range role is 'END', the date range end date is returned. If date range role is not 'END', the date range start date is returned.
getRelevantDate: () => (undefined | Date)
Initialize day and month labels
initCalendarLabels: () => void
A callback method that is invoked immediately after Angular has completed initialization of a component's view. It is invoked only once when the view is instantiated.
ngAfterViewInit: () => void from AfterViewInit.ngAfterViewInit
(changes: SimpleChanges) => void from OnChanges.ngOnChanges
A callback method that is invoked immediately after the default change detector has checked data-bound properties if at least one has changed, and before the view and content children are checked.
Parameters
The changed properties.
changes: SimpleChanges
A callback method that is invoked immediately after the default change detector has checked the directive's data-bound properties for the first time, and before any of the view or content children have been checked. It is invoked only once when the directive is instantiated.
ngOnInit: () => void from OnInit.ngOnInit
(event: Cell) => void
Parameters
event?: Cell
onDisabledTimeChanged: () => void
(selection: Date) => void
Handle selection in the day view.
Parameters
selected date.
selection: Date
(newDate: Date) => void
Validates and sets a new date to the this.date model object of this component and fires the related events. The model object shall not be updated elsewhere with a new date object. Shall only be called on simple date selection and not on date range selection.
Parameters
The new date to be set.
newDate: Date
(newDateRange: DateRange) => boolean
Validates and sets the new date range to the dateRange model object.
Returns True if the new range is valid and set. Otherwise false.
Parameters
The new range to be set.
newDateRange: DateRange
(newTime: Date) => void
Parameters
newTime?: Date
toggleDisabledTime: () => void
(control: AbstractControl) => (null | ValidationErrors)
Parameters
control: AbstractControl

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