Date Pickers

A graphical user interface widget allows the user to select a date from a calendar.

A date picker can be used to select a minimum and maximum date range. Based on need, these parameters can be applied together or separately.


See the Pen Datepickers by USANA UX (@usana_ux) on CodePen.


It is recommended the date picker be added when users need to schedule or record a calendared event.


  1. Field label: Indicate the field's purpose with a descriptive label.
  2. Date field: This field allows users to manually enter dates.
  3. Date format: Icon/image that indicates whether a panel is collapsed or expanded.
  4. Icon (calendar): User can choose date from calendar pop-up using calendar icon.
  5. Month & Year: Each month of the visual calendar shows the month and year.
  6. Days of the week: Displays the days of the week.
  7. Previous & Next: Users are able to move backward or forward one month at a time.
  8. Days: The number of days in a month.
  9. Today: The current day of the week.


  1. Date input: It is used when the user can recall the date without using a calendar.
  2. Calendar select: It is used to pick a specific date.


These specifications should be followed by developers and designers when creating date pickers.

  • Use a Date Picker when it's more efficient that typing a date.
  • Use a Date Picker when the date to be selected will be within a year of the default date.
  • When the date provided is off by 1 day or more.
  • When selecting a date either in the past or future