github/relative-time-element

Formats a timestamp as a localized string or as relative text that auto-updates in the user's browser.

This allows the server to cache HTML fragments containing dates and lets the browser choose how to localize the displayed time according to the user's preferences. For example, the server may have cached the following generated markup:

Every visitor is served the same markup from the server's cache. When it reaches the browser, the custom relative-time JavaScript localizes the element's text into the local timezone and formatting.

Dates are displayed before months, and a 24-hour clock is used, according to the user's browser settings.

If the browser's JavaScript is disabled, the default text served in the cached markup is still displayed.

Available on npm as @github/relative-time-element.

This element uses the Intl.DateTimeFormat & Intl.RelativeTimeFormat APIs, which are supported by all modern JS engines. If you need to support an older browser, you may need to introduce a polyfill for Intl.DateTimeFormat & Intl.RelativeTimeFormat.

Add a <relative-time> element to your markup. Provide a default formatted date as the element's text content (e.g. April 1, 2014). It also MUST have a datetime attribute set to an ISO 8601 formatted timestamp.

Depending on how far in the future this is being viewed, the element's text will be replaced with one of the following formats:

So, a relative date phrase is used for up to a month and then the actual date is shown.