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.

The dynamic date consists of two components: the date input field with suggestions, and the 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.

Dynamic Date Input Field

The user can type data directly into the input field. Upon user input, a list of suggestions appears.

Value Help Popover

The value help popover offers all available values the user can choose from. Depending on the selected time period, the popover shows different controls. It either shows an input field (1), one or two date pickers (2), a read-only text with the chosen time period and date range (3), or a 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.

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.

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.

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.

Validation

Use inline validation to give the user feedback, especially for errors and warnings. The possible states are “warning”, “error”, and “success”.

The dynamic date input field in question is highlighted by a frame in the corresponding color. If the focus is inside the field, an explanation is shown. Ensure that this explanation is as specific as possible.