Use the date range selection if:

• You need a time range and know that your user is a power user who has to input lots of data. If the keyboard is the primary device used for navigating the app, use two input fields. This allows the user to quickly jump from field to field. By selecting a date in one of the fields, the other field should recognize the information and jump to the same selection.

Do not use the date range selection if:

• You want to enter a date and a time. In this case, use the date picker or time picker instead.
• The user’s primary goal is not to select ranges. If this is the case, use the simple date picker.
• You want to let users choose from a flexible set of absolute and relative dates and date ranges. In this case, use the dynamic date range.

The date range selection consists of two components:

1. Date range input field
2. Date range picker

The user can type the date directly into the input field, or use the date picker. You can also show a prompt text in the field (property: placeholder). The system validates the date and gives the user feedback.

1. Current day
2. Currently selected date range

It is possible to add additional descriptive texts to the input field (a unit of measurement, for example) by using a new association in the sap.m.InputBase control called ariaDescribedBy. The association is responsible for referencing the elements that describe the control.

With the date range picker, the user can see a day view, month view, or year view. The current day and the selected date are highlighted. The calendar week is also visible in the day view. The calendar closes when a final day is selected. The user can click the arrows to view the previous and next days, months, or years (depending on the current view).

The selected date is shown with a blue background. The current day is indicated with a purple border in the calendar.

1. Previous month

2. Quick month selection

3. Quick year selection

4. Next month

5. Day selection

Optionally, you can offer a footer with OK and Cancel buttons. This gives users an alternative way of confirming the selected date range.

Alternative triggers for the Date Range Selection

In addition to the date range input field, you can set one of the following to trigger the date range selection popover:

• A button
• A link

The users can type two dates into the date range input field or click the calendar icon to open the calendar and select a date. These two possibilities work for all devices – desktops, tablets, and smartphones.

Users can click an arrow to shows the next or previous day, month, or year.

When they click the month the month picker is displayed.

In the month picker, after the users click a month to select it, the day picker is displayed with the focus on the last selected start date.

When the users click the current year, the year picker is displayed. After selecting a year, they navigate back to the day picker.

After the users select a start date, the dates that they hover over turn light blue to indicate they are selected for the range. When the users select an end date, the calendar closes. The range appears in the date input field.

You can offer a shortcut for navigating to the current date (sap.m.DateRangeSelection, property: showCurrentDateButton). This displays an additional Today icon button ( ) in the navigation part of the calendar.

When the user clicks the Today button, the system automatically makes the current date the starting date for the new date range.

If the user has already selected the first date in the date range and then clicks the Today button, the focus is set to the current date. The system cancels the previous selection and makes the current day the starting date for the new selection.

This feature is available for pickers that enable selection of individual days. For the others, the property has no effect.