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