Get startedPatternsComponentsStylesContentSupport
Select your development framework to see all code in your development languages. You can change this in the top right of the screen.
ContentCapitalizationDate formatError messagesHelper text

Date format

Configuration which contains date information that includes the specification of the form and structure of the date data within the date format in different scenarios.

March 14, 2021

Conversational and long-form

When the date is written out in long-form (i.e. narrative, instructions, commentary, information), it is recommended that you use a more conversational and more natural “readable” tone.

Month date, Year (e.g., March 14, 2021)

This presents the date in a conventional “speaking” way and aligns with the Canadian Style Guide 5.14 Dates.

March 14, 2021
Use the format: Month, cardinal date, year.
March 14
March 14th
Use cardinal or ordinal numbers if no year is present.
March 14th, 2021
Don’t use ordinal numbers with written out month.
MARCH 14TH, 2021
Don’t use capital letters for the month.
March 12, 21
Don’t use two digit abbreviations for the year, as this adds confusion and ambiguity.

Short-hand

When space is limited (e.g., example forms, tables, summary pages, mobile) it may be necessary to have a more condensed date displayed.

The format remains the same, but a three-letter abbreviation for the month may be used.

Examples:
Jul 14, 2022
Nov 6, 2024

Three-letter month abbreviations:

JanFebMarAprMayJun
JulAugSepOctNovDec

Mar 14, 2021
Use the same format as the long-form: month, cardinal date, year.
Mar 12, 21
Don’t use two digit abbreviations for the year, as this adds confusion and ambiguity.
Mar. 12, 2021
Don’t use other punctuation, other than a comma, in the date expression.
MAR 12, 21
Don’t use capital letters for the month abbreviation.
Mar 07, 21
Don’t use leading zeros for single date numbers.
03/07/21
07/03/2021
Don’t use slashes and numbers, as it is confusing.

Day of the week

Days of the week can be included. It helps to bring clarity and comprehension of the date. The format described above is extended, with the day of the week appearing first, followed by a comma, then the date expression.

Either long-form or short-form may be used, but not mixed.

Day, Month date, Year (e.g., Friday, March 14, 2021)
Examples:
Tuesday, July 14, 2022Tue, July 14, 2022
Wednesday, November 6, 2024Wed, November 6, 2024
Three-letter day abbreviations
MonTueWedThuFriSatSun

Monday, March 14, 2021
Mon, Mar 14, 2021
Use the same format: month, cardinal date, year.
Monday, Mar 12, 2021
Mon, March 12, 2021
Don’t mix long-form and short-form.
Mon, Mar 12, 2021
Don’t use other punctuation, other than a comma, in the date expression.
Monday March 12, 2021
Don’t forget to delineate day and month with a comma.

Avoid using day of the week in tabular, form, summary, or other concise displays, as it would crowd the already limited space with unnecessary information.

Time

When displaying time, the Government of Alberta prefers to use the 12-hour clock format.

Both also prefer “am” and “pm” be written with a space after the time, without the periods as per the Canadian Style Guide.

Examples:
8:00 am
11:45 pm

When the time is written with a date, the date comes first and the time follows, after “at”.

Day, Month date, Year at XX:XX am/pm

(e.g., Friday, March 14, 2021 at 2:26 pm)

Monday, March 14, 2021 at 3:30 pm
Use the same format: day, month cardinal date, year at XX:XX am/pm
08:15 am
Don't include a leading zero for the time.
4:43 p.m.
Don’t use periods in the “am” or “pm”.
7:55 am on Saturday, May 15, 2021
Don’t write the time before the date.

Time zones

When needed, the time zone can be written after the time in long-form or short-form. The long-form is always in parenthesis and the short-form is always a capitalized three-letter abbreviation.

Examples:
8:00 am (Eastern standard time)
11:45 pm PDT

Canadian time zones
Pacific standard / daylight time
Mountain standard / daylight time
Central standard / daylight time
Eastern standard / daylight time
Atlantic standard / daylight time
Newfoundland standard / daylight time

Three letter abbreviations

PSTMSTCSTESTASTNST
PDTMDTCDTEDTADTNDT

Standard and Daylight time

In the regions of Canada where daylight saving time is used, it begins on the second Sunday of March at 2 a.m. and ends on the first Sunday in November at 2 a.m. As a result, daylight saving time lasts for 34 weeks (238 days) every year, or about 65 percent of the entire year.

Jan
Feb
Mar
Apr
May
Jun
Jul
Aug
Sep
Oct
Nov
Dec
12-month timeline highlighting those that pertain to daylight time.
Use standard time between the months of November and March.
Use daylight time between the months of April and October.
4:43pm (MST)
Don’t wrap the three-letter abbreviation in parentheses.
From April to October Alberta participates in daylight saving time.

Accessibility and Screen readers

Using a npm module (accessible-date), we are able to ensure that dates displayed are readable and accessible for screen readers:
https://github.com/MikesBarto/accessible-date

Consider the following html
<time id="timestamp" datetime="2001-05-15T19:30">May 15, 2001 - 7:30pm</time>
Typical screen readers will return the following:
“May one five, two zero zero one, seven three zero pm”

Accessible-date will return the following:
“Tuesday, May fifteenth, two-thousand one at seven thirty pm”
The date time variables entered into the module for producing “readable” and “conversational” need to be rendered in the ISO 8601 format.
Join design system drop in hours to get feedback on your service, propose new components or patterns, suggest changes to existing resources, ask questions, and give feedback to the design system. These sessions are for Government of Alberta product teams.
Book time in drop in hours
Get startedPatternsComponentsStylesContentSubmit an issue#design-system-supportContribute to the design systemGive feedbackRelease notes