12.24.0

Time And Date




Date

Default

Jun 5

Aug 2, 2012

Sat
Dec 2, 2017


Jun 5

Aug 2, 2012

Sat
Dec 2, 2017

Variants

Jun 5

Jun 5

Jun 5

Mon
Jun 5

Mon
Jun 5

Alignment

Mon
Jun 5


Mon
Jun 5


Mon
Jun 5

Timezones

East Coast (Default)
Jun 5

West Coast
Jun 5

Toyko, Japan
Jun 6

Anti-pattern example
Jun 5
Date.today ignores Timezone

DateTime respects Timezone
Jun 6
'.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

Jun


Jun


Not Current Year

Mar


Mar


Day & Month Reverse

Jun


Jun


Sizes

Jun


Jun


Alignment

Jun


Jun


Jun


Jun


Jun


Jun


Bold

Jun


Mar


Jun


Date Time

Default

Mon
Jun 5
3:39p EDT

Mon
Jun 5
3:39p EDT

Jun 5
3:39p EDT

Jun 6
4:39a JST

Alignment

Jun 5
3:39p EDT

Jun 5
3:39p EDT

Jun 5
3:39p EDT

Size

Mon
Jun 5

Jun 6


Mon
Jun 5
3:39p EDT

Jun 6
4:39a JST

Date Time Stacked

Default

Jun


Mar


Jun


Jun


Date Year Stacked

Default

5 JUN

2023


5 JUN

2023


5 JUN

2023

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

Time

Default






3:39p

3:39p EDT

11:49a

11:49a EDT

Use this anywhere needed to display a certain timestamp

Sizes


3:39p 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

3:39p

Jun 5 · 3:39p

Jun 5, 2027 · 3:39p

Jun 5, 2022 · 3:39p

Alignments

3:39p

Jun 5 · 3:39p

Jun 5, 2027 · 3:39p

Jun 5, 2022 · 3:39p


3:39p

Jun 5 · 3:39p

Jun 5, 2027 · 3:39p

Jun 5, 2022 · 3:39p


3:39p

Jun 5 · 3:39p

Jun 5, 2027 · 3:39p

Jun 5, 2022 · 3:39p

Timezones

3:39p EDT

Jun 5 · 3:39p EDT

Jun 5, 2027 · 3:39p EDT

Jun 5, 2022 · 3:39p EDT

3:39a HKT

Jun 6 · 3:39a HKT

Jun 6, 2027 · 3:39a HKT

Jun 6, 2022 · 3:39a HKT


Last Updated by

Last updated by Maricris Nonato on Jun 5 at 3:39p

Last updated on Jun 5 at 3:39p

Time Ago

Last updated by Maricris Nonato less than a minute ago

Last updated less than a minute ago

less than a minute ago

Weekday Stacked

Default


Compact


Variant