11.12.1

Time And Date




Date

Default

Dec 6

Aug 2, 2012

Sat
Dec 2, 2017


Dec 6

Aug 2, 2012

Sat
Dec 2, 2017

Variants

Dec 6

Dec 6

Dec 6

Tue
Dec 6

Tue
Dec 6

Alignment

Tue
Dec 6


Tue
Dec 6


Tue
Dec 6

Timezones

East Coast (Default)
Dec 6

West Coast
Dec 5

Toyko, Japan
Dec 6

Anti-pattern example
Dec 6
Date.today ignores Timezone

DateTime respects Timezone
Dec 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

Dec


Dec


Not Current Year

Mar


Mar


Day & Month Reverse

Dec


Dec


Sizes

Dec


Dec


Alignment

Dec


Dec


Dec


Dec


Dec


Dec


Bold

Dec


Mar


Dec


Date Time

Default

Tue
Dec 6
1:45a EST

Tue
Dec 6
1:45a EST

Dec 6
1:45a EST

Dec 6
3:45p JST

Alignment

Dec 6
1:45a EST

Dec 6
1:45a EST

Dec 6
1:45a EST

Size

Tue
Dec 6

Dec 6


Tue
Dec 6
1:45a EST

Dec 6
3:45p JST

Date Time Stacked

Default

Dec


Mar


Dec


Dec


Date Year Stacked

Default

6 DEC

2022


6 DEC

2022


6 DEC

2022

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

Time

Default






1:45a

1:45a EST

11:49a

11:49a EDT

Use this anywhere needed to display a certain timestamp

Sizes


1:45a EST

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

1:45a

Dec 6 · 1:45a

Dec 6, 2026 · 1:45a

Dec 6, 2021 · 1:45a

Alignments

1:45a

Dec 6 · 1:45a

Dec 6, 2026 · 1:45a

Dec 6, 2021 · 1:45a


1:45a

Dec 6 · 1:45a

Dec 6, 2026 · 1:45a

Dec 6, 2021 · 1:45a


1:45a

Dec 6 · 1:45a

Dec 6, 2026 · 1:45a

Dec 6, 2021 · 1:45a

Timezones

1:45a EST

Dec 6 · 1:45a EST

Dec 6, 2026 · 1:45a EST

Dec 6, 2021 · 1:45a EST

2:45p HKT

Dec 6 · 2:45p HKT

Dec 6, 2026 · 2:45p HKT

Dec 6, 2021 · 2:45p HKT


Last Updated by

Last updated by Maricris Nonato on Dec 6 at 1:45a

Last updated on Dec 6 at 1:45a

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