Dates, Times, and Ranges
Last updated: September 14, 2015 at 14:03 pm

The methods by which the user enters dates, times, or spans of time into a form including preformatted text fields, calendar pickers, and select lists.

Visual example of the element:

What problem does this element or pattern solve?
There are many accepted ways for users to enter dates and times. Select lists are common for both, while calendar pickers are used frequently for to specify dates. However, the interactions become more complicated when the user must specify a range between two dates or times. Due to its complex nature, this is a standard which may require more senior owners who understand all the variations or Use Cases that need to be addressed.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web, Desktop App, Tablet App, Smartphone App

An example of this element or pattern in production:

Detailed specifications

Specifications To Consider

  • Will you use calendar date pickers or select lists? Select lists take up far less screen space, but calendar-pickers showing the day of the week may be more helpful.
  • When using calendar pickers, be careful to follow local customs for starting the week on Sunday versus Monday. This will minimize user mistakes.
  • When using calendar pickers for a date range, should you show two months at a time to cover ranges which start one month and end in the next? Will the range between the start and end date be highlighted? What is the interaction for changing the start or end date?
  • Define the visual styling for all calendar picker controls, such as advancing months or years.
  • When selecting times,how will you address time zones? When specifying time ranges, how will you communicate total time along with shifts in time zones or days (such as air travel)

Location of assets to build this element or pattern
Location of UX or visual design assets
Location of development code repository

Additional details
Information on research, user testing, or usability reports:

Not Applicable (Remember: no field should be blank!)

This element or pattern may also be known as:
date picker, calendar picker, time entry, date range, durations, spans of time
Related elements within this Style Framework:

Not Applicable (Remember: no field should be blank!)

Owners and governance
UX or design 0wner
John Designowner
Business or marketing owner
Mary Businessowner
Development owner
Mike Devowner

Other information
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)

Comments & Questions