Noora (0.11.0)

Time

Different time display formats Open in playground
2 years ago
January 1, 2023
<div style="min-width: 300px; height: 80px;">
  <.time time={~U[2023-01-01 12:00:00Z]}/>
</div>

<div style="min-width: 300px; height: 80px;">
  <.time time={~U[2023-01-01 12:00:00Z]} show_time/>
</div>

<div style="min-width: 300px; height: 80px;">
  <.time time={~U[2023-01-01 12:00:00Z]} relative/>
</div>
Various timestamps to show different scenarios Open in playground 
<div style="min-width: 300px; height: 80px;">
  <.time time={~U[2023-06-15 08:30:00Z]} show_time/>
</div>

<div style="min-width: 300px; height: 80px;">
  <.time time={~U[2023-06-15 19:45:00Z]} show_time/>
</div>

<div style="min-width: 300px; height: 80px;">
  <.time time={~U[2023-06-15 00:00:00Z]} show_time/>
</div>

<div style="min-width: 300px; height: 80px;">
  <.time time={~U[2023-06-15 12:00:00Z]} show_time/>
</div>
Relative time formatting examples Open in playground
2 years ago
January 1, 2023
2 years ago
December 31, 2022
2 years ago
December 25, 2022
3 years ago
January 1, 2022
<div style="min-width: 300px; height: 80px;">
  <.time time={~U[2023-01-01 11:58:00Z]} relative/>
</div>

<div style="min-width: 300px; height: 80px;">
  <.time time={~U[2022-12-31 12:00:00Z]} relative/>
</div>

<div style="min-width: 300px; height: 80px;">
  <.time time={~U[2022-12-25 12:00:00Z]} relative/>
</div>

<div style="min-width: 300px; height: 80px;">
  <.time time={~U[2022-01-01 12:00:00Z]} relative/>
</div>
Special dates and edge cases Open in playground 
<div style="min-width: 300px; height: 80px;">
  <.time time={~U[2024-01-01 00:00:00Z]} show_time/>
</div>

<div style="min-width: 300px; height: 80px;">
  <.time time={~U[2024-02-29 12:00:00Z]}/>
</div>

<div style="min-width: 300px; height: 80px;">
  <.time time={~U[2030-12-31 23:59:59Z]} show_time/>
</div>