10.12.0

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

Oct 20

Aug 2, 2012

Sat
Dec 2, 2017


Oct 20

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 20
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.


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
  • id
  • data
  • aria
  • children
  • date
  • alignment
  • show_icon
  • show_day_of_week
  • size
  • timezone