Date picker

Date picker allows users to enter a date through text input or choose a date from a calendar.

Examples

An example of a date picker calendar not attached to any element.

This component accepts options to configure its behavior.

Option	Default	Description
`date`	`null`	Sets the initial date into the date picker. Overrides the value of the input.
`locale`	`'en'`	Sets the locale for names of months and days of the week. The locales supported are the ones supported by Day.js. Locales must be imported before using them. List of supported locales.
`min`	`'01/01/1900'`	Prevent user pick a date before the configured.
`max`	`'12/31/2100'`	Prevent user pick a date after the configured.
`format`	`'MM/DD/YYYY'`	Format of the date used in the input.

Key	Function
`Tab`	Moves focus to next element in Tab sequence. If focus is on the pop-over, moves focus to the first chevron.
`Shift + Tab`	Moves focus to the previous focusable element.
`Enter`,`Space`	Selects the option and closes the dropdown.
`Up Arrow`	Moves focus to the same day of the previous week.
`Down Arrow`	Moves focus to the same day of the next week.
`Right Arrow`	Moves focus to the next day.
`Left Arrow`	Moves focus to the previous day.
`Esc`	Closes the popup.

For comprehensive details on keyboard support, refer to our Keyboard Control Guide.

Visit WebAIM for keyboard techniques.

Keyboard Navigation: Support navigation through days, months, and years using arrow keys, and allow selection with the "Enter" key.
Use label elements to provide descriptive labels for each select component. Ensure the for attribute of the label matches the id of the select box to support screen readers.
Use appropriate ARIA roles and attributes to enhance accessibility. For example, role="listbox" for the select element and role="option" for each option.
Error Handling and Feedback: Provide clear and immediate feedback for actions such as selection errors. Use ARIA live regions to announce updates or errors dynamically.
Test compatibility with various screen readers (like JAWS, NVDA, or VoiceOver) to ensure the date picker component is announced correctly. Options should be clearly read out when navigated.
Implement visible focus styles to help keyboard users determine which element has focus.

Ensure all interactive elements in the date picker, like day selections and navigation buttons, meet the minimum target size of 44x44 pixels, as recommended by WCAG 2.5.5.
Design elements with adequate spacing to prevent accidental activations.
Design the date picker with high contrast between text and background colors, ensuring a minimum contrast ratio of 4.5:1 for text.
Employ distinct visual styles for error states using icons, text styles, and colors to clearly denote and explain errors like invalid dates or format issues.
Implement noticeable focus indicators on interactive elements, using enhanced borders, outlines, or shadows to clearly mark the active element during keyboard navigation.
Use spacing, typography, and visual cues effectively.
Maintain consistency in the design of the date picker to provide a cohesive user experience.

Find live examples in the W3 Date Picker Example.

Explore additional accessibility tips in the general Accessibility Guide.

Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. (Level A)
Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
Headings and Labels: Headings and labels describe topic or purpose. (Level AA)
Labels or Instructions: Labels or instructions are provided when content requires user input. (Level A)
Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)