Playbook Design System

Date

Default

Oct 1

Aug 2, 2012

Sat

•

Dec 2, 2017

Oct 1

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

Oct 1

Sun

•

Oct 1

Sun

•

Oct 1

<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

Sun

•

Oct 1

Sun

•

Oct 1

Sun

•

Oct 1

 <%= 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)

Oct 1

West Coast

Oct 1

Toyko, Japan

Oct 1

Anti-pattern example

Oct 1

Date.today ignores Timezone

DateTime respects Timezone

Oct 2

'.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."}) %>

Unstyled

Example with no year

Oct 1

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.

<%= pb_rails("caption", props: { size: "xs", text: "Example with no year" }) %>

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

<br />

<%= pb_rails("caption", props: { size: "xs", text: "Example with wrapping typography kit" }) %>

<%= pb_rails("title", props: { size: 1 }) do %>
  <%= pb_rails("date", props: {
    date: "2012-08-02T15:49:29Z",
    unstyled: true
  }) %>
<% end %>

<br />

<%= pb_rails("caption", props: { size: "xs", text: "Example with icon + subcaption" }) %>

<%= pb_rails("caption", props: { size: "xs" }) do %>
  <%= pb_rails("date", props: {
    date: "2012-08-02T15:49:29Z",
    show_icon: true,
    unstyled: true,
    show_day_of_week: true
  }) %>
<% end %>

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

Oct

1

Oct

1

<%= 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

Oct

1

Oct

1

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

<br>

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

Sizes

Oct

1

Oct

1

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

<br>

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

Alignment

Oct

1

Oct

1

Oct

1

Oct

1

Oct

1

Oct

1

<%= 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

Oct

1 Mar

20 2018

Oct

1

<%= 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

Sun

•

Oct 1

10:50a EDT

Sun

•

Oct 1

10:50a EDT

Oct 1

10:50a EDT

Oct 1

11:50p 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

Oct 1

10:50a EDT

Oct 1

10:50a EDT

Oct 1

10:50a 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

Sun

•

Oct 1

10:50a EDT

Oct 1

11:50p JST

Sun

•

Oct 1

10:50a EDT

Oct 1

11:50p 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

Oct

1

10:50a EDT

Mar

20 2018

12:00a EDT

Oct

1

11:50p JST

Oct

1

8:50a 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

1 OCT

2023

1 OCT

2023

1 OCT

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

10:50a

10:50a EDT

11:49a

11:49a EDT

10:50a

10:50a 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

10:50a EDT

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

<br>

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

Timestamp Values

11:49a

10:50a

9:50a 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

10:50a EDT

Central

9:50a CDT

Mountain

8:50a MDT

West Coast

7:50a PDT

Toyko, Japan

11:50p 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

10:50a 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"
}) %>

Unstyled

Example with no year

10:50a EDT

Example with wrapping typography kit

10:50a EDT

Example with icon + subcaption

10:50a EDT

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

<%= pb_rails("caption", props: { size: "xs", text: "Example with no year" }) %>

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

<br />

<%= pb_rails("caption", props: { size: "xs", text: "Example with wrapping typography kit" }) %>

<%= pb_rails("title", props: { size: 1 }) do %>
  <%= pb_rails("time", props: {
    show_icon: true,
    show_timezone: true,
    time: DateTime.now,
    timezone: "America/New_York",
    unstyled: true
  }) %>
<% end %>

<br />

<%= pb_rails("caption", props: { size: "xs", text: "Example with icon + subcaption" }) %>

<%= pb_rails("caption", props: { size: "xs" }) do %>
  <%= pb_rails("time", props: {
    show_icon: true,
    show_timezone: true,
    time: DateTime.now,
    timezone: "America/New_York",
    unstyled: true
  }) %>
<% end %>

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

10:50a 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

10:50a

Oct 1 · 10:50a

Oct 1, 2027 · 10:50a

Oct 1, 2022 · 10:50a

<%= 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

10:50a

Oct 1 · 10:50a

Oct 1, 2027 · 10:50a

Oct 1, 2022 · 10:50a

10:50a

Oct 1 · 10:50a

Oct 1, 2027 · 10:50a

Oct 1, 2022 · 10:50a

10:50a

Oct 1 · 10:50a

Oct 1, 2027 · 10:50a

Oct 1, 2022 · 10:50a

<%= 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

10:50a EDT

Oct 1 · 10:50a EDT

Oct 1, 2027 · 10:50a EDT

Oct 1, 2022 · 10:50a EDT

10:50p HKT

Oct 1 · 10:50p HKT

Oct 1, 2027 · 10:50p HKT

Oct 1, 2022 · 10:50p 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 Oct 1 at 10:50a

Last updated on Oct 1 at 10:50a

<%= 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
}) %>

Unstyled

Basic unstyled example

Oct 1 · 10:50a

Example with wrapping typography kit

Oct 1 · 10:50a

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

<%= pb_rails("caption", props: { size: "xs", text: "Basic unstyled example" }) %>

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

<br />

<%= pb_rails("caption", props: { size: "xs", text: "Example with wrapping typography kit" }) %>

<%= pb_rails("title", props: { size: 1 }) do %>
  <%= pb_rails("timestamp", props: {
    timestamp: DateTime.now,
    show_date: true,
    align: "left",
    unstyled: true,
  }) %>
<% end %>

Weekday Stacked

Default

Sat

9/30

Sat

9/30

Sat

9/30

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

Compact

S

Sep 30

S

30

S

9/30

<%= 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

Sat

Sep 30

Sat

30

Sat

9/30

<%= 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

Aug 2, 2012

Date Range Inline

Date Range Stacked

18 JUN

20 MAR

Date Stacked

1

1

20

20

1

1

1

1

1

1

1

1

1

1

Oct

1

Mar

20

2018

Oct

1

Date Time

Date Time Stacked

Oct

1

Mar

20

2018

Oct

1

Oct

1

Date Year Stacked

1 OCT

1 OCT

1 OCT

Time

East Coast

Central

Mountain

West Coast

Toyko, Japan

10:50a EDT

Time Range Inline

Time Stacked

Timestamp

Oct 1 · 10:50a

Weekday Stacked

Contribute to Playbook

Power

Connect