Skip to content

SiDatepickerDirective documentation

selectorexported-as
[siDatepicker]siDatepicker

Base directive for date input fields.

Input Properties

NameTypeDefaultDescription
autoClose
booleanfalseAutomatically close overlay on date selection. Do not use this behavior with config showTime = true, because it will close the overlay when the user change one of the time units.
disabled
booleanfalseWhether the date range input is disabled.
errormessageId
string${this.id()}-errormessageOverrides the value of aria-describedby
id
stringsi-date-input-${SiDateInputDirective.idCounter++}
readonly
booleanfalseWhether the date range input is readonly.
siDatepickerConfig
(undefined | DatepickerInputConfig){}Configuration object for the datepicker.
dateInputDebounceTime
Deprecated		number200Deprecated: Property has no effect and will be removed without a replacement.
triggeringInput
Deprecated		ElementRef<any>inject(ElementRef)Deprecated: Property has no effect and will be removed without replacement.

Output Properties

NameTypeDescription
dateChange
(undefined | Date)Emits a new date value on input field value changes.
siDatepickerClose
CloseCauseOutput event on closing datepicker e.g. by clicking backdrop or escape key.
siDatepickerConfigChange
(undefined | DatepickerInputConfig)Configuration object for the datepicker.
siDatepickerDisabledTime
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.
stateChange
voidEmits an event on state changes e.g. readonly, disable, ... .

Types Documentation

