Playbook Design System

Date

Default

Jun 5

Aug 2, 2012

Sat

•

Dec 2, 2017

Jun 5

Aug 2, 2012

Sat

•

Dec 2, 2017

<%= pb_rails("date", props: {
  date: Date.today,
  size: "sm"
}) %>

<br>

<%= pb_rails("date", props: {
  date: "2012-08-02T15:49:29Z",
  size: "sm"
}) %>

<br>

<%= pb_rails("date", props: {
  date: "2017-12-02T15:49:29Z",
  show_day_of_week: true,
  size: "sm"
}) %>

<br>
<br>

<%= pb_rails("date", props: {
  date: Date.today,
}) %>

<br>

<%= pb_rails("date", props: {
  date: "2012-08-02T15:49:29Z",
}) %>

<br>

<%= pb_rails("date", props: {
  date: "2017-12-02T15:49:29Z",
  show_day_of_week: true
}) %>

Variants

Jun 5

Mon

•

Jun 5

Mon

•

Jun 5

<div>
  <%= pb_rails("date", props: {
    date: DateTime.now,
    show_icon: true,
    size: "sm"
  }) %>

  <br>

  <%= pb_rails("date", props: {
    date: DateTime.now,
  }) %>

  <br>

  <%= pb_rails("date", props: {
    date: DateTime.now,
    show_icon: true
  }) %>

  <br>

  <%= pb_rails("date", props: {
    date: DateTime.now,
    show_day_of_week: true
  }) %>

  <br>

  <%= pb_rails("date", props: {
    date: DateTime.now,
    show_icon: true,
    show_day_of_week: true
  }) %>
</div>

Alignment

Mon

•

Jun 5

Mon

•

Jun 5

Mon

•

Jun 5

 <%= pb_rails("date", props: {
    date: DateTime.now,
    show_icon: true,
    show_day_of_week: true
  }) %>

  <br><br>

  <%= pb_rails("date", props: {
    date: DateTime.now,
    show_icon: true,
    show_day_of_week: true,
    alignment: "center"
  }) %>

  <br><br>

  <%= pb_rails("date", props: {
    date: DateTime.now,
    show_icon: true,
    show_day_of_week: true,
    alignment: "right"
  }) %>

Timezones

East Coast (Default)

Jun 5

West Coast

Jun 5

Toyko, Japan

Jun 6

Anti-pattern example

Jun 5

Date.today ignores Timezone

DateTime respects Timezone

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

<%= pb_rails("caption", props: { text: "East Coast (Default)"}) %>
<%= pb_rails("date", props: {
  date: DateTime.now,
  timezone: "America/New_York"
}) %>

<br>

<%= pb_rails("caption", props: { text: "West Coast"}) %>
<%= pb_rails("date", props: {
  date: DateTime.now,
  timezone: "America/Los_Angeles"
}) %>

<br>

<%= pb_rails("caption", props: { text: "Toyko, Japan"}) %>
<%= pb_rails("date", props: {
  date: DateTime.now,
  timezone: "Asia/Tokyo"
}) %>

<br>

<%= pb_rails("caption", props: { text: "Anti-pattern example"}) %>

<%= pb_rails("date", props: {
  date: Date.today,
  timezone: "Australia/Sydney"
}) %>
<%= pb_rails("body", props: { text: "Date.today ignores Timezone"}) %>

<br>

<%= pb_rails("caption", props: { text: "DateTime respects Timezone"}) %>

<%= pb_rails("date", props: {
  date: DateTime.now,
  timezone: "Australia/Sydney"
}) %>

<%= pb_rails("body", props: { text: "'.now' in Australia is tomorrow (if you're EST after 10am)"}) %>

<br>

<%= pb_rails("caption", props: { text: "String Dates"}) %>
<%= pb_rails("date", props: {
  date: "2012-08-02T00:49:29Z",
}) %>

<%= pb_rails("body", props: { text: "Defaults to UTC, then changes due to EST Timezone."}) %>

