Doggo Storybook 0.9.0

Datetime

Formats a DateTime or NaiveDateTime as a date time and renders it in a <time> element.

Read more Read less

Usage

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>
Attribute Type Documentation Default Value
class :any Any additional classes to be added. Variations of the component should be expressed via modifier attributes, and it is preferable to use styles on the parent container to arrange components on the page, but if you have to, you can use this attribute to pass additional utility classes to the component. The value can be a string or a list of strings. []
formatter :any A function that takes a `DateTime` or a `NaiveDateTime` as an argument and returns the value formatted for display. Defaults to `to_string/1`.
precision :atom Precision to truncate the given value with. The truncation is applied on both the display value and the value of the `datetime` attribute.
rest :global
timezone :string If set and the given value is a `DateTime`, the value will be shifted to that time zone. This affects both the display value and the `datetime` tag. Note that you need to [configure a time zone database](https://hexdocs.pm/elixir/DateTime.html#module-time-zone-database) for this to work.
title_formatter :any When provided, this function is used to format the date time value for the `title` attribute. If the attribute is not set, no `title` attribute will be added.
Required value * :any Either a `DateTime` or `NaiveDateTime`.