Date time range picker

​

When to use

• Time boundaries: Event windows, shift schedules, or log queries where both date and time boundaries matter or when users need to compare intervals that span less than a full day.

​

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 DateTime 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.
• Do include AM/PM selection clearly when using 12-hour format; ambiguity here causes real errors.
• Don’t change the predefined date format.
• Don’t truncate dates inside the Input.
• Don’t include seconds unless the context requires it (log timestamps, precise scheduling) — it adds complexity most users don’t need.

​

Behavior

• Enforce valid start/end ordering; show validation when the range is incomplete or inverted.
• Opening the control reveals a date and time picker calendar UI anchored to the field.
• Validate that the end is after the start when both date and time are set.
• The picker should remain open until the user has clicked Apply or selected both a start and end 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, Chart time-range filters.

​

Accessibility

• Structure trigger button text to explicitly announce both full start and end timestamps (e.g., “Selected range: August 1, 2026, 08:00 to August 5, 2026, 17:00”).
• 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 boundaries (e.g., “Jan 12, 2026, 08:00 to Jan 19, 2026, 17:00”) so screen readers convey the complete selection.
• Pass clear interaction or format instructions to the single field via aria-describedby (e.g., explaining that selection requires choosing both a start and end timestamp).
• Apply aria-invalid="true" directly to the single trigger element when range validation fails, such as when an end timestamp precedes a start timestamp or a required range is incomplete.
• 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.