Date and time | Contents

Looking for information on the design or layout? Check out the Date & Time Pattern page.

Definition

Date and time inform the user of calendar information, durations and time periods. Presenting this information ensures continuity throughout the site experience and provides clarity for users across different locales and use cases.

Overview

Localization

Our source language is EN-US (US English). Remember to hand off designs to the Localization team.

Confluence: Localization Operations Team
Slack: #prj-translations

Follow local conventions for style, punctuation and sequence:

For the US (EN-US), use 12-hour time with AM/PM
For most European locales, use 24-hour time
Always display time in the user's local timezone

Engineering notes

Use the Intl browser API for localization. This will automatically localize dates and times into the correct format based on locale and timezone settings
Where manually-created content needs to be formatted correctly in the code, use the relevant guidelines shown in this documentation
Below is an example of using the Intl API. Additional examples are embedded in the previews on this page

{
  new Intl.DateTimeFormat('en-us', {
    month: 'short',
    day: 'numeric',
  }).format(new Date(2024, 3, 6))
}

{
  new Intl.DateTimeFormat('en-us', {
    month: 'short',
    day: 'numeric',
  }).format(new Date(2024, 3, 6))
}

Structure

Dates, months and years

<ul>
  <li>
    See website for details. Exceptions apply. Offer expires{' '}
    {new Intl.DateTimeFormat('en-us', {
      month: 'long',
      day: 'numeric',
      year: 'numeric',
    }).format(new Date(2024, 3, 6))}
  </li>
  <li>
    See website for details. Exceptions apply. Offer expires{' '}
    {new Intl.DateTimeFormat('en-us', {
      month: 'short',
      day: 'numeric',
      year: 'numeric',
    }).format(new Date(2024, 3, 6))}
  </li>
</ul>

<ul>
  <li>
    See website for details. Exceptions apply. Offer expires{' '}
    {new Intl.DateTimeFormat('en-us', {
      month: 'long',
      day: 'numeric',
      year: 'numeric',
    }).format(new Date(2024, 3, 6))}
  </li>
  <li>
    See website for details. Exceptions apply. Offer expires{' '}
    {new Intl.DateTimeFormat('en-us', {
      month: 'short',
      day: 'numeric',
      year: 'numeric',
    }).format(new Date(2024, 3, 6))}
  </li>
</ul>

Always include month and date
Write the date as a number, not a full word or ordinal. For example, use "8" instead of "eighth" or "8th"
Including the year is optional, but it should be displayed when possible, particularly when there is a high likelihood the date will be referenced outside of the current calendar year. For example, include the year for invoice billing dates
Alternatively, if it's likely the customer will see the information within the same day or the next calendar day, you can use "today" or "tomorrow" instead of the date

The following guidelines for dates, months and years apply specifically to EN-US:

Use the format [Day of week][space][Month][space][date][comma][space][year]. Not all elements must appear at once and are context-specific:
- Month and day: January 2
- Month, day and year: January 2, 2026
- Day of the week, month and day: Monday, January 2
- Day of the week, month, day and year (all): Monday, January 2, 2026

Instead of

March 8th
March eight
3/8/2026
8 March 2026

Use

March 8
March 8, 2026

Abbreviations (days and months)

Spell out full words for days and months when space allows
Only abbreviate when space is limited
Be consistent when using abbreviations
Don’t include a period/full stop after an abbreviated day or month

The following guidelines for abbreviations apply specifically to EN-US:

Always use 3-letter abbreviations when abbreviating:

Days of the week: Mon, Tue, Wed, Thu, Fri, Sat, Sun
Months of the year: Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec

Instead of

Sept 8, 2026
Sep. 8

Use

Sep 8, 2026
Sep 8

Date ranges