extends DatepickerConfig
Properties
Similar to dateTimeFormat , but used when only a date is displayed (e.g. when showTime === false or disabledTime === true ). Only numeric date formats are supported.
dateFormat?: string
A custom date/time format according the Angular date pipe (see https://angular.dev/api/common/DatePipe ). Only numeric date formats are supported. The format is used to render the time of a date-time criterion. If not specified, mediumTime is used if the showSeconds flag is true, otherwise shortTime as default. For the date-only case, 'shortDate' is used.
dateTimeFormat?: string
Defines the time is disabled when visible. Will also be updated on user change. Default is false .
disabledTime?: boolean from disabledTime
Text or translation key for the disabled disable time. Default is Ignore time .
disabledTimeText?: TranslatableString from disabledTimeText
Options to turn on date range selection.
enableDateRange?: boolean from enableDateRange
Text or translation key for the enabled disable time. Default is Consider time .
enabledTimeText?: TranslatableString from enabledTimeText
Consider time with minDate and maxDate
enableTimeValidation?: boolean from enableTimeValidation
Option to use two months view for date range picking.
enableTwoMonthDateRange?: boolean from enableTwoMonthDateRange
endTimeLabel?: string from endTimeLabel
hideLabels?: boolean from hideLabels
Configuration for hiding week numbers. Default is false .
hideWeekNumbers?: boolean from hideWeekNumbers
hoursAriaLabel?: string from hoursAriaLabel
hoursLabel?: string from hoursLabel
hoursPlaceholder?: string from hoursPlaceholder
Hides disable time switch in the timepicker part and includes mandatory the time in the picker.
mandatoryTime?: boolean from mandatoryTime
Maximal (latest) selectable date.
maxDate?: Date from maxDate
meridians?: string[] from meridians
meridiansAriaLabel?: string from meridiansAriaLabel
meridiansLabel?: string from meridiansLabel
millisecondsAriaLabel?: string from millisecondsAriaLabel
millisecondsLabel?: string from millisecondsLabel
millisecondsPlaceholder?: string from millisecondsPlaceholder
Minimal (earliest) selectable date.
minDate?: Date from minDate
minutesAriaLabel?: string from minutesAriaLabel
minutesLabel?: string from minutesLabel
minutesPlaceholder?: string from minutesPlaceholder
Only month and year are selectable.
onlyMonthSelection?: boolean from onlyMonthSelection
secondsAriaLabel?: string from secondsAriaLabel
secondsLabel?: string from secondsLabel
secondsPlaceholder?: string from secondsPlaceholder
Defines the timepicker milliseconds visibility . Default is false .
showMilliseconds?: boolean from showMilliseconds
Defines the timepicker minutes visibility. Default is true .
showMinutes?: boolean from showMinutes
Defines the timepicker seconds visibility . Default is false .
showSeconds?: boolean from showSeconds
Defines the timepicker visibility. Default is false .
showTime?: boolean from showTime
startTimeLabel?: string from startTimeLabel
Text or translation key for today button title. Default is Today .
todayText?: TranslatableString from todayText
Defines the starting day of the week. Default is monday .
weekStartDay?: WeekStart from weekStartDay
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
Common interface for form item controls. Controls that should be connected to SiFormItemComponent must implement this interface and must be provided using the SI_FORM_ITEM_CONTROL token.
Properties
Generated ID that the SiFormItemComponent will assign to the element containing the error messages. Implementations of SiFormItemControl must generate this ID and assign it to the aria-describedby attribute of their focusable elements.

This property will be required with v48.
errormessageId?: (string | Signal<(undefined | string)>)
The actual id of the control that should be used in the for attribute of a label.
id?: (string | Signal<(undefined | string)>)
If the control is meant to be used a checkbox. This affects the label positioning.
isFormCheck?: boolean
ID that should be assigned to the label element inside the SiFormItemComponent .

If the target control is not of type input, select or button, it cannot be referenced by a label. Instead, aria-labelledby must be used to create a reference to a label. In such a case, an implementation of SiFormItemControl must provide the id of the label in labelledby . SiFormItemComponent will apply the id to the label so that it can be used inside the control to reference it in the aria-labelledby attribute.
labelledby?: (null | string | Signal<(undefined | string)>)
(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)
InjectionToken<SiFormItemControl> = ...
Variable
Translatable
import
Properties
key: string
message?: string
params: any
Interface for form error mapper. It resolves a key to either a translatable string or function which is called with the validation error for its key and should return a translatable string.
Index signature: [ key: string ]: (undefined | string | (error: any) => string)
Properties
dateFormat?: (TranslatableString | (error: { format: string }) => TranslatableString)
email?: (TranslatableString | (error: { email: boolean }) => TranslatableString)
max?: (TranslatableString | (error: { actual: number, max: number }) => TranslatableString)
maxDate?: (TranslatableString | (error: { actual: Date, max: Date }) => TranslatableString)
maxLength?: (TranslatableString | (error: { actualLength: number, requiredLength: number }) => TranslatableString)
min?: (TranslatableString | (error: { actual: number, min: number }) => TranslatableString)
minDate?: (TranslatableString | (error: { actual: Date, min: Date }) => TranslatableString)
minLength?: (TranslatableString | (error: { actualLength: number, requiredLength: number }) => TranslatableString)
numberFormat?: (TranslatableString | (error: { numberFormat: boolean }) => TranslatableString)
pattern?: (TranslatableString | (error: { pattern: (string | RegExp) }) => TranslatableString)
required?: (TranslatableString | (error: { required: boolean }) => TranslatableString)
requiredTrue?: (TranslatableString | (error: { required: boolean }) => TranslatableString)
Properties
lgMinimum: number
mdMinimum: number
smMinimum: number
xlMinimum: number
xxlMinimum: number
Properties
controlName?: string
controlNameTranslationKey?: string
errorCode: string
errorCodeTranslationKey?: string
errorParams?: any
implements AfterContentInit, AfterViewInit, AfterContentChecked, OnChanges, OnInit, OnDestroy
Constructor
() => {}
Properties
container: (null | SiFormContainerComponent<{ [ key: string ]: AbstractControl<any, any> } }>) = ...
controlElementRef: Signal<(undefined | ElementRef<HTMLElement>)> = ...
Disables the automatic error printing. Error printing will be enabled by default in v46.
disableErrorPrinting: InputSignalWithTransform<boolean, unknown> = false
elementRef: ElementRef<HTMLElement> = ...
errors: WritableSignal<SiFormError[]> = ...
fieldControl: Signal<(undefined | SiFormItemControl)> = ...
fieldControlNative: WritableSignal<(undefined | SiFormItemControl)> = ...
fieldControlQuery: Signal<(undefined | SiFormItemControl)> = ...
fieldset: (null | SiFormFieldsetComponent) = ...
formErrorMapper: InputSignal<(undefined | SiFormValidationErrorMapper)> = ...
hasRequiredValidator: WritableSignal<boolean> = ...
Deprecated: property has longer an effect. SiFormItem detects IDs automatically
inputId?: string
Deprecated: Remove with v48
isLegacyMode: WritableSignal<boolean> = ...
The label to be displayed in the form item. It will be translated if a translation key is available.
label: InputSignal<(undefined | null | string)> = ...
A custom width value to be applied to the label. A value of 0 is allowed as well to visually hide away the label area.

Numbers will be converted to pixels. Using numbers is discouraged and might be dropped.

