Skip to main content

DateTimePicker

Component to comfortably enter a date time value. The DateTimePicker component automatically uses the user's settings for the locale and timezone and formats the date and time accordingly.

OverviewPropertiesUsageAccessibility

New

Note

See Accessibility in Design Foundations for explanations of key concepts and best practices.

Keyboard accessibility and focus​

DateTimePicker handles focus management out of the box. When the calendar opens, focus moves into the calendar dialog; when it closes, focus returns to the trigger.

  • Don't override the component's built-in focus handling. Focus must move into the calendar dialog when it opens, and return to the trigger on close, so screen readers can announce the state change correctly.

Accessible names and roles​

The trigger uses the Strato CalendarIcon. The component provides a built-in accessible name for the trigger.

  • Do verify that the trigger's accessible name accurately reflects its purpose in context.

State announcements​

DateTimePicker handles state announcements out of the box: aria-expanded="true" when open; aria-expanded="false" when closed.

  • Do ensure that the calendar content follows in a logical tab order so users can navigate into it after the state is announced.
Still have questions?
Find answers in the Dynatrace Community