11.2.6

Time And Date




Date

Default

Aug 18

Aug 2, 2012

Sat
Dec 2, 2017


Aug 18

Aug 2, 2012

Sat
Dec 2, 2017

Variants

Aug 18

Aug 18

Aug 18

Thu
Aug 18

Thu
Aug 18

Alignment

Thu
Aug 18


Thu
Aug 18


Thu
Aug 18

Timezones

East Coast (Default)
Aug 18

West Coast
Aug 18

Toyko, Japan
Aug 18

Anti-pattern example
Aug 18
Date.today ignores Timezone

DateTime respects Timezone
Aug 18
'.now' in Australia is tomorrow (if you're EST after 10am)

String Dates
Aug 1, 2012
Defaults to UTC, then changes due to EST Timezone.

Depending on the data you send to the date prop you might have unexpected results due to ruby Date and DateTime classes.

Don't care about timezones? Use Date.

If you need a date that recognizes a timezone, especially when paired with the Time kit, leverage DateTime.

Date Range Inline

Default






Date Range Stacked

Default

18 JUN

2019

20 MAR

2020

Date Stacked

Default

Aug


Aug


Not Current Year

Mar


Mar


Day & Month Reverse

Aug


Aug


Sizes

Aug


Aug


Alignment

Aug


Aug


Aug


Aug


Aug


Aug


Bold

Aug


Mar


Aug


Date Time

Default

Thu
Aug 18
9:13a EDT

Thu
Aug 18
9:13a EDT

Aug 18
9:13a EDT

Aug 18
10:13p JST

Alignment

Aug 18
9:13a EDT

Aug 18
9:13a EDT

Aug 18
9:13a EDT

Size

Thu
Aug 18

Aug 18


Thu
Aug 18
9:13a EDT

Aug 18
10:13p JST

Date Time Stacked

Default

Aug


Mar


Aug


Aug


Date Year Stacked

Default

18 AUG

2022


18 AUG

2022


18 AUG

2022

Use this kits on table displays or column headers to display a single date format.

Time

Default






9:13a

9:13a EDT

11:49a

11:49a EDT

Use this anywhere needed to display a certain timestamp

Sizes


9:13a EDT

Timestamp Values




Handling Timezones

East Coast


Central


Mountain


West Coast


Toyko, Japan


Simply enter the timezone you would like to use and it will appear.

The list of supported timezones is exhaustive and we're most likely to only use timezones from the Americas so we've highlighted those in the examples.

However, if you need to support another timezone you should be able to Google a specific list, otherwise you can follow the string pattern and try entering a continent and a city.

Remember, this is just labeling the timezone, please verify the actual time for a specified timezone is rendering properly.

Format: <Continent>/<Large_City_Name>

Continent Options: America | Europe | Asia | Africa | Pacific | India | Atlantic | Australia

Alignment




Time Range Inline

Default

11:49a 1:49p

11:49a 1:49p


11:49a 1:49p EDT

11:49a 1:49p EDT


11:49a 1:49p

11:49a 1:49p


11:49a 1:49p EDT

11:49a 1:49p EDT

Time Stacked

Default




Timestamp

Default

9:13a

Aug 18 · 9:13a

Aug 18, 2026 · 9:13a

Aug 18, 2021 · 9:13a

Alignments

9:13a

Aug 18 · 9:13a

Aug 18, 2026 · 9:13a

Aug 18, 2021 · 9:13a


9:13a

Aug 18 · 9:13a

Aug 18, 2026 · 9:13a

Aug 18, 2021 · 9:13a


9:13a

Aug 18 · 9:13a

Aug 18, 2026 · 9:13a

Aug 18, 2021 · 9:13a

Timezones

9:13a EDT

Aug 18 · 9:13a EDT

Aug 18, 2026 · 9:13a EDT

Aug 18, 2021 · 9:13a EDT

9:13p HKT

Aug 18 · 9:13p HKT

Aug 18, 2026 · 9:13p HKT

Aug 18, 2021 · 9:13p HKT


Last Updated by

Last updated by Maricris Nonato on Aug 18 at 9:13a

Last updated on Aug 18 at 9:13a

Time Ago

Last updated by Maricris Nonato less than a minute ago

Last updated less than a minute ago

Weekday Stacked

Default


Compact


Variant