Guidelines
When to use
Memorable dates: Select the simple date input when users know the date by heart, like for entering a birthdate or credit card expiration.
Approximate dates: Choose the simple date input when an exact date isn't needed. For example, when users need to enter the month and year of a past event, such as a purchase date.
Set up a task: Use a calendar picker when users need to see how a date relates to other days, like which day of the week it is or how close it is to today. This is ideal for scheduling tasks.
Date Picker vs. Date Range Picker
Date Picker: Use a date picker when the user needs to select a single specific date. This is ideal for scenarios where only one date is required, without the need to indicate a duration or span of time.
Example:
- Booking an appointment: When scheduling a doctor's appointment, users typically need to choose a specific date for their visit.
Range Picker: Use a range picker when the user needs to select a start and end date, representing a period of time. This is useful for scenarios where the duration or span of time is important.
Example:
- Booking a hotel stay: When reserving a hotel room, users often need to select both the check in and check out dates, indicating the length of their stay.
Behavior
|
Action |
Options |
|---|---|
|
Opening the calendar
|
The calendar can be opened in two ways: 1. Click the calendar icon on the far right of the field to open the calendar menu. 2. When the text field is focused, the calendar menu appears and stays open until a date is selected or focus is removed. |
|
Selecting a date
|
A date can be selected by: 1. Manually entering a date in the text input field. 2. Clicking on a date in the calendar menu. |
|
Navigating between months |
A user can move between months by, clicking the chevron icons at the top left and right of the calendar.
|
|
Selecting a year |
The current date and year are shown by default. To change the year, users can: 1. Manually type the year in the date text field. 2. Click the up and down arrows that appear when focusing or hovering over the year input in the calendar. 3. Select the year input and type a new year. |
|
Closing the calendar |
The calendar can be closed by: 1. Selecting a single date or the end date in a range, which will automatically close it. 2. Clicking anywhere outside the calendar menu.Removing focus from the picker.
|
Keyboard interactions
|
Key |
Interaction |
|---|---|
|
Arrow keys |
Using the Arrow keys to navigate and pressing Enter to select a date. |
|
Arrow keys |
Using the Arrow keys to navigate to the next or previous month. |
|
ESC keys |
Closing the Calendar |
Content
While a user is interacting with the Date Picker, they may come across unavailability, blocked off dates, or other situations when a date cannot be selected. In those cases, use error messages to guide users to solve the issue.
Tone
Keep an informative tone when writing hints and error messages while users interact with the Date Picker.
Do
- Guide users to solve the issue.
- Use various instructions/hints to cover for different situations.
Do not
- Write simple or generic messages that are unhelpful to the user.