SiDatepickerDirective documentation¶
selectorexported-as
[siDatepicker]siDatepickerBase directive for date input fields.
Input Properties¶
| Name | Type | Default | Description |
|---|---|---|---|
| autoClose ¶ | boolean | false | Automatically 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 ¶ | boolean | false | Whether the date range input is disabled. |
| errormessageId ¶ | string | ${this.id()}-errormessage | This ID will be bound to the aria-describedby attribute of the date-input. Use this to reference the element containing the error message(s) for the date-input. It will be picked by the SiFormItemComponent if the date-input is used inside a form item. |
| id ¶ | string | si-date-input-${SiDateInputDirective.idCounter++} | |
| readonly ¶ | boolean | false | Whether the date range input is readonly. |
| siDatepickerConfig ¶ | (DatepickerInputConfig | undefined) | {} | Configuration object for the datepicker. |
Output Properties¶
| Name | Type | Description |
|---|---|---|
| dateChange ¶ | (Date | undefined) | Emits a new date value on input field value changes. |
| siDatepickerClose ¶ | CloseCause | Output event on closing datepicker e.g. by clicking backdrop or escape key. |
| siDatepickerConfigChange ¶ | (DatepickerInputConfig | undefined) | Configuration object for the datepicker. |
| siDatepickerDisabledTime ¶ | boolean | 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. |
| stateChange ¶ | void | Emits an event on state changes e.g. readonly, disable, ... . |
Attributes and Methods¶
| Name | Type | Default | Description |
|---|---|---|---|
| ngOnChanges(...) ¶ | (changes: { autoClose: false, disabled: SimpleChange<Signal<boolean>>, disabledInput: false, errormessageId: ${this.id()}-errormessage, id: si-date-input-${SiDateInputDirective.idCounter++}, ngAfterViewInit: SimpleChange<() => void>, ngOnChanges: SimpleChange<(changes: { readonly autoClose?: SimpleChange<boolean> \| undefined; ngAfterViewInit?: SimpleChange<() => void> \| undefined; touch?: SimpleChange<() => void> \| undefined; ... 18 more ...; onDisabledTime?: SimpleChange<...> \| undefined; }) => void>, onDisabledTime: SimpleChange<(disabledTime: boolean) => void>, readonly: false, registerOnChange: SimpleChange<(fn: any) => void>, registerOnTouched: SimpleChange<(fn: () => void) => void>, registerOnValidatorChange: SimpleChange<(fn: () => void) => void>, setDisabledState: SimpleChange<(isDisabled: boolean) => void>, show: SimpleChange<(initialFocus: boolean = false) => void>, siDatepickerConfig: {}, siDatepickerDisabledTime: SimpleChange<OutputEmitterRef<boolean>>, stateChange: SimpleChange<OutputEmitterRef<void>>, touch: SimpleChange<() => void>, useExternalTrigger: SimpleChange<(element: ElementRef<HTMLElement>) => void>, validate: SimpleChange<(c: AbstractControl) => (ValidationErrors | null)>, validatorOnChange: SimpleChange<() => void>, writeValue: SimpleChange<(value: (string | Date)) => void> }) => void | 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
| |
| registerOnTouched(...) ¶ | (fn: () => void) => void | @description: Registers a callback function that is called by the forms API on initialization to update the form model on blur. When implementing registerOnTouched in your own value accessor, save the given function so your class calls it when the control should be considered blurred or "touched".@usageNotes: ### Store the callback function The following example stores the provided function as an internal method. registerOnTouched(fn: any): void { this._onTouched = fn; } On blur (or equivalent), your class should call the registered function to allow the forms API to update itself: host: { '(blur)': '_onTouched()' }Parameters
| |
| registerOnValidatorChange(...) ¶ | (fn: () => void) => void | @description: Registers a callback function to call when the validator inputs change. Parameters
| |
| validate(...) ¶ | (c: AbstractControl) => (ValidationErrors | null) | @description: Method that performs synchronous validation against the provided control. Returns A map of validation errors if validation fails, otherwise null. Parameters | |
| writeValue(...) ¶ | (value: (string | Date)) => void | @description: Writes a new value to the element. This method is called by the forms API to write to the view when programmatic changes from model to view are requested. @usageNotes: ### Write a value to the element The following example writes a value to the native DOM element. writeValue(value: any): void { this._renderer.setProperty(this._elementRef.nativeElement, 'value', value); }Parameters |
Types Documentation¶
|
|
|
| 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. | |||||
|---|---|---|---|---|---|
|
|
| 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. | |
|---|---|
| |
| 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. |
|---|
Variable |
|---|
Translatable import imported from @siemens/element-translate-ng |
|---|
|
| ||||||||||||
| ||||||||||||
|
| |||||||||||
| |||||||||||
| |||||||||||
|
| ||||||||||||
| ||||||||||||
|
Except where otherwise noted, content on this site is licensed under MIT License.