Example:
labelWidth="100px"
labelWidth: InputSignal<(undefined | string | number)> = ...
labelWidthCssVar: Signal<(undefined | string)> = ...
ngControl: Signal<(undefined | NgControl)> = ...
previousErrors?: (null | ValidationErrors)
printErrors: Signal<boolean> = ...
Deprecated: This input has no effect and can be removed.
readonly: boolean = false
required: Signal<boolean> = ...
Defines that this form item is required for the overall form to be valid.
requiredInput: InputSignalWithTransform<boolean, unknown> = false
requiredTestControl: FormControl<(null | string)> = ...
requiredValidator: Signal<(undefined | RequiredValidator)> = ...
validationErrorService: SiFormValidationErrorService = ...
validator?: (null | ValidatorFn)
Accessors
get formItemErrormessageId: (null | string)
get formItemId: (null | string)
get formItemLabelledBy: (null | string)
Methods
A callback method that is invoked immediately after the default change detector has completed checking all of the directive's content.
ngAfterContentChecked: () => void from AfterContentChecked.ngAfterContentChecked
A callback method that is invoked immediately after Angular has completed initialization of all of the directive's content. It is invoked only once when the directive is instantiated.
ngAfterContentInit: () => void from AfterContentInit.ngAfterContentInit
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 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
updateRequiredState: () => void
updateValidationMessages: () => void
<(TControl: { [ K in keyof TControl ]: AbstractControl })>
Constructor
() => {}
Properties
The container hosts the form within a siResizeContainer to configure the breakpoint for different screen sizes. Optionally, change the container breakpoints with the contentContainerBreakpoints input.
contentContainerBreakpoints: InputSignal<(undefined | Breakpoints)> = ...
A map the maps from control names of the form to their translate keys. The initial map is empty and the user is responsible to add the required translate keys.
controlNameTranslateKeyMap: InputSignal<Map<string, string>> = new Map<​string, string​>()
In some scenarios, one may not want the form container to be responsible for the layout relevant si-container-[xs|...] classes, but let this be done by a different, nested component, e.g. by a group box. In these cases, the property should be set to true.
disableContainerBreakpoints: InputSignalWithTransform<boolean, unknown> = false
Disables the automatic error printing in all nested SiFormItemComponent . Error printing will be enabled by default in v46.
disableErrorPrinting: InputSignalWithTransform<boolean, unknown> = false
Every validation error has an errorCode. This map holds translate keys for error codes. The keys can be used to display a translated message for each validation error. The defaults old english readable key defaults for the Angular standard validators of the Validators class like min , max or required .

Use the input to set your own translate keys for the form validators you need.
errorCodeTranslateKeyMap: InputSignal<(undefined | SiFormValidationErrorMapper | Map<string, string>)> = ...
errorResolver: SiFormValidationErrorService = ...
Set the form entity to the container to enable the overall form validation on in the form container edit panel.
form: InputSignal<(undefined | FormGroup<TControl>)> = ...
formErrorMapper: Signal<{ [ key: string ]: (undefined | string | (error: any) => string) } }> = ...
hasParentContainer: boolean = ...
A custom width value to be applied to all labels.

Example:
labelWidth="100px".
labelWidth: InputSignal<(undefined | string)> = ...
A form container in readonly mode is only displaying the form content without ability to change it. The edit panel with typically save and cancel buttons is hidden. Set to true to display the edit panel.
readonly: InputSignalWithTransform<boolean, unknown> = false
Accessors
Indicates whether the content editor message shall be styled as warning.
Returns true , if SiFormContainerComponent.userInteractedWithForm is true and the form is invalid.
get invalidFormContainerMessage: boolean
Indicates whether the user interacted with the form.
Returns true , if the user selected at least one form element and [blurred] https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event by losing focus again (e.g. by setting focus on another element), or by editing the content of a form element. Otherwise false .
get userInteractedWithForm: boolean
Indicates whether content editor message shall be styled as success.
Returns true , if SiFormContainerComponent.userInteractedWithForm is true and the form is valid.
get validFormContainerMessage: boolean
Methods
(controlName: string) => (undefined | string)
Parameters
controlName: string
(formGroup: FormGroup) => SiFormValidationError[]
Parameters
formGroup: FormGroup
(control: AbstractControl, controlName: string) => SiFormValidationError[]
Parameters
control: AbstractControl
controlName?: string
(controlName: string) => SiFormValidationError[]
Returns the validation errors of the form's control when the control name is provided. Otherwise, returns all validation errors of the form. Returns an empty arry when no form is available or if the name does not match to a control.
Deprecated: The SiFormItemComponent is able to display validation errors automatically when siFormInput directive is used.
Parameters
An optional name of a control that is part of the form.
controlName?: string
implements DoCheck
Constructor
() => {}
Properties
errors: Signal<SiFormError[]> = ...
formItems: WritableSignal<SiFormItemComponent[]> = ...
hasOnlyRadios: Signal<boolean> = ...
Switches all child inputs to inline mode
inline: InputSignalWithTransform<boolean, unknown> = false
isRequired: Signal<boolean> = ...
The label for the entire fieldset.
label: InputSignal<string> = ...
labelId: string = ...
Overrides the parent label width.
labelWidth: InputSignal<(undefined | string)> = ...
Adds a required marker to the label
required: InputSignalWithTransform<boolean, unknown> = false
touched: WritableSignal<boolean> = ...
labelIdCounter: number = 0
Methods
A callback method that performs change-detection, invoked after the default change-detector runs. See KeyValueDiffers and IterableDiffers for implementing custom change checking for collections.
ngDoCheck: () => void from DoCheck.ngDoCheck
(item: SiFormItemComponent) => void
Parameters
item: SiFormItemComponent
(item: SiFormItemComponent) => void
Parameters
item: SiFormItemComponent

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