Date Pickers

Date Pickers allow users to enter a date either through text input, or by choosing a date from the calendar.

Code

Native HTML date picker

Default

Used when selecting a single date is needed. This implementation uses the text field component property type “date”.

Label

Toggle dark mode

Date range picker

Relies on the third-party libraryDate Range Pickerfor its features and functionality.View all resources

Default

Used when selecting a preset time period and/or date range is needed.

Time Period

Toggle dark mode

In Practice

Date pickers can display past, present, or future dates. They should use sensible defaults based on their context.

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

• 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.

Design resources

View component in Figma