Format Relative Time

npm2.0.0

The format-relative-time component displays relative time (e.g., "2 hours ago", "in 3 days") using the Intl.RelativeTimeFormat API.

Example

2026-02-08T19:28:51.454Z

2026-02-07T21:28:51.454Z

2026-02-11T21:28:51.454Z

code

<script type="module">
  import '@blueprintui/components/include/format-relative-time.js';
</script>

<div bp-layout="block gap:md">
  <bp-format-relative-time>2026-02-08T19:28:51.454Z</bp-format-relative-time>

  <bp-format-relative-time>2026-02-07T21:28:51.454Z</bp-format-relative-time>

  <bp-format-relative-time>2026-02-11T21:28:51.454Z</bp-format-relative-time>
</div>

Numeric Format

2026-02-07T21:28:51.474Z

code

<script type="module">
  import '@blueprintui/components/include/format-relative-time.js';
</script>

<div bp-layout="block gap:md">
  <bp-format-relative-time numeric="auto">2026-02-07T21:28:51.474Z</bp-format-relative-time>

  <bp-format-relative-time numeric="always">2026-02-07T21:28:51.474Z</bp-format-relative-time>
</div>

Style Variations

2026-02-08T19:28:51.481Z

code

<script type="module">
  import '@blueprintui/components/include/format-relative-time.js';
</script>

<div bp-layout="block gap:md">
  <bp-format-relative-time format-style="long">2026-02-08T19:28:51.481Z</bp-format-relative-time>

  <bp-format-relative-time format-style="short">2026-02-08T19:28:51.481Z</bp-format-relative-time>

  <bp-format-relative-time format-style="narrow">2026-02-08T19:28:51.481Z</bp-format-relative-time>
</div>

Specific Unit

2026-02-06T21:28:51.477Z

code

<script type="module">
  import '@blueprintui/components/include/format-relative-time.js';
</script>

<div bp-layout="block gap:md">
  <bp-format-relative-time unit="auto">2026-02-06T21:28:51.477Z</bp-format-relative-time>

  <bp-format-relative-time unit="hour">2026-02-06T21:28:51.477Z</bp-format-relative-time>

  <bp-format-relative-time unit="day">2026-02-06T21:28:51.477Z</bp-format-relative-time>
</div>

Live Sync

2026-02-08T21:27:51.471Z

code

<script type="module">
  import '@blueprintui/components/include/format-relative-time.js';
</script>

<div bp-layout="block gap:md">
  <bp-format-relative-time>2026-02-08T21:27:51.471Z</bp-format-relative-time>

  <bp-format-relative-time sync>2026-02-08T21:27:51.471Z</bp-format-relative-time>
</div>

Future Date

2026-02-09T21:28:51.457Z

2026-02-15T21:28:51.457Z

code

<script type="module">
  import '@blueprintui/components/include/format-relative-time.js';
</script>

<div bp-layout="block gap:md">
  <bp-format-relative-time>2026-02-09T21:28:51.457Z</bp-format-relative-time>

  <bp-format-relative-time>2026-02-15T21:28:51.457Z</bp-format-relative-time>
</div>

Inline Text

Last updated2026-02-08T20:28:51.467Z

code

<script type="module">
  import '@blueprintui/components/include/format-relative-time.js';
</script>

<p bp-text="content">Last updated <bp-format-relative-time format-style="short">2026-02-08T20:28:51.467Z</bp-format-relative-time></p>

Install

NPM

// npm package
import '@blueprintui/components/include/format-relative-time.js';

CDN

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/format-relative-time.js/+esm';
</script>

bp-format-relative-time

Properties

Name	Types	Description
`numeric`	`'always' \| 'auto'`	determines how to format the time: 'auto' shows "yesterday" vs "1 day ago"
`formatStyle`	`'long' \| 'short' \| 'narrow'`	determines the formatting style: 'long', 'short', or 'narrow'
`unit`	`'second' \| 'minute' \| 'hour' \| 'day' \| 'week' \| 'month' \| 'year' \| 'auto'`	the time unit to use, or 'auto' to automatically select the best unit
`sync`	`boolean`	auto-update the displayed time at appropriate intervals
`locale`	`string`	locale to use for formatting

Attributes

Name	Types	Description
`numeric`	`'always' \| 'auto'`	determines how to format the time: 'auto' shows "yesterday" vs "1 day ago"
`format-style`	`'long' \| 'short' \| 'narrow'`	determines the formatting style: 'long', 'short', or 'narrow'
`unit`	`'second' \| 'minute' \| 'hour' \| 'day' \| 'week' \| 'month' \| 'year' \| 'auto'`	the time unit to use, or 'auto' to automatically select the best unit
`sync`	`boolean`	auto-update the displayed time at appropriate intervals
`locale`	`string`	locale to use for formatting