Use the dynamic date control if:

• You need flexibility between fixed and dynamic dates.
• You need dynamic dates that can be saved in the variant management (for example, show values from today regardless of when you open the app).
• You are using the smart filter bar.
• The user only needs to select one value.

Do not use the dynamic date control if:

• Users need to enter a date and a time. In this case, use the date picker or the date/time picker instead.
• Selecting ranges is not the user’s primary goal. In this case, use the simple date picker.
• You are not using the smart filter bar.
• You want to offer dynamic date range selection outside the smart filter bar (for example, in a table toolbar). Use the dynamic date range control instead.

Value help for dynamic date range – Size S

Value help for dynamic date range – Size L

The two clickable areas of the dynamic date control

The dynamic date consists of two components:
(A) Date input field with suggestions
(B) Value help popover

On all devices, users can either use the input field to type a date, or use the value help button to open the popover.

Value help popover – Input field

Value help popover – Date pickers

Value help popover – Read only

Value help popover – Select control

Values Offered

• From
• To
• Date Range
• Today
• Today -X / +Y days
• Last X days
• Next X days
• This week
• Last week
• Last X weeks

Offered Values

• Next week
• Next X weeks
• Month
• This month
• Last month
• Last X months
• Next X months
• This quarter
• Last quarter
• Last X quarters
• Next quarter

Offered Values

• Next X quarters
• First quarter
• Second quarter
• Third quarter
• Fourth quarter
• This year
• Last year
• Last X years
• Next year
• Next X years
• Year to date

Typing data into the date range input field

The user can type keywords or numbers into the date range input field. For example, if the user types a number, the system automatically suggests possible dates. All dynamic dates show the actual dates to help the user select the right value.

List of suggestions shown after typed input

Opening the value help and selecting a time period

Clicking the value help icon opens a popover with additional options for defining the time period. The user can choose from several time periods by clicking the down arrow in the select control. Once a time period has been chosen, the selection box closes.

Opening the value help popover and selecting a time period

Defining a custom time period (X)

If the user selects a custom time period with “X”, such as Last X days, the control shows a simple input field for entering the number. The text in the date input field changes according to the user’s input.

Custom time period with a simple input field

Selecting a date range

If the user selects a time period that requires input of a start and end date, two date pickers appear. These can be opened by clicking the calendar icon. The text in the date range input field changes according to the user’s input.

Selected time period with two date pickers (start date and end date)

Visible frame that shows an error when the field is out of focus

Error state with meaningful text – The date range input field is in focus

Elements and Controls

• Date Picker (guidelines)
• Input Field (guidelines)
• Select (guidelines)

Implementation

• Date Picker (SAPUI5 samples)
• Input (SAPUI5 samples)
• Select (SAPUI5 samples)
• Smart Controls (SAPUI5 samples)
• Smart Filter Bar (SAPUI5 API reference)