The ui5-date-picker component provides an input field with assigned calendar which opens on user action.
The ui5-date-picker allows users to select a localized date using touch,
mouse, or keyboard input. It consists of two parts: the date input field and the
date picker.
When the user makes an entry and presses the enter key, the calendar shows the corresponding date.
When the user directly triggers the calendar display, the actual date is displayed.
The ui5-date-picker provides advanced keyboard handling.
If the ui5-date-picker is focused,
you can open or close the drop-down by pressing [F4], [Alt] + [Up] or [Alt] + [Down] keys.
Once the drop-down is opened, you can use the [Up], [Down], [Left] or [Right] arrow keys
to navigate through the dates and select one by pressing the Space or Enter keys. Moreover you can
use TAB to reach the buttons for changing month and year.
If the ui5-date-picker input field is focused and its corresponding picker dialog is not opened,
then users can increment or decrement the date referenced by dateValue property
by using the following shortcuts:
[Page Down] - Decrements the corresponding day of the month by one
[Shift] + [Page Down] - Decrements the corresponding month by one
[Shift] + [Ctrl] + [Page Down] - Decrements the corresponding year by one
[Page Up] - Increments the corresponding day of the month by one
[Shift] + [Page Up] - Increments the corresponding month by one
[Shift] + [Ctrl] + [Page Up] - Increments the corresponding year by one
The component supports several calendar types - Gregorian, Buddhist, Islamic, Japanese and Persian.
By default the Gregorian Calendar is used. In order to use the Buddhist, Islamic, Japanese or Persian calendar,
you need to set the primaryCalendarType property and import one or more of the following modules:
Defines a short hint, intended to aid the user with data entry when the component has no value. Note: When no placeholder is set, the format pattern is displayed as a placeholder. Passing an empty string as the value of this property will make the component appear empty - without placeholder or format pattern.
Determines the name by which the component will be identified upon submission in an HTML form. Note: This property is only applicable within the context of an HTML Form element.
Defines the visibility of the week numbers column. Note: For calendars other than Gregorian, the week numbers are not displayed regardless of what is set.
Determines the minimum date available for selection. Note: If the formatPattern property is not set, the minDate value must be provided in the ISO date format (YYYY-MM-dd).
Determines the maximum date available for selection. Note: If the formatPattern property is not set, the maxDate value must be provided in the ISO date format (YYYY-MM-dd).
Defines how to calculate calendar weeks and first day of the week. If not set, the calendar will be displayed according to the currently set global configuration.
Defines the value state message that will be displayed as pop up under the component. Note: If not specified, a default text (in the respective language) will be displayed. Note: The valueStateMessage would be displayed, when the component is in Information, Critical or Negative value state.
Fired before the value state of the component is updated internally. The event is preventable, meaning that if it's default action is prevented, the component will not update the value state.