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 a simple date range selection.
Components
The dynamic date range has two main components:
- Input with a button
- Dropdown list with options
Dynamic date range components
Available Values
The control offers 42 default options for selecting dates, which cover different use cases. Also, application development teams can implement custom options and plug them into the control.
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).
Single Dates
- Date
- Today
- Yesterday
- Tomorrow
- First Day in This Week
- Last Day in This Week
- First Day in This Month
- Last Day in This Month
- First Day in This Quarter
- Last Day in This Quarter
- First Day in This Year
- Last Day in This Year
- Date and Time
Date Ranges
- From/To
- From/To (Date and Time)
- From
- To
- From (Date and Time)
- To (Date and Time)
- Year to Date
- Date to Year
- Last x Minutes / Hours / Days / Weeks / Months / Quarters / Years
- Next x Minutes / Hours / Days / Weeks / Months / Quarters / Years
- Today -X / +Y
Weeks
- This Week
- Last Week
- Next Week
Months
- Month
- Month in Year
- 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
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.
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)