Time range picker

​

When to use

• Filtering views: Filtering data or reports by a time window within a day (for example shift schedules or business hours).
• To ensure proper formatting: Avoids input errors by enforcing a standard time format.
• Comparison: When comparing activity across a defined time period on the same calendar day.

​

When to use something else

• For relative time queries: While a TimeRange picker may be helpful, consider adding shortcuts to the picker for a quicker selection, such as “Last 16 hours”, “Last 40 minutes” and “Next hour”.
• When entering fixed or recurring time values: Consider allowing for cron expressions or pre-set 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 match the time format (12-hour or 24-hour) to the user’s locale or application setting — don’t hardcode one.
• Do include AM/PM selection clearly when using 12-hour format; ambiguity here causes real errors.
• Do enforce valid start/end ordering; show validation when the range is incomplete or inverted.
• Don’t include seconds unless the context requires it (log timestamps, precise scheduling) — it adds complexity most users don’t need.

​

Behavior

• Opening the control reveals a time picker UI anchored to the field.
• Validate that the end is after the start when both times are set.
• If the time value has constraints (for example, less than 10 hour windows), disable invalid times rather than letting users select them and fail on submit.
• The picker should remain open until the user has clicked Apply or selected both a start and end time.
• 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

​

Accessibility

• Associate the single trigger button or input element with an explicit Label component using matching id and htmlFor attributes.
• Format the single trigger text to explicitly announce full start and end time boundaries (e.g., “Selected time range: 08:00 AM to 05:00 PM”) so screen readers convey the complete selection.
• Pass clear time format or interaction instructions to the single field via aria-describedby (e.g., specifying expected time entry format or indicating cross-midnight range support).
• Apply aria-invalid="true" directly to the single trigger element when range validation fails, such as when an invalid time format or unsupported time duration is entered.
• Link error feedback text directly to the single trigger element using aria-describedby and announce live validation updates using an aria-live="polite" region.
• Ensure quick preset shortcut buttons inside the popover surface return focus directly to the single trigger element upon selection if the panel auto-closes.