<%= 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 }) %>
<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>
<%= 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" }) %>
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."}) %>
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 %>
<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>
<%= 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" }) %>
<%= 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 }) %>
<%= 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" }) %>
<%= 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" }) %>
<%= 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" }) %>
Use this kits on table displays or column headers to display a single date format.
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", }) %>
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>
Continent Options: America | Europe | Asia | Africa | Pacific | India | Atlantic | Australia
<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", }) %>
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 %>
<%= 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" }) %>
<%= 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" }) %>
<%= 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" }) %>
<%= 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>
<%= 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 }) %>
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 %>