Components
Time-ago
A component to convert datetimes to relative dates strings, such as "a minute ago", "in 2 hours", "yesterday", "3 months ago", etc. using JavaScript's Intl.RelativeTimeFormat API.
Usage ¶
Some examples (as if the datetime was June 20th, 2024 6:30pm):
| Source | Relative date |
|---|---|
<ui:TimeAgo datetime="2024-01-01"/> |
|
<ui:TimeAgo datetime="2024-06-19T18:30"/> |
|
<ui:TimeAgo datetime="2024-06-20T14:00"/> |
|
<ui:TimeAgo datetime="2024-06-21T14:00"/> |
|
<ui:TimeAgo datetime="2024-06-30T10:00"/> |
|
<ui:TimeAgo datetime="1992-10-01"/> |
How it works ¶
The TimeAgo component is rendered as an empty <time datetme="..." data-relative> tag that, when inserted into the page, the datetime is rendered by JavaScript.
Localization ¶
The locale used for the localization of the dates is, in order of priority:
- The optional
langattribute of the component; or - The
langattribute of the<body>tag
Both can be a comma-separated lists of locales (e.g.: "en-US,en-UK,en). If none of these attributes exists, or if the locales are not supported by the browser, it fallsback to the default browser language.
Some examples (as if the datetime was June 20th, 2024 6:30pm):
| Source | Relative date |
|---|---|
<ui:TimeAgo datetime="2024-01-01" lang="it"/> |
|
<ui:TimeAgo datetime="2024-06-19T18:30" lang="fr"/> |
|
<ui:TimeAgo datetime="2024-06-21T14:00" lang="es"/> |
|
<ui:TimeAgo datetime="2024-06-20T05:00" lang="es-PE,es-ES,es"/> |
Component arguments ¶
TimeAgo ¶
| Argument | Type | Description |
|---|---|---|
datetime |
str |
Required |
lang |
str |
Optional comma-separated list of locales to use for formatting. If not defined, the attribute lang of the |
now |
str |
Optional ISO-formatted date to use as the 'present time'. Useful for testing. |
Components ¶
Component |
File |
Source |
|---|---|---|
TimeAgo |
time-ago.jinja |
|
time-ago.js |