Usage

By default, the given value is formatted for display with to_string/1. This:

<.date value={~D[2023-02-05]} />

Will be rendered as:

<time datetime="2023-02-05">
  2023-02-05
</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:

<.date
  value={~D[2023-02-05]}
  formatter={&MyApp.Cldr.Date.to_string!/1}
/>

Which, depending on your locale, may be rendered as:

<time datetime="2023-02-05">
  Feb 2, 2023
</time>

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.

<.date
  value={@date}
  formatter={&relative_date/1}
  title_formatter={&MyApp.Cldr.Date.to_string!/1}
/>

Finally, the component can shift a DateTime to a different time zone before converting it to a date:

<.date
  value={~U[2023-02-05 23:22:05Z]}
  timezone="Asia/Tokyo"
/>

Which would be rendered as:

<time datetime="2023-02-06">
  2023-02-06
</time>