<ul>
  <li>
    {new Intl.DateTimeFormat('en-us', {
      month: 'long',
      day: 'numeric',
    }).formatRange(new Date(2024, 9, 2), new Date(2024, 10, 23))}
  </li>
  <li>
    {new Intl.DateTimeFormat('en-us', {
      month: 'long',
      day: 'numeric',
    }).formatRange(new Date(2024, 10, 2), new Date(2024, 10, 23))}
  </li>
  <li>
    The order was placed on{' '}
    {new Intl.DateTimeFormat('en-us', {
      month: 'short',
      day: 'numeric',
      year: 'numeric',
    }).format(new Date(2019, 0, 3))}
  </li>
  <li>
    The sale runs in the next calendar year from
    {new Intl.DateTimeFormat('en-us', {
      month: 'short',
      day: 'numeric',
      year: 'numeric',
    }).formatRange(
      new Date(new Date().getFullYear() + 1, 0, 3),
      new Date(new Date().getFullYear() + 1, 1, 23),
    )}
  </li>
</ul>

<ul>
  <li>
    {new Intl.DateTimeFormat('en-us', {
      month: 'long',
      day: 'numeric',
    }).formatRange(new Date(2024, 9, 2), new Date(2024, 10, 23))}
  </li>
  <li>
    {new Intl.DateTimeFormat('en-us', {
      month: 'long',
      day: 'numeric',
    }).formatRange(new Date(2024, 10, 2), new Date(2024, 10, 23))}
  </li>
  <li>
    The order was placed on{' '}
    {new Intl.DateTimeFormat('en-us', {
      month: 'short',
      day: 'numeric',
      year: 'numeric',
    }).format(new Date(2019, 0, 3))}
  </li>
  <li>
    The sale runs in the next calendar year from
    {new Intl.DateTimeFormat('en-us', {
      month: 'short',
      day: 'numeric',
      year: 'numeric',
    }).formatRange(
      new Date(new Date().getFullYear() + 1, 0, 3),
      new Date(new Date().getFullYear() + 1, 1, 23),
    )}
  </li>
</ul>

If the date range falls within the same month, don't repeat the month
If the date range falls within the same year, don't repeat the year

The following guidelines for date ranges apply specifically to EN-US:

In a full sentence, write out "to" between a range of dates. If space is tight, "to" can be replaced with an en dash "–" with no spaces before or after
- Tip: On a Mac, use Option + Hyphen (-) to create an en dash

Instead of

March 29 -- April 3
March 29 until April 3
March 29-March 31

Use

March 29–April 3
March 29 to April 3
March 29–31

Time

<ul>
  <li>
    {new Intl.DateTimeFormat('en-us', {
      timeZone: 'America/New_York',
      hour: 'numeric',
      minute: '2-digit',
    }).format(new Date())}{' '}
    (EN-US, America/New_York)
  </li>
  <li>
    {new Intl.DateTimeFormat('en-us', {
      timeZone: 'America/New_York',
      hour: 'numeric',
      minute: '2-digit',
      timeZoneName: 'short',
    }).format(new Date())}{' '}
    (EN-US, America/New_York)
  </li>
  <li>
    {new Intl.DateTimeFormat('en-ie', {
      timeZone: 'Europe/Dublin',
      hour: 'numeric',
      minute: '2-digit',
    }).format(new Date())}{' '}
    (EN-IE, Europe/Dublin)
  </li>
  <li>
    {new Intl.DateTimeFormat('en-ie', {
      timeZone: 'Europe/Dublin',
      hour: 'numeric',
      minute: '2-digit',
      timeZoneName: 'short',
    }).format(new Date())}{' '}
    (EN-UE, Europe/Dublin)
  </li>
  <li>
    {new Intl.DateTimeFormat('en-us', {
      timeZone: 'America/New_York',
      month: 'long',
      day: 'numeric',
      year: 'numeric',
      hour: 'numeric',
      minute: '2-digit',
    }).format(new Date())}
  </li>
  <li>
    {new Intl.DateTimeFormat('en-us', {
      timeZone: 'America/New_York',
      month: 'short',
      day: 'numeric',
      year: 'numeric',
      hour: 'numeric',
      minute: '2-digit',
    }).format(new Date())}
  </li>
  <li>
    {new Intl.DateTimeFormat('fr-fr', {
      timeZone: 'Europe/Paris',
      month: 'long',
      day: 'numeric',
      year: 'numeric',
      hour: 'numeric',
      minute: '2-digit',
    }).format(new Date())}{' '}
    (fr-fr, Europe/Paris)
  </li>
  <li>
    {new Intl.DateTimeFormat('fr-fr', {
      timeZone: 'Europe/Paris',
      month: 'short',
      day: 'numeric',
      year: 'numeric',
      hour: 'numeric',
      minute: '2-digit',
    }).format(new Date())}{' '}
    (fr-fr, Europe/Paris)
  </li>
