Updated: October 2, 2023

SAPUI5 Version 1.120

Dynamic Date Range

sap.m.DynamicDateRange

Intro

The dynamic date range is a standalone control that offers a choice of absolute and relative dates, using different offsets from the current date.

When to Use

Use the dynamic date range if:

You want to let users choose from a flexible set of absolute and relative dates and date ranges.
Your use case requires relative dates.

Do not use the dynamic date range if:

Users need to select a date range manually and can do this with simple date range selection.

Components

The dynamic date range has two main components:

Input with a button
Dropdown list with options

Available Values

The control offers 29 default options for selecting dates, which cover different use cases.

Single Dates:

Date
Today
Yesterday
Tomorrow

Date Ranges:

Date range
From
To
Year to date
Date to year
Last x days / weeks / months / quarters / years
Next x days / weeks / months / quarters / years
Today -x / +y

Weeks:

This week
Last week
Next week

Months:

Month
This month
Last month
Next month

Quarters:

This quarter
Last quarter
Next quarter
First quarter
Second quarter
Third quarter
Fourth quarter

Years:

This year
Last year
Next year

Application development teams can also implement custom options and plug them into the control.

Guidelines

If you offer the option Last X Days and/or Next X Days, also include the options Yesterday and Tomorrow respectively.

This ensures that the display field automatically shows Yesterday or Tomorrow when the value for X is “1” (Last 1 Day, Next 1 Day).

Dynamic date range components

Behavior and Interaction

If the user selects an option that requires specific user input, a subscreen opens for entering the values.

The existing date picker control is used for selecting dates.

Selecting a single date with the calendar

The dynamic date control also comes with more complex options for selecting relative dates. For example, “Today -x / +y” days allows users to enter a timeframe that includes the current day by entering the number of days before “today” and the number of days after “today”.

'Today -x / +y' option to select a date range that includes the current day

Responsiveness

On desktop devices, clicking the input icon for the dynamic date range opens a dropdown list with the predefined options.

Dynamic date range in compact mode

On mobile devices, tapping the input icon for the dynamic date range opens a full screen dialog. The dialog closes when the user selects a date or date range, or when the user taps Cancel.

Dynamic date range on mobile devices

Top Tips

Only offer options that are relevant for your use case.
You can also add your own values, if necessary.
If you use your own values, provide human readable text.