Relative Time

<quiet-relative-time>

stable

since 1.0

Outputs a relative time in a human-readable format.

<quiet-relative-time date="2024-02-02 12:39:00"></quiet-relative-time>

If you pass a string to the date attribute, always use the ISO 8601 format. Otherwise, ambiguous dates such as 01/02/2000 can be parsed as January 2 or February 1 depending on the client's locale.

Examples Jump to heading

Changing the format Jump to heading

You can change how the time is displayed with the format attribute. Available options include narrow, short, and long.

<quiet-relative-time format="narrow" date="2024-02-02 12:39:00"></quiet-relative-time><br>
<quiet-relative-time format="short" date="2024-02-02 12:39:00"></quiet-relative-time><br>
<quiet-relative-time format="long" date="2024-02-02 12:39:00"></quiet-relative-time>

Using date objects Jump to heading

If you have a reference to the element, you can pass a Date object instead of a string.

<quiet-relative-time id="relative-time__objects"></quiet-relative-time>

<script>
  const relativeTime = document.getElementById('relative-time__objects');

  relativeTime.date = new Date(Date.now() - 10 * 60 * 1000); // 10 mins ago
</script>

Updating live Jump to heading

Add the live attribute to automatically update the time as it passes.

Reset

<quiet-relative-time live id="relative-time__live"></quiet-relative-time>

<br><br>

<quiet-button>Reset</quiet-button>

<script>
  const relativeTime = document.getElementById('relative-time__live');
  const button = relativeTime.parentElement.querySelector('quiet-button');

  relativeTime.date = new Date(Date.now());

  button.addEventListener('click', () => {
    relativeTime.date = new Date();
  });
</script>

Localizing dates Jump to heading

Set the lang attribute on the element to change the language.

<quiet-relative-time lang="es" date="2024-02-02 12:39:00"></quiet-relative-time><br>
<quiet-relative-time lang="de" date="2024-02-02 12:39:00"></quiet-relative-time><br>
<quiet-relative-time lang="ru" date="2024-02-02 12:39:00"></quiet-relative-time>

This component also updates based on the page's language, which can be set using <html lang="…">.

API Jump to heading

Importing Jump to heading

The autoloader is the recommended way to import components but, if you prefer to do it manually, the following code snippets will be helpful.

CDN

npm

To manually import <quiet-relative-time> from the CDN, use the following code.

import 'https://cdn.jsdelivr.net/npm/@quietui/quiet-browser@1.0.0/dist/components/relative-time/relative-time.js';

To manually import <quiet-relative-time> from npm, use the following code.

import '@quietui/quiet/dist/components/relative-time/relative-time.js';

Relative Time has the following properties that can be set with corresponding attributes. In many cases, the attribute's name is the same as the property's name. If an attribute is different, it will be displayed after the property. Learn more about attributes and properties

Property / Attribute	Description	Type	Default
`date`	The date from which to calculate the relative time from. If an attribute is passed, the date should be an ISO 8601 string. If set as a property, a `Date` object can be used instead. If unset, the current date will be assumed.	`Date string`	`new Date()`
`format`	The style of date to render.	`'long' 'short' 'narrow'`	`'long'`
`numeric`	When `auto`, the date may produce strings such as "yesterday" instead of "1 day ago".	`'auto' 'always'`	`'auto'`
`live`	When set, the time will update itself.	`boolean`	`false`

Relative Time

Examples Jump to heading #

Changing the format Jump to heading #

Using date objects Jump to heading #

Updating live Jump to heading #

Localizing dates Jump to heading #

API Jump to heading #

Importing Jump to heading #

Properties Jump to heading #