Date Range Inline

Default

Jun 18, 2019 Mar 20, 2020

Jan 15 Aug 15

<div>
  <%= pb_rails("date_range_inline", props: { start_date: Date.new(2019, 06, 18), end_date: Date.new(2020, 03, 20), size: "xs" }) %>
  <%= pb_rails("date_range_inline", props: { start_date: Date.new(2019, 06, 18), end_date: Date.new(2020, 03, 20) }) %>
  <br>
  <br>

  <%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 01, 15), end_date: Date.new(Date.current.year, 8, 15), size: "xs", icon: true, align: 'center' }) %>
  <%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 01, 15), end_date: Date.new(Date.current.year, 8, 15), icon: true, align: 'center' }) %>
  <br>
  <br>

  <%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 01, 15), end_date: Date.new(Date.current.year, 8, 15), size: "xs", icon: true, align: 'right' }) %>
  <%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 01, 15), end_date: Date.new(Date.current.year, 8, 15), icon: true, align: 'right' }) %>
</div>

Date Range Stacked

Default

18 JUN

2019

20 MAR

2020

<%= pb_rails("date_range_stacked", props: { start_date: Date.new(2019, 06, 18), end_date: Date.new(2020, 03, 20) }) %>

Date Stacked

Default

Jun

5

Jun

5

<%= pb_rails("date_stacked", props: { date: DateTime.now}) %>

<br>

<%= pb_rails("date_stacked", props: { date: DateTime.now, size: "md"}) %>

Not Current Year

Mar

20

2018

Mar

20

2018

<%= pb_rails("date_stacked", props: { date: Date.new(2018, 03, 20) }) %>

<br>

<%= pb_rails("date_stacked", props: { date: Date.new(2018, 03, 20), size: "md"}) %>

Day & Month Reverse

Jun

5

Jun

5

<%= pb_rails("date_stacked", props: { date: DateTime.now, reverse: true}) %>

<br>

<%= pb_rails("date_stacked", props: { date: DateTime.now, size: "md", reverse: true}) %>

Sizes

Jun

5

Jun

5

<%= pb_rails("date_stacked", props: { date: DateTime.now, size: "sm" }) %>

<br>

<%= pb_rails("date_stacked", props: { date: DateTime.now, size: "md" }) %>

Alignment

Jun

5

Jun

5

Jun

5

Jun

5

Jun

5

Jun

5

<%= pb_rails("date_stacked", props: { date: DateTime.now }) %>

<br>

<%= pb_rails("date_stacked", props: { date: DateTime.now, align: "center" }) %>

<br>

<%= pb_rails("date_stacked", props: { date: DateTime.now, align: "right" }) %>

<br>

<%= pb_rails("date_stacked", props: { date: DateTime.now, size: "md"}) %>

<br>

<%= pb_rails("date_stacked", props: { date: DateTime.now, size: "md", align: "center" }) %>

<br>

<%= pb_rails("date_stacked", props: { date: DateTime.now, size: "md", align: "right" }) %>

Bold

Jun

5 Mar

20 2018

Jun

5

<%= pb_rails("date_stacked", props: { date: DateTime.now, align: "left", bold: true }) %>
<br>
<%= pb_rails("date_stacked", props: { date: Date.new(2018, 03, 20), align: "center", bold: true }) %>
<br>
<%= pb_rails("date_stacked", props: { date: DateTime.now, align: "right", bold: true }) %>

Date Time

Default

Mon

•

Jun 5

3:39p EDT

Mon

•

Jun 5

3:39p EDT

Jun 5

3:39p EDT

Jun 6

4:39a JST

<%= pb_rails("date_time", props: {
    date: DateTime.now,
    show_icon: true,
    show_day_of_week: true
}) %>
<br />
<%= pb_rails("date_time", props: {
    date: DateTime.now,
    show_day_of_week: true
}) %>
<br />
<%= pb_rails("date_time", props: {
    date: DateTime.now,
    show_icon: true
}) %>
<br />
<%= pb_rails("date_time", props: {
    date: DateTime.now,
    timezone: "Asia/Tokyo"
}) %>

