Relative Time
<cs-relative-time>
Relative times display a date as a localized phrase relative to now, such as "3 hours ago" or "in 2 days". The phrase updates automatically as time passes and respects the user's locale.
Localization is handled by the browser’s Intl.RelativeTimeFormat API. No language packs are required.
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.
Always use ISO 8601 date strings.
Ambiguous formats like 03/04/2020 can be read as March 4 or April 3 depending on the user’s browser and locale. A valid ISO 8601 date time string parses the same for every client.
Examples
Sync
Use the sync attribute to update the displayed value automatically as time passes.
Format
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.
Localization
Use the lang attribute to set the desired locale.
Chinese:
German:
Greek:
Russian:
API
Importing
If you're using the autoloader or a hosted project, components load on demand — no manual import needed. To cherry-pick this component, use one of the following snippets.
import '@cruglobal/cornerstone-components/components/relative-time/relative-time.js';
import './cornerstone/components/relative-time/relative-time.js';
import CsRelativeTime from '@cruglobal/cornerstone-components/react/relative-time/index.js';
Attributes & Properties
Learn more about attributes and properties.
| Property | Attribute | Description | Type | Default | Reflects |
|---|---|---|---|---|---|
date | date | 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(). | Date | string | new Date() | — |
format | format | The formatting style to use. | 'long' | 'short' | 'narrow' | 'long' | — |
numeric | numeric | 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. | 'always' | 'auto' | 'auto' | — |
sync | sync | Keep the displayed value up to date as time passes. | boolean | false | — |