SiDatepickerComponent documentation¶

selector

si-datepicker

Input Properties¶

Name	Type	Default	Description
activeHover ¶	`Cell`		The cell which which has the mouse hover.
calenderWeekLabel ¶	`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`
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`
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¶

TranslatableString (`string` & `Translatable`)¶ Type alias 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.

DatepickerConfig

¶

Interface

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`¶

DateRange { end: (`Date` \| `undefined`), start: (`Date` \| `undefined`) }¶ Type alias

RangeType (`"START"` \| `"END"` \| `undefined`)¶ Type alias

Translatable ¶ import imported from @siemens/element-translate-ng

WeekStart (`"monday"` \| `"saturday"` \| `"sunday"` \| `undefined`)¶ Type alias

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