Alignment

Jun 5

3:39p EDT

Jun 5

3:39p EDT

Jun 5

3:39p EDT

<%= pb_rails("date_time", props: {
    date: DateTime.now
}) %>
    
<br />

<%= pb_rails("date_time", props: {
    date: DateTime.now,
    align:"center"
}) %>
    
<br />

<%= pb_rails("date_time", props: {
    date: DateTime.now,
    align:"right"
}) %>

Size

Mon

•

Jun 5

3:39p EDT

Jun 6

4:39a JST

Mon

•

Jun 5

3:39p EDT

Jun 6

4:39a JST

<%= pb_rails("date_time", props: {
    date: DateTime.now,
    show_icon: true,
    show_day_of_week: true,
    size: "sm"
}) %>
<br>
<%= pb_rails("date_time", props: {
    date: DateTime.now,
    timezone: "Asia/Tokyo",
    size: "sm"
}) %>

<br>
<br>

<%= pb_rails("date_time", props: {
    date: DateTime.now,
    show_icon: true,
    show_day_of_week: true
}) %>
<br >
<%= pb_rails("date_time", props: {
    date: DateTime.now,
    timezone: "Asia/Tokyo"
}) %>

Date Time Stacked

Default

Jun

5

3:39p EDT

Mar

20 2018

12:00a EDT

Jun

5

4:39a JST

Jun

5

1:39p MDT

<%= pb_rails("date_time_stacked", props: { date_time: DateTime.now }) %>
<br>
<%= pb_rails("date_time_stacked", props: { date_time: Date.new(2018, 03, 20) }) %>
<br>
<%= pb_rails("date_time_stacked", props: { date_time: DateTime.now, timezone: "Asia/Tokyo" }) %>
<br>
<%= pb_rails("date_time_stacked", props: { date_time: DateTime.now, timezone: "America/Denver" }) %>

Date Year Stacked

Default

5 JUN

2023

5 JUN

2023

5 JUN

2023

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

<%= pb_rails "date_year_stacked", props: { date: Date.today } %>
<br><br>
<%= pb_rails "date_year_stacked", props: { date: Date.today, align: 'center'} %>
<br><br>
<%= pb_rails "date_year_stacked", props: { date: Date.today, align: 'right'} %>

Time

Default

3:39p

3:39p EDT

11:49a

11:49a EDT

3:39p

3:39p EDT

11:49a

11:49a EDT

Use this anywhere needed to display a certain timestamp

<%= pb_rails("time", props: {
  show_timezone: false,
  time: Time.now
}) %>

<br>

<%= pb_rails("time", props: {
  time: DateTime.now,
  timezone: "America/New_York"
}) %>

<br>

<%= pb_rails("time", props: {
  show_icon: true,
  show_timezone: false,
  time: "2012-08-02T15:49:29Z",
}) %>

<br>

<%= pb_rails("time", props: {
  show_icon: true,
  time: "2012-08-02T15:49:29Z",
  timezone: "America/New_York"
}) %>

<br>
<br>

<%= pb_rails("time", props: {
  show_timezone: false,
  size: "md",
  time: Time.now,
}) %>

<br>

<%= pb_rails("time", props: {
  size: "md",
  time: DateTime.now,
  timezone: "America/New_York",
}) %>

<br>

<%= pb_rails("time", props: {
  show_icon: true,
  show_timezone: false,
  size: "md",
  time: "2012-08-02T15:49:29Z",
}) %>

<br>

<%= pb_rails("time", props: {
  show_icon: true,
  size: "md",
  time: "2012-08-02T15:49:29Z",
  timezone: "America/New_York",
}) %>

Sizes

3:39p EDT

<%= pb_rails("time", props: {
  time: DateTime.now,
  size: "sm"
}) %>

<br>

