Formatting Dates & Times
Last updated: October 1, 2015 at 13:38 pm

Correct and consistent formatting style for the display of dates and times on our site.

Visual example of the element:

What problem does this element or pattern solve?
The date and time are important pieces of contextual information for users. A complete and consistent presentation of date and time information allows the user to accurately interpret and compare time/date information.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web

An example of this element or pattern in production:

Detailed specifications

Specifications To Consider

  • Do you use a 12-hour or 24-hour clock?
  • Show multiple examples of approved time formats. This should include hours and minutes, use and capitalization of AM and PM, and the display of seconds (if applicable).
  • Do you display dates with the month first (USA) or day first (Global)? If your site is international, does date formatting switch based on the user’s detected country?
  • Do you include the day of the week?
  • How do you show time zones or offsets?
  • Do you display years as 4 digits or only the last 2 digits? Are months displayed as numbers or words?
  • Be sure to include all approved abbreviations for months and days of the week. It is advisable to show examples of unapproved versions as well (e.g. MAR vs. Mar. vs. March). If you permit two or more display options, be sure to add guidelines defining when each should be used.

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:
scheduling, time zones, date format, iso 8601, timekeeping, time system, year, month, day, hour, minute, second, time representation, intervals, durations
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

Leave a Reply