When to use
- Filtering views: Filtering data or reports by a date window.
- To ensure proper formatting: Avoids input errors by enforcing a standard format.
- Comparison: When comparing activity across a defined period.
When to use something else
- When looking for recent or real time data: Consider allowing the user to sort by recent activity or toggle on “live data”.
- For relative date queries: While a Date range picker may be helpful, consider adding shortcuts to the picker for a quicker selection, such as “Last week”, “Last month” and “Last year”.
- When entering fixed or recurring time values: Consider allowing for cron expressions or pre-set date and time stamps users can choose from.
- When exact timing and format is not important: When users leave comments or descriptions where they reference a date or time but the formatting does not matter, provide a simple Input or Textarea.
Dos and don’ts
- Do allow for shortcuts when it would help speed up date selection.
- Don’t change the predefined date format.
- Don’t truncate dates inside the Input.
Behavior
- Enforce valid start/end ordering; show validation when the range is incomplete or inverted.
- Opening the control reveals a date picker calendar UI anchored to the field.
- The picker should remain open until the user has clicked
Applyor selected both a date and time value. - Keyboard users must be able to type valid values and open the picker without relying on the mouse alone (implementation-specific shortcuts allowed).
Often used with
- Label, Helper text, Data grid filters.
Accessibility
- Structure the trigger button text to explicitly announce both start and end boundary dates (e.g., “Selected range: Jan 12, 2026 to Jan 19, 2026”).
- Provide an accessible description via
aria-describedbyinforming screen reader users that selection requires choosing two consecutive dates. - Announce invalid date selections (such as a start date occurring after an end date) immediately using an
aria-live="polite"error region.