Date

Use to display the date. Year will not display if it is the current year.

DateTime defaults to the "America/New_York" timezone. Date ignores timezone.

Please note: this kit could potentially change the dates on you!

This is because the Javascript Date class does not have the concept of a date without time. If you pass a Ruby Date string to JavaScript, you will receive a date and a time which makes use of the timezone it infers from your browser based on your virtual geolocation or custom browser settings.

For example, if you pass a date like "7/2/2022" and your browser is on London time, Javascript will convert this to "7/2/2022 at 0:00 BST".

Subsequently, if you have not passed in a timezone to this kit, it will convert that time into US Eastern Time (default), making the resulting date and time "7/1/2022 at 19:00 EST". In this case the expected July 2 date will now be presented as July 1.

Summary
Default

Dec 11

Aug 2, 2012

Sat
Dec 2, 2017


Dec 11

Aug 2, 2012

Sat
Dec 2, 2017

Variants

Dec 11

Dec 11

Dec 11

Wed
Dec 11

Wed
Dec 11

Alignment

Wed
Dec 11


Wed
Dec 11


Wed
Dec 11

Timezones

East Coast (Default)
Dec 11

West Coast
Dec 11

Toyko, Japan
Dec 12

Anti-pattern example
Dec 11
Date.today ignores Timezone

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

Unstyled

Example with no year
Dec 11

Example with wrapping typography kit

Aug 2, 2012


Example with icon + subcaption
Thu
Aug 2, 2012

For alternative typography styles, you can pass a boolean prop called unstyled to the Date kit and wrap it in any of our typography kits (Title, Body, Caption, etc.). This will allow the Date kit to inherit any of our typography styles.


UI Samples using Date Kit

Get the full picture. See how this kit is used in our samples.

Available Props

Props Type Values

max_width

array
0%
xs
sm
md
lg
xl
xxl
0
none
100%

min_width

array
0%
xs
sm
md
lg
xl
xxl
0
none
100%

width

array
0%
xs
sm
md
lg
xl
xxl
0
none
100%

z_index

array
1
2
3
4
5
6
7
8
9
10

number_spacing

array
tabular

shadow

array
none
deep
deeper
deepest

line_height

array
tightest
tighter
tight
normal
loose
looser
loosest

display

array
block
inline_block
inline
flex
inline_flex
none

cursor

array
auto
default
none
contextMenu
help
pointer
progress
wait
cell
crosshair
text
verticalText
alias
copy
move
noDrop
notAllowed
grab
grabbing
eResize
nResize
neResize
nwResize
sResize
seResize
swResize
wResize
ewResize
nsResize
neswResize
nwseResize
colResize
rowResize
allScroll
zoomIn
zoomOut

flex_direction

array
row
column
rowReverse
columnReverse

flex_wrap

array
wrap
nowrap
wrapReverse

justify_content

array
start
end
center
spaceBetween
spaceAround
spaceEvenly

justify_self

array
auto
start
end
center
stretch

align_items

array
flexStart
flexEnd
start
end
center
baseline
stretch

align_content

array
start
end
center
spaceBetween
spaceAround
spaceEvenly

align_self

array
auto
start
end
center
stretch
baseline

flex

array
auto
initial
0
1
2
3
4
5
6
7
8
9
10
11
12
none

flex_grow

array
1
0

flex_shrink

array
1
0

order

array
1
2
3
4
5
6
7
8
9
10
11
12

position

array
relative
absolute
fixed
sticky

hover

array

border_radius

array
none
xs
sm
md
lg
xl
rounded

text_align

array
start
end
left
right
center
justify
justify-all
match-parent

overflow

array
visible
hidden
scroll
auto

truncate

array
1
2
3
4
5

left

array
0
xxs
xs
sm
md
lg
xl
auto
initial
inherit

top

array
0
xxs
xs
sm
md
lg
xl
auto
initial
inherit

right

array
0
xxs
xs
sm
md
lg
xl
auto
initial
inherit

bottom

array
0
xxs
xs
sm
md
lg
xl
auto
initial
inherit

vertical_align

array
baseline
super
top
middle
bottom
sub
text-top
text-bottom

height

array
auto
xs
sm
md
lg
xl
xxl
xxxl

min_height

array
auto
xs
sm
md
lg
xl
xxl
xxxl

max_height

array
auto
xs
sm
md
lg
xl
xxl
xxxl

overflow_x

array
visible
hidden
scroll
auto

overflow_y

array
visible
hidden
scroll
auto

margin

array
none
xxs
xs
sm
md
lg
xl

margin_bottom

array
none
xxs
xs
sm
md
lg
xl

margin_left

array
none
xxs
xs
sm
md
lg
xl

margin_right

array
none
xxs
xs
sm
md
lg
xl

margin_top

array
none
xxs
xs
sm
md
lg
xl

margin_x

array
none
xxs
xs
sm
md
lg
xl

margin_y

array
none
xxs
xs
sm
md
lg
xl

padding

array
none
xxs
xs
sm
md
lg
xl

padding_bottom

array
none
xxs
xs
sm
md
lg
xl

padding_left

array
none
xxs
xs
sm
md
lg
xl

padding_right

array
none
xxs
xs
sm
md
lg
xl

padding_top

array
none
xxs
xs
sm
md
lg
xl

padding_x

array
none
xxs
xs
sm
md
lg
xl

padding_y

array
none
xxs
xs
sm
md
lg
xl

classname

string

dark

boolean

group_hover

boolean

id

string

data

hashprop

aria

hashprop

html_options

hashprop

children

proc

style

hashprop
Props Type Values Default

date

string

alignment

enum
left
center
right
left

show_icon

boolean
false

show_day_of_week

boolean
false

size

enum
lg
md
sm
xs
md

timezone

string
America/New_York

unstyled

boolean
false