<%= pb_rails("time", props: {
  time: Time.now,
  size: "md"
}) %>

Timestamp Values

11:49a

3:39p

2:39p CDT

<%= pb_rails("time", props: {
  show_timezone: false,
  time: "2012-08-02T15:49:29Z"
}) %>

<br>

<%= pb_rails("time", props: {
  show_timezone: false,
  time: DateTime.now
}) %>

<br>

<%= pb_rails("time", props: {
  time: DateTime.now,
  timezone: "America/Chicago",
}) %>

Handling Timezones

East Coast

3:39p EDT

Central

2:39p CDT

Mountain

1:39p MDT

West Coast

12:39p PDT

Toyko, Japan

4:39a JST

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>

<h4>East Coast</h4>
<%= pb_rails("time", props: {
  time: Time.now,
  timezone: "America/New_York"
}) %>

<br>

<h4>Central</h4>
<%= pb_rails("time", props: {
  time: Time.now,
  timezone: "America/Chicago"
}) %>

<br>

<h4>Mountain</h4>
<%= pb_rails("time", props: {
  time: Time.now,
  timezone: "America/Denver"
}) %>

<br>

<h4>West Coast</h4>
<%= pb_rails("time", props: {
  show_timezone: true,
  time: Time.now,
  timezone: "America/Los_Angeles"
}) %>

<br>

<h4>Toyko, Japan</h4>
<%= pb_rails("time", props: {
  time: Time.now,
  timezone: "Asia/Tokyo",
}) %>

Alignment

3:39p EDT

<%= pb_rails("time", props: {
  time: DateTime.now,
  align: "left"
}) %>

<br>

<%= pb_rails("time", props: {
  time: Time.now,
  align: "center"
}) %>

<br>

<%= pb_rails("time", props: {
  time: Time.now,
  align: "right"
}) %>

Time Range Inline

Default

11:49a 1:49p

11:49a 1:49p EDT

11:49a 1:49p

11:49a 1:49p EDT

<%= pb_rails("time_range_inline", props: {
    start_time: "2012-08-02T15:49:29Z",
    end_time: "2012-08-02T17:49:29Z",
    size: "xs"
}) %>
<br />
<%= pb_rails("time_range_inline", props: {
    start_time: "2012-08-02T15:49:29Z",
    end_time: "2012-08-02T17:49:29Z",
    size: "sm"
}) %>
<br />
<br />
<%= pb_rails("time_range_inline", props: {
    start_time: "2012-08-02T15:49:29Z",
    end_time: "2012-08-02T17:49:29Z",
    size: "xs",
    timezone: true,
    alignment: "center"
}) %>
<br />
<%= pb_rails("time_range_inline", props: {
    start_time: "2012-08-02T15:49:29Z",
    end_time: "2012-08-02T17:49:29Z",
    size: "sm",
    timezone: true,
    alignment: "center"
}) %>
<br />
<br />
<%= pb_rails("time_range_inline", props: {
    icon: true,
    start_time: "2012-08-02T15:49:29Z",
    end_time: "2012-08-02T17:49:29Z",
    size: "xs",
    alignment: "center"
}) %>
<br />
<%= pb_rails("time_range_inline", props: {
    icon: true,
    start_time: "2012-08-02T15:49:29Z",
    end_time: "2012-08-02T17:49:29Z",
    size: "sm",
    alignment: "center"
}) %>
<br />
<br />
<%= pb_rails("time_range_inline", props: {
    icon: true,
    start_time: "2012-08-02T15:49:29Z",
    end_time: "2012-08-02T17:49:29Z",
    size: "xs",
    timezone: true,
    alignment: "right"
}) %>
<br />
<%= pb_rails("time_range_inline", props: {
    icon: true,
    start_time: "2012-08-02T15:49:29Z",
    end_time: "2012-08-02T17:49:29Z",
    size: "sm",
    timezone: true,
    alignment: "right"
}) %>

Time Stacked

Default

3:39p EDT

