Use to display the date. Year will not display if it is the current year.
DateTime
defaults to the "America/New_York" timezone. Date
ignores timezone.
Please note: this kit could potentially change the dates on you!
This is because the Javascript Date
class does not have the concept of a date without time. If you pass a Ruby Date
string to JavaScript, you will receive a date and a time which makes use of the timezone it infers from your browser based on your virtual geolocation or custom browser settings.
For example, if you pass a date like "7/2/2022" and your browser is on London time, Javascript will convert this to "7/2/2022 at 0:00 BST".
Subsequently, if you have not passed in a timezone to this kit, it will convert that time into US Eastern Time (default), making the resulting date and time "7/1/2022 at 19:00 EST". In this case the expected July 2 date will now be presented as July 1.
<%= 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."}) %>