Date picker

Definition: A date picker is a selection of a single date or a range of dates. It represents time with days, weeks, and months.

Date picker

Use a date picker when you need users to input or select a specific date.

Anatomy

  1. Label
  2. Icon
  3. Placeholder + typed input + selected date format
  4. Call out
  5. Field

 

 

  1. Month selector
  2. Year selector
  3. Previous month
  4. Next month
  5. Week
  6. Selected date
  7. Today date
  8. Button

 

 

 

 

 

 

Variations

  1. Month and year selection
  2. Year selection
  3. Monthly inline date picker with range selection
  4. Yearly inline date picker with range selection