11.12.1

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.

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.


UI Samples using Date Kit

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

Available Props

  • classname
  • dark
  • margin
  • margin_bottom
  • margin_left
  • margin_right
  • margin_top
  • margin_x
  • margin_y
  • max_width
  • padding
  • padding_bottom
  • padding_left
  • padding_right
  • padding_top
  • padding_x
  • padding_y
  • z_index
  • number_spacing
  • shadow
  • line_height
  • display
  • cursor
  • flex_direction
  • flex_wrap
  • justify_content
  • justify_self
  • align_items
  • align_content
  • align_self
  • flex
  • flex_grow
  • flex_shrink
  • order
  • id
  • data
  • aria
  • children
  • date
  • alignment
  • show_icon
  • show_day_of_week
  • size
  • timezone