DateRangePicker with Minimum and Maximum Date - 1/1/2020 - 4/5/2020 format-pattern="dd/MM/yyyy"
DateRangePicker with format-pattern='long'
OverviewThe DateRangePicker enables the users to enter a localized date range using touch, mouse, keyboard input, or by selecting a date range in the calendar.
UsageThe 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
ES6 Module Import
ui5-daterange-pickerprovides advanced keyboard handling.
ui5-daterange-pickerinput field is focused the user can increment or decrement the corresponding field of the JS date object referenced by
_firstDateTimestamppropery if the caret symbol is before the delimiter character or
_lastDateTimestampproperty if the caret symbol is after the delimiter character. The following shortcuts are enabled:
- [PAGEDOWN] - Decrements the corresponding day of the month by one
- [SHIFT] + [PAGEDOWN] - Decrements the corresponding month by one
- [SHIFT] + [CTRL] + [PAGEDOWN] - Decrements the corresponding year by one
- [PAGEUP] - Increments the corresponding day of the month by one
- [SHIFT] + [PAGEUP] - Increments the corresponding month by one
- [SHIFT] + [CTRL] + [PAGEUP] - Increments the corresponding year by one
You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.
ui5-date-pickeris displayed as disabled.
Note: For calendars other than Gregorian, the week numbers are not displayed regardless of what is set.
ui5-date-pickerwill be submitted in an HTML form.
Important: For the
nameproperty to have effect, you must add the following import to your project:
Note: When set, a native
inputHTML element will be created inside the
ui5-date-pickerso that it can be submitted as part of an HTML form. Do not use this property unless you need to submit a form.
ui5-date-pickerhas 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
ui5-date-pickerappear empty - without placeholder or format pattern.
Available options are:
ui5-date-pickeris displayed as read-only.
Available options are:
This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the
slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no
slot attribute, goes the the
Note: If not specified, a default text (in the respective language) will be displayed.
valueStateMessagewould be displayed, when the
This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as
ui5-date-pickeris changed at each key stroke.