Date Picker

Date Picker allows for the selection of a single date or a range of dates from a calendar.

Date Picker Intro

Users can select dates from the calendar or by typing dates into an input.

Date Picker Anatomy
  1. Calendar icon
  2. Input text
  3. Input field
  4. Previous and next month selectors
  5. Year selector
  6. Previous month date cell
  7. Current date cell
  8. Selected range start date
  9. Selected range highlight
  10. Selected range hovered cell
  11. Selected range end date
  12. Hovered cell
  13. Next month date cell
  14. Container elevation
Date Picker Single

Date picker can also accept a range of dates.

Date Picker Date Select
Date Picker Month Select

Quick selection date pickers give users choices of pre-selected ranges.

Date Picker Quick Selection
Date Picker Events

Date and time can be combined into a single picker.

Date Picker Date and Time

Date Picker has seven states — enabled, hover, focus, active, filled, disabled and read only.

Date Picker States

Date picker can be displayed in large, medium and small sizes.

Date Picker Sizes
  • Format dates as DD Mon, YYYY in the date input field.
  • Do not disable text entry.
  • Provide date presets with common date range selections, such a month, quarter, or today+1.