Calendar Picker

Working Solution · Last modified July 15, 2009

Providing a familiar graphical interface helps users to easily apply or submit a date or date range to events, tasks, appointments as well as items with chronological order. Smart defaults such as selecting the current month and year and voiding drop downs or entry fields guarantee data and spelling accuracy on user entry error.


Delicious Bookmark this on Delicious

What Problem Does This Solve?

User wants to find or submit a particular piece of information based on a date or between a date range.

When to Use This Pattern

Use this pattern when the person interacting with the application or experience would want to easily apply a date or date range to an item. This includes contexts where the application itself needs to apply date metadata ("date-stamp") a piece of information in order to track, filter, and sort items by by date or date order.

 

Common scenarios include events, tasks, and appointments; as well as items usefully displayed in chronological or reverse-chronological order, such as blogs, photo uploads, and email messages.

What's the 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.

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.

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).

Why Use This Pattern?

  • The calendar widget provides a familiar graphical interface to users who may find it easier to select a date or multiple dates using a familiar metaphor over harder to use interface elements like drop downs and entry fields.
  • Additionally, use of the widget guarantees date and spelling accuracies (as long as the code is correct) and cuts down on user entry error.

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.