Calendar Picker
From Interaction-Patterns.org
Contents |
[edit] Calendar Picker
[edit] Quick Summary
Helps the user to submit a date or a range between dates by opening a dropdown calendar where the desired date can be clicked.
[edit] Visual Examples
Is still missing. Please add links here if you find a suitable example.
[edit] Examples found on the World Wide Web
[edit] Use When
- If the user wants to/should submit a date or a timespan between two dates, for example when booking vacations or reserving a table at a restaurant.
- If the user wants to view/sort a list of items which have a timestamp.
[edit] Possible Solution
- Layout:
- By a specific date:
- The default Single month Calendar Widget displays the current month and year.
- Users are able to view only one month at a time. Clicking onto the arrow graphics will show the previous or next month.
- Between two dates:
- The Two-month Calendar Widget show two consecutive months at a time.
- Clicking on the arrow graphics shows the next month in the sequence, with the month on the right moving to the left and the next consecutive month occupying the right block.
- By a specific date:
- Interaction
- Selecting a single date:
- 1. The user is presented a calendar icon as an optional alternative to date selection from the standard date pulldowns.
- 2. User clicks on the calendar icon and the calendar widget opens below the date form entry fields, so as not to obscure them). The default date selected should be today.
- 3. The user may select a date from the graphical representation of the calendar by clicking one of the active dates. These may be in the future or the past depending on the scope of the data set or the task at hand. (i.e Selection of a flight when traveling would only show active dates in the future, selection of blog posts available to edit would be in the past.)
- 4. Clicking on a date in the single month calendar widget, registers that date as an option/constraint for selection and the widget closes.
- Selecting a date range in two successive instances of the popup widget:
- 1. The user is presented a calendar icon as an optional alternative to the first date selection form fields.
- 2. User clicks on the calendar icon and the calendar widget opens. The default date selected should be today.
- 3. The user selects a starting date.
- 4. The user invokes the calendar widget associated with the second date.
- 5. The system defaults to a date on or subsequent to the first date (not the current date).
- 6. The user selects an ending date for the range.
- 7. As each date is selected a highlight or other visual feedback should be indicated to remind the user which date they selected.
- 8. Once both dates are selected, the system registers the indicated date range as an option/constraint for selection and the widget closes.
- Selecting a range of dates in a single instance of the popup widget:
- 1. The user is presented a calendar icon as an optional alternative to two date selection options from the standard date pulldowns. The default date selected should be today.
- 2. The user selects a starting date and an ending date to bound a search between two dates. Users are able to view two months at a time. Clicking onto the arrow graphics should display past or future months one month at a time.
- 3. As each date is selected a highlight or other visual feedback should be indicated to remind the user which date they selected.
- 4. Once both dates are selected, the system registers the indicated date range as an option/constraint for selection and the widget closes.
- Selecting a single date:
- Notes:
- Hovering over the calendar icon should change the mouse pointer to a hand symbol.
- An affordance for "Go to Today" assists the user when the today's date is not the default.
- In some contexts (such as when booking travel or tracking events in the future) the calendar picker should offer a way to scroll forward and back by year.
- Default date and month should nearly always be the current month. When choosing a second date in a range from a second individual calendar picker (as with most travel website interfaces), the second calendar widget should default to the date selected with the first widget (as opposed to suggesting the current date).
- Display complete weeks, even at the beginning and ends of months. The visible dates from the previous and next months should appear duller or gray but they should also be selectable.
- Moving between days, months, etc. in a calendar picker is fairly intuitive for most users, though care needs to be taken not to have targets that are too small or that move (e.g., when the length of the month name is longer/shorter).
- Special Cases
- International considerations: The day of the week label is important because Asia countries may start with the Monday dates in the first column (Mon. - Sun.), whereas Western countries may start with the Sunday dates in the first column (Sun. - Sat.)
- Research indicates that it is better to launch the calendar picker from a calendar icon than to do so directly from the day/month/year fields or dropdowns, but as long as the calendar doesn't interfere with the ability to directly edit the field, and the field stays in focus, invoking from the date-entry form fields is not a problem. (Users do not expect the calendar widget to be invoked from trying to edit the field and they know to use the icon to invoke it, so this should only be done if it can be done in such a way as to not interfere with the behavior users are expecting when they bring focus to the field.)
- Also note that the research finding is conditional. When reasonable defaults can be set for two of the three date attributes (day, month, year), the widget will be in the way when the user is trying to edit just the third.
[edit] Rationale
- This method avoids possible confusion about the format the date must be in to be entered.
- Faster than entering a date by typing numbers.
