--- title: Relative date description: 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. ---

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.

*Some examples (as if the datetime was `June 20th, 2024 6:30pm`)*: | Source | Relative date | -----------------------------------------| -------------- | `` | 6 months ago | `` | yesterday | `` | 5 hours ago | `` | in 19 hours | `` | next week | `` | 32 years ago ## How it works The `RelDate` component is rendered as an empty `` tag and, when the page load, the datetime is rendered by JavaScript. There is also a `MutationObserver` in place to render the datetime on any `` inserted later to the page by JavaScript. ## Localization The locale used for the localization of the dates is, in order of priority: 1. The optional `lang` attribute of the component; or 2. The `lang` attribute of the `` 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 | ---------------------------------------------------------------| -------------- | ` ` | 6 mesi fa | `` | hier | `` | dentro de 19 horas | `` | dentro de 19 horas ## Component arguments ## RelDate | 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 `` tag will be used. If that is also not defined, or none of the locales are supported by the browser, the default browser language is used | `now` | `str` | Optional ISO-formatted date to use as the "present time". Useful for testing.