Relative time

Show when an event happened while keeping its exact date available.

Timestamp

Use an offset timestamp for a precise moment. The relative label follows the chosen locale and calendar time zone.

<!-- Load only on pages that use relative time -->
<script type="module" src="/dist/relative-time.js"></script>

<lw-relative-time lang="en" time-zone="America/New_York">
  <time datetime="2026-10-10T15:30:00-04:00">
    <span data-relative-time-fallback>October 10, 2026 at 3:30 PM EDT</span><span data-relative-time-output hidden></span>
  </time>
</lw-relative-time>

Last updated October 10, 2026 at 3:30 PM EDT.

Date-only value

Use a date without a time when the calendar day matters more than a precise instant.

Code

<lw-relative-time lang="en" time-zone="America/New_York">
  <time datetime="2026-10-09">
    <span data-relative-time-fallback>October 9, 2026</span><span data-relative-time-output hidden></span>
  </time>
</lw-relative-time>

Meeting held October 9, 2026.

Fallbacks and options

The absolute label is the source of truth. JavaScript adds a relative label when the value and options are supported.

Keep the exact offset in timestamp values. Set lang to choose the relative wording; set time-zone when calendar-day boundaries should follow a specific place. If either option is omitted, the page locale and viewer's time zone apply.

Without JavaScript, for invalid dates or options, or for dates more than 30 calendar days away, the absolute label remains visible. After enhancement it remains available to assistive technology and by mouse hover. All instances share one second-aligned timer, which stops after the last instance is removed.