Relative Time
The RelativeTime component is an element used to display the relative time based on the inserted date. Calculates and displays the relative time difference between the current date and the specified date. The relative time format is localized based on the language of the user's browser.
Basic usage
When to use
Use wje-relative-time to improve readability, scannability, and contextual understanding of content.
When not to use
Do not replace structured interactive data with media-only presentation when precision is needed.
Accessibility
Provide alt text, maintain readable contrast, and include text equivalents for icon-only controls.
Best Practices
- Compress media and use lazy loading in larger collections.
- Keep information priority consistent across cards/lists.
- Avoid duplicating the same meaning in icon and text without added value.
Attributes and Properties
date
| Description | Gets the date of the relative time component. |
| Attribute | date |
| Type | string |
| Default | - |
lang
| Description | Sets the locale used for formatting and labels. |
| Attribute | lang |
| Type | any |
| Default | - |
Events
No events available for this component.
Methods
getRelativeTimeString
| Description | Returns the relative time string for the given date. |
| Signature | (lang: any) => void |
isISODate
| Description | Checks if the given string is an ISO date. |
| Signature | (str: string) => boolean |
CSS Shadow Parts
| Name | Description |
|---|---|
native | The native part of the relative time component. |
CSS Custom Properties
No CSS custom properties available for this component.
Slots
No slots available for this component.