The DateRangePicker enables the users to enter a localized date range using touch, mouse, keyboard input, or by selecting a date range in the calendar.
The user can enter a date by:
Using the calendar that opens in a popup or typing it in directly in the input field (not available for mobile devices).
For the ui5-daterange-picker
The ui5-daterange-picker provides advanced keyboard handling.
When the ui5-daterange-picker input field is focused the user can
increment or decrement respectively the range start or end date, depending on where the cursor is.
The following shortcuts are available:
[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
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 with which the component will be submitted in an HTML form. Important: For the name property to have effect, you must add the following import to your project: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js"; Note: When set, a native input HTML element will be created inside the component so that it can be submitted as part of an HTML form. Do not use this property unless you need to submit a form.
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 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, Warning or Error 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.