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
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
Section Metadata
style
column-section-1-1, no-footprint
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.
Related Links
Elements and Controls
- Dynamic Date (guidelines)
- Date Picker (guidelines)
Implementation
- Dynamic Date Range (SAPUI5 samples)
Visual Design
- Dynamic Date Range (Visual design specification)
Elements and Controls
- Dynamic Date (guidelines)
- Date Picker (guidelines)
Implementation
- Dynamic Date Range (SAPUI5 samples)