Calendar Picker Design pattern

Problem summary

The user wants to find or submit information based on a date or date range

Example

la.everyblock.com

Usage

  • Use when the user wants to easily choose a date or date range in order to submit, track, sort, or filter data.
  • Do not use in isolation, when the user is more familiar and efficient with another way of inputting a date. Some users prefer inputting a date via a text field.
  • Do not use when the date to be inputted is more easily inputted via writing the date as text – an example could be birthdays (18, 30, 50, or 70 years back – requires many clicks for selection)

Solution

The calendar picker is seen activated in a variety of ways:

  • When clicking a link prompting for selecting a date
  • When selecting an field for inputting a date
  • When clicking a calendar icon most often placed next to the field used for inputting a date

On activation, a box with a month-calendar is laid over the current page, prompting the user to select a date in the box. It is most common to only show one month, but some interfaces show up to 3 month calendars next to each other to ease the click-burden of the user and provide a better overview.

Shortcuts

The month-box calendar comes with several different shortcuts:

  • Select a date
  • Go to the previous/next month
  • Go to the previous/next year
  • Go to today (Especially important when today’s date is not the default)
  • Close the calendar picker

Locking-in the period of selection

For some interfaces, it makes sense to not allow the selection of certain dates. An example often used is to only make it possible to select banking days, days in the future, or days within the few forthcoming months.

Two ways of inputting data: speedy and easy

When designing for efficiency in web application, an area that often gets little attention is the contexts of input. On most desktop computers, there are ways of inputting data: via keyboard or mouse.

The calendar picker is often a mouse-only pattern, where the user selects a date by clicking on it. While the solution provides a great experience, it can be considered cumbersome for expert users. Using a calendar picker is the easy way of inputting a date.

Consider also having a speedy way of inputting a date – maybe one where the user does not have to change input devices – to go from the keyboard to the mouse – but just stay on the keyboard and manually entering the date as text.

For accommodating text inputs, consider using the Forgiving Format pattern to lessen input errors.

Good defaults

Use the Good defaults pattern to better data and spelling accuracy on input errors by pre-selecting appropriate dates.

What defaults to pre-select depend on the context, but will most often be the current date or time. If you however were designing a public transport route planner, you might default the start time to a half hour from now, as most travelers won’t be starting their journey right away when searching for a fare.

Check date range validity

If the user is selecting a date range, it is good practice to never let end-date be before the start date. That means listening to the start-date for changes and changing the end-date if the start date is set to anything bigger.

Display complete weeks

Display complete weeks, even when a month does not begin at the end of the week. Grey out visible dates from previous and next months, but be sure they are still selectable.

Make link targets big

Make sure that link targets are big and thus easy to click on.

Rationale

The calendar picker is a familiar graphical interface that is commonly understood among users. It helps the user easily choose a date or date range for use in submitting information or filtering data.

Discussion

International considerations

In some countries it is typical to display a calendar with Sunday as the first day of the week, where in many European and Asian countries, Monday is typically depicted as the first day of the week.

Some countries (E.g. Germany and Scandinavian countries) use week numbers for general planning purposes. In these countries, using the week number is almost as common as using the month name for describing a date range. Consider displaying the week number for each week row.

More example images of the 'Calendar Picker' pattern

  • travel.yahoo.com

  • da.momondo.com

    Choosing a date at the travel aggregator, momondo.com

  • www.sas.dk

    At the Danish version of the Scandinavian Airlines website a calendar picker is used to allow the user to easily select his departure and homecoming dates. Notice how the calendars aren't presented in a pop-up modal window like the pattern is usually seen.

  • www.travelstart.co.za

    Non pop-up calendar-picker at travelstart.co.za

View more example screenshots

12 Comments

Post a comment

Required. Real name or initials only.
Required. Will not be published.

Browsing Design patterns

|
Vote down Vote up
Out of 94 votes, 93.62% like this one.

Example images

  • travel.yahoo.com
  • da.momondo.com
  • www.sas.dk
  • www.travelstart.co.za
  • google.com
  • google.com

Is also called...

  • Date picker
  • Date selector

Related articles