Formats a DateTime
or NaiveDateTime
as a date time and renders it
in a <time>
element.
By default, the given value is formatted for display with to_string/1
. This:
<.datetime value={~U[2023-02-05 12:22:06.003Z]} />
Will be rendered as:
<time datetime="2023-02-05T12:22:06.003Z">
2023-02-05 12:22:06.003Z
</time>
You can also pass a custom formatter function. For example, if you are using ex_cldr_dates_times in your application, you could do this:
<.datetime
value={~U[2023-02-05 14:22:06.003Z]}
formatter={&MyApp.Cldr.DateTime.to_string!/1}
/>
Which, depending on your locale, may be rendered as:
<time datetime="2023-02-05T14:22:06.003Z">
Feb 2, 2023, 14:22:06 PM
</time>
The component can also truncate the value before passing it to the formatter.
<.datetime
value={~U[2023-02-05 12:22:06.003Z]}
precision={:minute}
/>
If you pass a title_formatter
, a title
attribute is added to the
element. This can be useful if you want to render the value in a shortened
or relative format, but still give the user access to the complete value.
Note that the title attribute is only be accessible to users who use
a pointer device. Some screen readers may however announce the datetime
attribute that is always added.
<.datetime
value={@datetime}
formatter={&relative_date/1}
title_formatter={&MyApp.Cldr.DateTime.to_string!/1}
/>
Finally, the component can shift a DateTime
to a different time zone:
<.datetime
value={~U[2023-02-05 23:22:05Z]}
timezone="Asia/Tokyo"
/>
Which would be rendered as:
<time datetime="2023-02-06T08:22:05+09:00">
2023-02-06 08:22:05+09:00 JST Asia/Tokyo
</time>
<.datetime value={~U[2023-02-05 12:22:06.003Z]} formatter={&DateTime.to_unix/1}/>
<.datetime value={~U[2023-02-05 12:22:06.003Z]} title_formatter={&DateTime.to_unix/1}/>
<.datetime value={~U[2023-02-05 23:22:05Z]} timezone="Asia/Tokyo"/>