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-01-06T02:14:26.868Z

2026-01-05T04:14:26.868Z

2026-01-09T04:14:26.868Z

code

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

<div bp-layout="block gap:md">
  <bp-format-relative-time>2026-01-06T02:14:26.868Z</bp-format-relative-time>

  <bp-format-relative-time>2026-01-05T04:14:26.868Z</bp-format-relative-time>

  <bp-format-relative-time>2026-01-09T04:14:26.868Z</bp-format-relative-time>
</div>

Numeric Format

2026-01-05T04:14:26.894Z

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-01-05T04:14:26.894Z</bp-format-relative-time>

  <bp-format-relative-time numeric="always">2026-01-05T04:14:26.894Z</bp-format-relative-time>
</div>

Style Variations

2026-01-06T02:14:26.900Z

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-01-06T02:14:26.900Z</bp-format-relative-time>

  <bp-format-relative-time format-style="short">2026-01-06T02:14:26.900Z</bp-format-relative-time>

  <bp-format-relative-time format-style="narrow">2026-01-06T02:14:26.900Z</bp-format-relative-time>
</div>

Specific Unit

2026-01-04T04:14:26.897Z

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-01-04T04:14:26.897Z</bp-format-relative-time>

  <bp-format-relative-time unit="hour">2026-01-04T04:14:26.897Z</bp-format-relative-time>

  <bp-format-relative-time unit="day">2026-01-04T04:14:26.897Z</bp-format-relative-time>
</div>

Live Sync

2026-01-06T04:13:26.891Z

code

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

<div bp-layout="block gap:md">
  <bp-format-relative-time>2026-01-06T04:13:26.891Z</bp-format-relative-time>

  <bp-format-relative-time sync>2026-01-06T04:13:26.891Z</bp-format-relative-time>
</div>

Future Date

2026-01-07T04:14:26.878Z

2026-01-13T04:14:26.878Z

code

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

<div bp-layout="block gap:md">
  <bp-format-relative-time>2026-01-07T04:14:26.878Z</bp-format-relative-time>

  <bp-format-relative-time>2026-01-13T04:14:26.878Z</bp-format-relative-time>
</div>

Inline Text

Last updated2026-01-06T03:14:26.886Z

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-01-06T03:14:26.886Z</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