Date Pickers
Date Pickers allow users to enter a date either through text input, or by choosing a date from the calendar.
Native HTML date picker
Section titled “Native HTML date picker”Date range picker
Section titled “Date range picker”In Practice
Section titled “ In Practice”Date pickers can display past, present, or future dates. They should use sensible defaults based on their context.
Date Range
Section titled “Date Range”- The start and end dates may be manually entered or edited in the text field.
- May or may not include a dropdown with preset time periods.
- If a preset time period is selected, the system displays the corresponding dates in the text input field.
- The expandable calendar menu includes day, month, and year selections for start and end dates and highlights all dates between them.
- The calendar closes after an end date is selected.
Accessibility
Section titled “ Accessibility”- Date pickers are keyboard operable.
- Always give users the option to enter the date using the text field.
- For more information, see our accessibility guidelines.