Playbook Design System

Date

Default

Apr 4

Aug 2, 2012

Sat

•

Dec 2, 2017

Apr 4

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

Apr 4

Sat

•

Apr 4

Sat

•

Apr 4

<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

Sat

•

Apr 4

Sat

•

Apr 4

Sat

•

Apr 4

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

Apr 4

West Coast

Apr 4

Toyko, Japan

Apr 5

Anti-pattern example

Apr 4

Date.today ignores Timezone

DateTime respects Timezone

Apr 5

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

Show Current Year

Apr 4, 2026

By default, the Date kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting showCurrentYear/show_current_year to true as shown here.

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

Unstyled

Example with no year

Apr 4

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>

Show Current Year

Oct 31, 2026 Dec 7, 2026

By default, the Date Range Inline kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting showCurrentYear/show_current_year to true as shown here.

<%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 10, 31), end_date: Date.new(Date.current.year, 12, 7), size: "xs", show_current_year: true }) %>
<%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 10, 31), end_date: Date.new(Date.current.year, 12, 7), show_current_year: true }) %>
<%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 10, 31), end_date: Date.new(Date.current.year, 12, 7), align: "center", icon: true, size: "xs", show_current_year: true }) %>
<%= pb_rails("date_range_inline", props: { start_date: Date.new(Date.current.year, 10, 31), end_date: Date.new(Date.current.year, 12, 7), align: "center", icon: true, show_current_year: true }) %>

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

Apr

4

Mar

20

2018

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

<br>

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

Show Current Year

Apr

4

2026

Apr

4

2026

By default, the Date Stacked kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting showCurrentYear/show_current_year to true as shown here.

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

<br>

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

Day & Month Reverse

Apr

4

Apr

4

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

<br>

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

Sizes

Apr

4

Apr

4

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

<br>

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

Alignment

Apr

4

Apr

4

Apr

4

Apr

4

Apr

4

Apr

4

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

Apr

4 Mar

20 2018

Apr

4

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

Sat

•

Apr 4

2:28p EDT

Sat

•

Apr 4

2:28p EDT

Apr 4

2:28p EDT

Apr 5

3:28a 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

Apr 4

2:28p EDT

Apr 4

2:28p EDT

Apr 4

2:28p 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

Sat

•

Apr 4

2:28p EDT

Apr 5

3:28a JST

Sat

•

Apr 4

2:28p EDT

Apr 5

3:28a 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"
}) %>

Show Current Year

Apr 4, 2026

2:28p EDT

Pass in show_current_year to show this date's current year.

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

Date Time Stacked

Default

Apr

4

2:28p EDT

Mar

20 2018

12:00a EDT

Apr

4

3:28a JST

Apr

4

12:28p 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" }) %>

Show Current Year

Apr

4 2026

2:28p EDT

Apr

4 2026

12:28p MDT

By default, the Date Time Stacked kit does NOT display the year if it is the current year. If you want to display the current year you can do so by setting showCurrentYear/show_current_year to true as shown here.

<%= pb_rails("date_time_stacked", props: { date_time: DateTime.now, show_current_year: true }) %>
<br>
<%= pb_rails("date_time_stacked", props: { date_time: DateTime.now, show_current_year: true, timezone: "America/Denver" }) %>

Date Year Stacked

Default

4 APR

2026

4 APR

2026

4 APR

2026

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

2:28p

2:28p EDT

11:49a

11:49a EDT

2:28p

2:28p 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

2:28p EDT

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

<br>

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

Timestamp Values

11:49a

2:28p

1:28p 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

2:28p EDT

Central

1:28p CDT

Mountain

12:28p MDT

West Coast

11:28a PDT

Toyko, Japan

3:28a 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

2:28p 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

2:28p EDT

Example with wrapping typography kit

2:28p EDT

Example with icon + subcaption

2:28p 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

2:28p 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

Apr 4 · 2:28p

Apr 4, 2030 · 2:28p

Apr 4, 2025 · 2:28p

By default, the timestamp kit will display the date and time as shown here. If the date is NOT within the current year, the year will also be shown while dates in the current year will not show the year.

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

<br>

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

<br>

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

Hide Date

2:28p

The showDate/show_date prop is set to true by default but can be set to false to hide the date.

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

Hide Time

Apr 4

Apr 4, 2030

Apr 4, 2025

The showTime/show_time prop is set to true by default but can be set to false to hide the time.

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

<br>

<%= pb_rails("timestamp", props: {
  timestamp: DateTime.now + 4.years,
  show_time: false,
}) %>

<br>

<%= pb_rails("timestamp", props: {
  timestamp: DateTime.now - 1.year,
  show_time: false
}) %>

Show Current Year

