Date picker

​

When to use

• When users need precision: If the user needs to select an exact date or time.
• To ensure proper formatting: Avoids input errors by enforcing a standard format.
• When date is the primary input: If date is the core action.

​

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 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

• If the date value has constraints (e.g. only past dates), disable invalid dates rather than letting users select them and fail on submit.
• Opening the control reveals a date picker anchored to the field; choosing a value commits it in the configured locale format.
• 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

• Programmatically link the popover trigger button to its visual label using matching id and htmlFor attributes on the Label component.
• Pass aria-invalid="true" to the trigger button when form validation fails, and link error text via aria-describedby.
• Format the trigger text clearly (e.g., “Jan 12, 2026” instead of raw ISO strings) so screen readers announce an informative accessible name when focused.