Date picker

A date picker is a component used in web forms and applications that allow users to select dates through a calendar-style interface. The primary purpose is to provide an intuitive way for users to input or choose specific dates.

Keyboard Interactions

Users should be able to navigate through the dates available by using the Tab and Arrow keys. 

Users should be able to confirm their date selection using the Enter key. 

Users should be able to exit out of the date picker using the Escape key.

Behavior

Once activated, the date picker will show a calendar with selectable days, allowing the user to navigate through months and years (if applicable). They can select a specific day by clicking on it, or selecting it by using their keyboard.

The selected day is highlighted, to indicate to the user where they are on the calendar. Once the date is selected and confirmed, the date should appear in the date picker window.

Focus on clarity

Keep the design clean, and familiar to the user. Use a calendar-like layout with clearly labeled days, months, and years.

 

Use intuitive controls

Include intuitive navigation controls (like arrows) to switch between months and years easily.

 

Provide selection feedback

Provide users with visual feedback that indicates what date the user is selecting by highlighting it in a different color. 

Avoid auto-submission. Don’t use JavaScript to automatically submit the form (or do anything else) when an option is selected. Auto-submission disrupts screen readers because they select each option as they read them.

 

Instructions for keyboard navigation

You can navigate this component using the following commands (Mac-equivalent commands are in parentheses):

• Days use left and right arrows
• Weeks use up and down arrows
• Months by using page up (fn + up arrow) and page down (fn + down arrow)
• Years by using shift + page up (shift + fn + up arrow) and shift + page down (shift + fn + down arrow)
• Home (fn + left arrow) and End (fn + right arrow) keys navigate to the beginning and end of a week