Apr 4, 2026 · 2:28p

Apr 4, 2026

Use the showCurrentYear/show_current_year prop to show the year even if it is the current year. This is set to false by default.

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

<br>

<%= pb_rails("timestamp", props: {
  timestamp: DateTime.now,
  show_time: false,
  show_current_year: true
}) %>

Show Timezones

2:28p EDT

Apr 4 · 2:28p EDT

Apr 4, 2030 · 2:28p EDT

Apr 4, 2025 · 2:28p EDT

2:28a HKT

Apr 5 · 2:28a HKT

Apr 5, 2030 · 2:28a HKT

Apr 5, 2025 · 2:28a HKT

The showTimezone/show_timezone prop can be used to show the timezone as well. This is set to false by default. NOTE: This prop must be used in conjunction with the timezone prop to specify which timezone to display.

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

<br>

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

<br>

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

<br>

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

<br>

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

<br>

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

<br>

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

<br>

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

<br>

Alignments

2:28p

Apr 4 · 2:28p

Apr 4, 2030 · 2:28p

Apr 4, 2025 · 2:28p

2:28p

Apr 4 · 2:28p

Apr 4, 2030 · 2:28p

Apr 4, 2025 · 2:28p

Apr 4 · 2:28p

Apr 4, 2030 · 2:28p

Apr 4, 2025 · 2:28p

The align prop can be used to set alignment. This prop is set to 'left' by default.

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

<br>

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

<br>

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

<br>

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

<br><br>

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

<br>

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

<br>

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

<br>

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

<br><br>

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

<br>

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

<br>

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

<br>

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

Time Ago (Elapsed Variant)

Last updated by Maricris Nonato a few seconds ago

Last updated 3 months ago

A year ago

Use variant elapsed to show time ago. This variant can be customized in several ways:

Use the optional showUser/show_user prop to show user as part of the text. When showing the user, pass in the user name using the text prop as shown. showUser/show_user is set to false by default.

Use the optional hideUpdated/hide_updated prop to hide the 'Last updated' text if needed.

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

<br>

<%= pb_rails("timestamp", props: {
  timestamp: DateTime.now - 3.months,
  variant: "elapsed",
}) %>

<br>

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

Last Updated by (Updated Variant)

Last updated by Maricris Nonato on Apr 4 at 2:28p

Last updated on Apr 4 at 2:28p

Use variant updated to show last updated at timestamp.

This variant can be customized using the optional showUser/show_user prop to show user as part of the text. When showing the user, pass in the user name using the text prop as shown.

showUser/show_user is set to false by default.

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

Last Updated by (Updated Variant) - Show Current Year

Last updated by Maricris Nonato on Apr 4, 2026 at 2:28p

Last updated on Apr 4, 2026 at 2:28p

The updated variant can also be used in conjunction with the showCurrentYear/show_current_year prop to show the year even if it is the current year.

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

<br>

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

Last Updated by (Updated Variant) - Hide Date

Last updated by Maricris Nonato at 2:28p

Last updated at 2:28p

The updated variant can also be used in conjunction with the showDate/show_date prop. This prop is set to true by default but can be set to false to hide the date.

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

<br>

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

Last Updated by (Updated Variant) - Hide Time

Last updated by Maricris Nonato on Apr 4

Last updated on Apr 4

Last updated on Apr 4, 2026

The updated variant can also be used in conjunction with the showTime/show_time prop. This prop is set to true by default but can be set to false to hide the time. This can also be used in conjunction with showCurrentYear/show_current_year to show the year even if it is the current year.

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

<br>

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

<br>

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

Unstyled

Basic unstyled example

Apr 4 · 2:28p

Example with wrapping typography kit

Apr 4 · 2:28p

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,
  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,
    unstyled: true,
  }) %>
<% end %>

Weekday Stacked

Default

Fri

4/3

Fri

4/3

Fri

4/3

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

Compact

F

Apr 3

F

3

F

4/3

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

Fri

Apr 3

Fri

3

Fri

4/3

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

Date And Time Text Patterns

Date

Aug 2, 2012

Date Range Inline

Date Range Stacked

18 JUN

20 MAR

Date Stacked

4

20

4

4

4

4

4

4

4

4

4

4

4

4

Apr

4

Mar

20

2018

Apr

4

Date Time

Date Time Stacked

Apr

4

Mar

20

2018

Apr

4

Apr

4

Apr

4

2026

Apr

4

2026

Date Year Stacked

4 APR

4 APR

4 APR

Time

East Coast

Central

Mountain

West Coast

Toyko, Japan

2:28p EDT

Time Range Inline

Time Stacked

Timestamp

Apr 4 · 2:28p

Weekday Stacked

Contribute to Playbook

Power

Connect