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