</ul>

<ul>
  <li>
    {new Intl.DateTimeFormat('en-us', {
      timeZone: 'America/New_York',
      hour: 'numeric',
      minute: '2-digit',
    }).format(new Date())}{' '}
    (EN-US, America/New_York)
  </li>
  <li>
    {new Intl.DateTimeFormat('en-us', {
      timeZone: 'America/New_York',
      hour: 'numeric',
      minute: '2-digit',
      timeZoneName: 'short',
    }).format(new Date())}{' '}
    (EN-US, America/New_York)
  </li>
  <li>
    {new Intl.DateTimeFormat('en-ie', {
      timeZone: 'Europe/Dublin',
      hour: 'numeric',
      minute: '2-digit',
    }).format(new Date())}{' '}
    (EN-IE, Europe/Dublin)
  </li>
  <li>
    {new Intl.DateTimeFormat('en-ie', {
      timeZone: 'Europe/Dublin',
      hour: 'numeric',
      minute: '2-digit',
      timeZoneName: 'short',
    }).format(new Date())}{' '}
    (EN-UE, Europe/Dublin)
  </li>
  <li>
    {new Intl.DateTimeFormat('en-us', {
      timeZone: 'America/New_York',
      month: 'long',
      day: 'numeric',
      year: 'numeric',
      hour: 'numeric',
      minute: '2-digit',
    }).format(new Date())}
  </li>
  <li>
    {new Intl.DateTimeFormat('en-us', {
      timeZone: 'America/New_York',
      month: 'short',
      day: 'numeric',
      year: 'numeric',
      hour: 'numeric',
      minute: '2-digit',
    }).format(new Date())}
  </li>
  <li>
    {new Intl.DateTimeFormat('fr-fr', {
      timeZone: 'Europe/Paris',
      month: 'long',
      day: 'numeric',
      year: 'numeric',
      hour: 'numeric',
      minute: '2-digit',
    }).format(new Date())}{' '}
    (fr-fr, Europe/Paris)
  </li>
  <li>
    {new Intl.DateTimeFormat('fr-fr', {
      timeZone: 'Europe/Paris',
      month: 'short',
      day: 'numeric',
      year: 'numeric',
      hour: 'numeric',
      minute: '2-digit',
    }).format(new Date())}{' '}
    (fr-fr, Europe/Paris)
  </li>
</ul>

Always display time in the local timezone. The Intl API will automatically localize time
If writing manual content, follow the local convention for style, punctuation, and sequence
- In the US, use 12-hour time with AM or PM
- For most European locals, use 24-hour time

The following guidelines for time apply specifically to EN-US:

Use the format [hours][colon][minutes][space][AM or PM]
Use the 12-hour clock with AM or PM
Write AM and PM in uppercase without periods. Only include a period as a full stop when the time appears at the end of a sentence
Insert a space between the numeral and AM/PM
Don't use 24-hour time (also known as military time)
Use a colon to separate hours from minutes
Don’t start times with a “0”
Always include both hours and minutes, even when minutes are “00”

Instead of

7:30 a.m.
13:30
11:30PM
9AM
07:30 AM

Use

