10.12.0

Time And Date




Date

Default

Oct 19

Aug 2, 2012

Sat
Dec 2, 2017


Oct 19

Aug 2, 2012

Sat
Dec 2, 2017

Variants

Oct 19

Oct 19

Oct 19

Tue
Oct 19

Tue
Oct 19

Alignment

Tue
Oct 19


Tue
Oct 19


Tue
Oct 19

Timezones

East Coast (Default)
Oct 19

West Coast
Oct 19

Toyko, Japan
Oct 20

Anti-pattern example
Oct 19
Date.today ignores Timezone

DateTime respects Timezone
Oct 20
'.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

Oct


Oct


Not Current Year

Mar


Mar


Day & Month Reverse

Oct


Oct


Sizes

Oct


Oct


Alignment

Oct


Oct


Oct


Oct


Oct


Oct


Bold

Oct


Mar


Oct


Date Time

Default

Tue
Oct 19
7:51p EDT

Tue
Oct 19
7:51p EDT

Oct 19
7:51p EDT

Oct 20
8:51a JST

Alignment

Oct 19
7:51p EDT

Oct 19
7:51p EDT

Oct 19
7:51p EDT

Size

Tue
Oct 19

Oct 20


Tue
Oct 19
7:51p EDT

Oct 20
8:51a JST

Date Time Stacked

Default

Oct


Mar


Oct


Oct


Date Year Stacked

Default

19 OCT

2021


19 OCT

2021


19 OCT

2021

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

Time

Default






7:51p

7:51p EDT

11:49a

11:49a EDT

Use this anywhere needed to display a certain timestamp

Sizes


7:51p 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

7:51p

Oct 19 · 7:51p

Oct 19, 2025 · 7:51p

Oct 19, 2020 · 7:51p

Alignments

7:51p

Oct 19 · 7:51p

Oct 19, 2025 · 7:51p

Oct 19, 2020 · 7:51p


7:51p

Oct 19 · 7:51p

Oct 19, 2025 · 7:51p

Oct 19, 2020 · 7:51p


7:51p

Oct 19 · 7:51p

Oct 19, 2025 · 7:51p

Oct 19, 2020 · 7:51p

Timezones

7:51p EDT

Oct 19 · 7:51p EDT

Oct 19, 2025 · 7:51p EDT

Oct 19, 2020 · 7:51p EDT

7:51a HKT

Oct 20 · 7:51a HKT

Oct 20, 2025 · 7:51a HKT

Oct 20, 2020 · 7:51a HKT


Last Updated by

Last updated by Maricris Nonato on Oct 19 at 7:51p

Last updated on Oct 19 at 7:51p

Time Ago

Last updated by Maricris Nonato less than a minute ago

Last updated less than a minute ago

Weekday Stacked

Default


Compact


Variant