<%= pb_rails("time_stacked", props: {
  time: DateTime.now,
  align: "left",
}) %>

<br>

<%= pb_rails("time_stacked", props: {
  time: Time.now,
  align: "center"
}) %>

<br>

<%= pb_rails("time_stacked", props: {
  time: Time.now,
  align: "right"
}) %>

Timestamp

Default

3:39p

Jun 5 · 3:39p

Jun 5, 2027 · 3:39p

Jun 5, 2022 · 3:39p

<%= pb_rails("timestamp", props: {
  timestamp: DateTime.now,
  show_date: false,
  align: "left"
}) %>

<br>

<%= pb_rails("timestamp", props: {
  timestamp: DateTime.now,
  show_date: true,
  align: "left"
}) %>

<br>

<%= pb_rails("timestamp", props: {
  timestamp: DateTime.now + 4.years,
  show_date: true,
  align: "left"
}) %>

<br>

<%= pb_rails("timestamp", props: {
  timestamp: DateTime.now - 1.year,
  show_date: true,
  align: "left"
}) %>

Alignments

3:39p

Jun 5 · 3:39p

Jun 5, 2027 · 3:39p

Jun 5, 2022 · 3:39p

3:39p

Jun 5 · 3:39p

Jun 5, 2027 · 3:39p

Jun 5, 2022 · 3:39p

3:39p

Jun 5 · 3:39p

Jun 5, 2027 · 3:39p

Jun 5, 2022 · 3:39p

<%= pb_rails("timestamp", props: {
  timestamp: DateTime.now,
  show_date: false,
  align: "left"
}) %>

<br>

<%= pb_rails("timestamp", props: {
  timestamp: DateTime.now,
  show_date: true,
  align: "left"
}) %>

<br>

<%= pb_rails("timestamp", props: {
  timestamp: DateTime.now + 4.years,
  show_date: true,
  align: "left"
}) %>

<br>

<%= pb_rails("timestamp", props: {
  timestamp: DateTime.now - 1.year,
  show_date: true,
  align: "left"
}) %>

<br><br>

<%= pb_rails("timestamp", props: {
  timestamp: DateTime.now,
  show_date: false,
  align: "center"
}) %>

<br>

<%= pb_rails("timestamp", props: {
  timestamp: DateTime.now,
  show_date: true,
  align: "center"
}) %>

<br>

<%= pb_rails("timestamp", props: {
  timestamp: DateTime.now + 4.years,
  show_date: true,
  align: "center"
}) %>

<br>

<%= pb_rails("timestamp", props: {
  timestamp: DateTime.now - 1.year,
  show_date: true,
  align: "center"
}) %>

<br><br>

<%= pb_rails("timestamp", props: {
  timestamp: DateTime.now,
  show_date: false,
  align: "right"
}) %>

<br>

<%= pb_rails("timestamp", props: {
  timestamp: DateTime.now,
  show_date: true,
  align: "right"
}) %>

<br>

<%= pb_rails("timestamp", props: {
  timestamp: DateTime.now + 4.years,
  show_date: true,
  align: "right"
}) %>

<br>

<%= pb_rails("timestamp", props: {
  timestamp: DateTime.now - 1.year,
  show_date: true,
  align: "right"
}) %>

Timezones

3:39p EDT

Jun 5 · 3:39p EDT

Jun 5, 2027 · 3:39p EDT

Jun 5, 2022 · 3:39p EDT

3:39a HKT

Jun 6 · 3:39a HKT

Jun 6, 2027 · 3:39a HKT

Jun 6, 2022 · 3:39a HKT

<%= pb_rails("timestamp", props: {
  timestamp: DateTime.now,
  show_date: false,
  show_timezone: true,
  timezone: "America/New_York",
  align: "left"
}) %>

<br>

<%= pb_rails("timestamp", props: {
  timestamp: DateTime.now,
  show_date: true,
  show_timezone: true,
  timezone: "America/New_York",
  align: "left"
}) %>

