Relative Time
<ahi-relative-time> | AhiRelativeTime
Displays the difference between a date and the current time. Localization is handled by the browser’s Intl.RelativeTimeFormat API. No language packs are required.
Used to display the time difference between a given date & time and now.
Time since 2018:
Time since 2018: <ahi-relative-time date="2018-12-31T23:59:59Z"></ahi-relative-time>
Examples
Keeping up to date
Use the sync property to keep the relative time updated with the current time.
Time since page load (
Time since page load (<ahi-format-date hour="numeric" minutes="2-digit" hour-format="auto"></ahi-format-date>):
<ahi-relative-time sync></ahi-relative-time>
Importing
To import this component using a script tag:
<script type="module" src="/path/to/azalea-kit-ui/dist/components/relative-time/relative-time.js"></script>To import this component using a bundler:
import '@azaleahealth/azalea-kit-ui/dist/components/relative-time/relative-time.js';Properties
| Name | Description | Type | Default | |
|---|---|---|---|---|
date
|
The date/time to format. If not set, the current date and time will be used. When passing a string,
it’s strongly recommended to use the ISO 8601 format to ensure timezones are handled correctly. To
convert a date to this format in JavaScript, use
date.toISOString().
|
Date | string
|
new Date()
|
|
format
|
The length of the internationalized message. Defaults to ‘long’. |
'long' | 'short' | 'narrow'
|
'long'
|
|
numeric
|
The format of output message. Defaults to ‘auto’. |
'always' | 'auto'
|
'auto'
|
|
sync
|
Keeps the relative time updated with the current time. |
boolean
|
false
|
|
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about properties and attributes.