7:30 AM
1:30 PM
11:30 PM
9:00 AM
7:30 AM

Time ranges

<ul>
  <li>
    {new Intl.DateTimeFormat('en-us', {
      timeZone: 'America/New_York',
      hour: 'numeric',
      minute: '2-digit',
    }).formatRange(
      new Date(2024, 11, 2, 8, 0, 0),
      new Date(2024, 11, 2, 13, 0, 0),
    )}
  </li>
  <li>
    {new Intl.DateTimeFormat('en-us', {
      timeZone: 'America/New_York',
      hour: 'numeric',
      minute: '2-digit',
      month: 'long',
      day: 'numeric',
    }).formatRange(
      new Date(2024, 11, 2, 8, 0, 0),
      new Date(2024, 11, 2, 9, 0, 0),
    )}
  </li>
  <li>
    {new Intl.DateTimeFormat('en-us', {
      timeZone: 'America/New_York',
      hour: 'numeric',
      minute: '2-digit',
      month: 'long',
      day: 'numeric',
    }).formatRange(
      new Date(2024, 11, 2, 8, 0, 0),
      new Date(2024, 11, 3, 13, 0, 0),
    )}
  </li>
</ul>

<ul>
  <li>
    {new Intl.DateTimeFormat('en-us', {
      timeZone: 'America/New_York',
      hour: 'numeric',
      minute: '2-digit',
    }).formatRange(
      new Date(2024, 11, 2, 8, 0, 0),
      new Date(2024, 11, 2, 13, 0, 0),
    )}
  </li>
  <li>
    {new Intl.DateTimeFormat('en-us', {
      timeZone: 'America/New_York',
      hour: 'numeric',
      minute: '2-digit',
      month: 'long',
      day: 'numeric',
    }).formatRange(
      new Date(2024, 11, 2, 8, 0, 0),
      new Date(2024, 11, 2, 9, 0, 0),
    )}
  </li>
  <li>
    {new Intl.DateTimeFormat('en-us', {
      timeZone: 'America/New_York',
      hour: 'numeric',
      minute: '2-digit',
      month: 'long',
      day: 'numeric',
    }).formatRange(
      new Date(2024, 11, 2, 8, 0, 0),
      new Date(2024, 11, 3, 13, 0, 0),
    )}
  </li>
</ul>

The following guidelines for time ranges apply specifically to EN-US:

Use a single AM or PM at the end of the range if both times share the same AM or PM designation
Use an en dash "–" between a range of times with no spaces before or after
- Tip: On a Mac, use Option + Hyphen (-) to create an en dash

Instead of

7:30 AM–10:00 AM
6:30 AM - 3:00 PM

Use

7:30–10:00 AM
6:30 AM–3:00 PM

Date and time used together

When to use a date, a time, or both is nuanced, and depends on the use case.

Generally, include both time and date wherever possible so it's explicitly clear which date is being referenced
If the date is not relevant in a specific context, it's acceptable to only include the time.

Context	What to use	Why to use it
CARE contact hours	8:00 AM–8:00 PM, Monday to Friday	These are recurring and aren't date specific, but the days of the week are relevant
Delivery window	May 26–30	People need to know the date, but the time isn't typically relevant
Shipping date	Monday, May 20	People need to know the date, but the time isn't typically relevant. The day of the week isn't required, but can be useful context
Sale end time	Sale ends today at 11:59 PM	If the sale is ending on the same day, only the time is necessary. If the sale ends on a future date, the date should be included

The following guidelines for date and time together apply specifically to EN-US:

Use the format [Month][space][date][comma][space][year][comma][hours][colon][minutes][space][AM or PM]
- Example: May 8, 2026, 3:30 PM
The date should come first, followed by time
The date and time should be separated by a comma

Instead of

March 8 7:30 AM
April 10 | 4:30 PM
7:00 AM, September 14

Use

March 8, 7:30 AM
April 10, 4:30 PM
September 14, 7:00 AM