Design Pattern Library 1.5

General Guidelines

Desktop/Web

Mobile (Tablet & Phone)

Visual Design Guidelines

Mobile - Date Picker/Calendar

Problem

Dates are notorious for having many possible representations varying by locale and personal preference.

Solution

Provide a visual representation of dates in the familiar calendar format to facilitate people entering dates in a consistent format.

Why

Date pickers provide a familiar calendar metaphor that resonates with most people and it helps them to think about dates in terms of where they are in the month and week. They help structure the date input in a way that your system can interpret reliably, thereby reducing validation errors caused by unrecognized date formats, and they are easier to use than multiple drop down choosers with, e.g., month, day, year.

Examples