Relative Time

Updated:

Use for displaying time differences like "2 hours ago" or "in 3 days".

Properties

Learn more about properties.

baseDate
base-date

If you want to display the length of time between two specific dates, you can provide a valid date and baseDate, and the component will display the length of time between the two dates.

If baseDate is not provided, the date and time at render will be used instead and - if sync is true - updated every second to reflect the time between the date value and the time at render.

  • Requires a valid date value.
  • If the provided baseDate is invalid, the component will display "Invalid Date" and a warning message will be printed in the console.
  • Providing a valid baseDate will disable sync and remove the "in"/"ago" suffixes in the time message.
  • Must be a valid ISO date string.
date

The date you want to calculate relative time from.

  • Must be a valid ISO date string.
  • If the provided date is invalid, the component will display "Invalid Date" and a warning message will be printed in the console.
locale

The language used for the displayed message.

It is recommended to use the BCP 47 Language Tags in the "language-extlang" format.

messageFormat
message-format

The length of the relative time message.

numeric

Determines if the displayed message will use numeric or relative values.

Set this property to always to force the use of numeric values (e.g. "1 day ago") rather than relative ones (e.g. "yesterday").

sync

Keep the displayed message updated as time passes in the webpage.

If a valid baseDate is provided, sync will be set to false.

unit

Enforces the use of the provided unit of measurement in the displayed message.

Methods

The q2-relative-time element exposes methods that can be used to perform various actions on the component.

Learn more about methods.

displayedMessageValue

Retrieves the value of the displayed messages.

Type signature

displayedMessageValue() => Promise<string>

validBaseDateProp

Checks the provided baseDate prop is a valid date.

Type signature

validBaseDateProp() => Promise<boolean>

validDateProp

Checks the provided date prop is a valid date.

Type signature

validDateProp() => Promise<boolean>

Patterns

Provide clean examples of how to compose multiple components together in order to achieve a specific visual outcome that is curated and maintained by Tecton.

Full-page patterns

  • Message Center Page

    How to build a Message Center page in Tecton: a two-panel layout with a message list on the left and a selected message detail plus response form on the right.

Accessibility

Accessibility Report

Tecton components are designed and tested to be WCAG compliant when used appropriately, and do not get released without proper validation. Developers should prefer not to set ARIA attributes when using components from the Tecton Design System.

CSS Variables

The following CSS variables are available to override the default theme styles of the q2-relative-time component.

No results

Changelog

The changelog provides a detailed history of new features, improvements, and bug fixes going back to Tecton 1.30.0. If the button is disabled, it indicates there have been no detectable changes since then.

Show changelog (6)