<br>

<%= pb_rails("timestamp", props: {
  timestamp: DateTime.now + 4.years,
  show_date: true,
  show_timezone: true,
  timezone: "America/New_York",
  align: "left"
}) %>

<br>

<%= pb_rails("timestamp", props: {
  timestamp: DateTime.now - 1.year,
  show_date: true,
  show_timezone: true,
  timezone: "America/New_York",
  align: "left"
}) %>

<br>

<%= pb_rails("timestamp", props: {
  timestamp: DateTime.now,
  show_date: false,
  show_timezone: true,
  timezone: "Asia/Hong_Kong",
  align: "left"
}) %>

<br>

<%= pb_rails("timestamp", props: {
  timestamp: DateTime.now,
  show_date: true,
  show_timezone: true,
  timezone: "Asia/Hong_Kong",
  align: "left"
}) %>

<br>

<%= pb_rails("timestamp", props: {
  timestamp: DateTime.now + 4.years,
  show_date: true,
  show_timezone: true,
  timezone: "Asia/Hong_Kong",
  align: "left"
}) %>

<br>

<%= pb_rails("timestamp", props: {
  timestamp: DateTime.now - 1.year,
  show_date: true,
  show_timezone: true,
  timezone: "Asia/Hong_Kong",
  align: "left"
}) %>

<br>

Last Updated by

Last updated by Maricris Nonato on Jun 5 at 3:39p

Last updated on Jun 5 at 3:39p

<%= pb_rails("timestamp", props: {
  timestamp: DateTime.now,
  variant: "updated",
  show_user: true,
  text: "Maricris Nonato"
}) %>

<br>

<%= pb_rails("timestamp", props: {
  timestamp: DateTime.now,
  variant: "updated",
  show_user: false
}) %>

Time Ago

Last updated by Maricris Nonato less than a minute ago

Last updated less than a minute ago

less than a minute ago

<%= pb_rails("timestamp", props: {
  timestamp: DateTime.now,
  variant: "elapsed",
  show_user: true,
  text: "Maricris Nonato"
}) %>

<br>

<%= pb_rails("timestamp", props: {
  timestamp: DateTime.now,
  variant: "elapsed",
  show_user: false
}) %>

<br>

<%= pb_rails("timestamp", props: {
  timestamp: DateTime.now,
  variant: "elapsed",
  show_user: false,
  hide_updated: true
}) %>

Weekday Stacked

Default

Mon

6/5

Mon

6/5

Mon

6/5

<%= pb_rails("weekday_stacked") %>
<%= pb_rails("weekday_stacked", props: {align: 'center'}) %>
<%= pb_rails("weekday_stacked", props: {align: 'right'}) %>

Compact

M

Jun 5

M

5

M

6/5

<%= pb_rails("weekday_stacked", props: {variant: "expanded", compact: true}) %>
<%= pb_rails("weekday_stacked", props: { variant: "day_only" , compact: true, align: "center"}) %>
<%= pb_rails("weekday_stacked", props: { variant: "month_day", compact: true, align: "right" }) %>

Variant

Mon

Jun 5

Mon

5

Mon

6/5

<%= pb_rails("weekday_stacked", props: {variant: "expanded", }) %>
<%= pb_rails("weekday_stacked", props: { variant: "day_only", align: "center" }) %>
<%= pb_rails("weekday_stacked", props: { variant: "month_day", align: "right" }) %>

Time And Date

Date

Date Range Inline

Date Range Stacked

18 JUN

20 MAR

Date Stacked

5

5

20

20

5

5

5

5

5

5

5

5

5

5

Jun

5

Mar

20

2018

Jun

5

Date Time

Date Time Stacked

Jun

5

Mar

20

2018

Jun

5

Jun

5

Date Year Stacked

5 JUN

5 JUN

5 JUN

Time

East Coast

Central

Mountain

West Coast

Toyko, Japan

Time Range Inline

Time Stacked

Timestamp

Weekday Stacked