Date Picker

When to use the date picker component

Scheduling.

When users need to schedule or record an event and benefit from the context of a calendar.

When the day of the week is important.

When knowing the day of the week helps users choose a specific date.

When to consider something else

Familiar dates.

When asking users for a date they know well, or can look up without using a calendar (like a birthday), use memorable date fields.

When the day of the week is irrelevant.

If there's no benefit to knowing the day of the week for a particular date, consider memorable date fields.

Usability guidance

Describe the date format.

Provide a hint of mm/dd/yyyy to help users enter the proper date format if they opt not to use the date picker.

Always allow a user to type in the date manually.

Usability testing suggests some people prefer manually typing the date rather than using the calendar picker. Whenever possible, keep the keyboard active so people can enter in the date information without having to use the picker.

Accessibility guidance

Test the date picker component in your own project.

USWDS tested the date picker component for accessibility. You should test your implementation, too.

Customize form controls accessibly.

If you customize this component, ensure that it continues to meet the accessibility requirements that apply to all form controls.

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.

USWDS Documentation

For more guidance, view the USWDS Date Picker Component Documentation.