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.
Types
Guidelines
It is recommended the date picker be added when users need to schedule or record a calendared event.
Anatomy
- Field label: Indicate the field's purpose with a descriptive label.
- Date field: This field allows users to manually enter dates.
- Date format: Icon/image that indicates whether a panel is collapsed or expanded.
- Icon (calendar): User can choose date from calendar pop-up using calendar icon.
- Month & Year: Each month of the visual calendar shows the month and year.
- Days of the week: Displays the days of the week.
- Previous & Next: Users are able to move backward or forward one month at a time.
- Days: The number of days in a month.
- Today: The current day of the week.
Interaction
- Date input: It is used when the user can recall the date without using a calendar.
- Calendar select: It is used to pick a specific date.
Specifications
These specifications should be followed by developers and designers when creating date pickers.
Do
- 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.
Don't
- When the date provided is off by 1 day or more.
- When selecting a date either in the past or future