<wa-relative-time>
Outputs a localized time phrase relative to the current date and time.
Localization is handled by the browser's
Intl.RelativeTimeFormat API. No language packs are required.
<!-- Web Awesome 2 release date 🎉 --> <wa-relative-time date="2020-07-15T09:17:00-04:00"></wa-relative-time>
The date attribute determines when the date/time is calculated from. It must be a string that
Date.parse()
can interpret or a
Date
object set via JavaScript.
When using strings, avoid ambiguous dates such as 03/04/2020 which can be interpreted as
March 4 or April 3 depending on the user's browser and locale. Instead, always use a valid
ISO 8601 date time string
to ensure the date will be parsed properly by all clients.
Use the sync attribute to update the displayed value automatically as time passes.
<div class="relative-time-sync"> <wa-relative-time sync></wa-relative-time> </div> <script> const container = document.querySelector('.relative-time-sync'); const relativeTime = container.querySelector('wa-relative-time'); relativeTime.date = new Date(new Date().getTime() - 60000); </script>
You can change how the time is displayed using the format attribute. Note that some locales may
display the same values for narrow and short formats.
<wa-relative-time date="2020-07-15T09:17:00-04:00" format="narrow"></wa-relative-time><br /> <wa-relative-time date="2020-07-15T09:17:00-04:00" format="short"></wa-relative-time><br /> <wa-relative-time date="2020-07-15T09:17:00-04:00" format="long"></wa-relative-time>
Use the lang attribute to set the desired locale.
English: <wa-relative-time date="2020-07-15T09:17:00-04:00" lang="en-US"></wa-relative-time><br /> Chinese: <wa-relative-time date="2020-07-15T09:17:00-04:00" lang="zh-CN"></wa-relative-time><br /> German: <wa-relative-time date="2020-07-15T09:17:00-04:00" lang="de"></wa-relative-time><br /> Greek: <wa-relative-time date="2020-07-15T09:17:00-04:00" lang="el"></wa-relative-time><br /> Russian: <wa-relative-time date="2020-07-15T09:17:00-04:00" lang="ru"></wa-relative-time>
| Name | Description | Reflects | |
|---|---|---|---|
datedate
|
The date from which to calculate time from. 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().
Type
Date | string
Default
new Date()
|
||
formatformat
|
The formatting style to use.
Type
'long' | 'short' | 'narrow'
Default
'long'
|
||
numericnumeric
|
When
auto, values such as "yesterday" and "tomorrow" will be shown
when possible. When always, values such as "1 day ago" and "in 1
day" will be shown.
Type
'always' | 'auto'
Default
'auto'
|
||
syncsync
|
Keep the displayed value up to date as time passes.
Type
boolean
Default
false
|
The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
To manually import this component from the CDN, use the following code.
import 'https://early.webawesome.com/webawesome@3.0.0-alpha.4/dist/components/relative-time/relative-time.js';