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

2025-11-22T03:49:13.401Z

2025-11-21T05:49:13.401Z

2025-11-25T05:49:13.401Z

code

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

<div bp-layout="block gap:md">
  <bp-format-relative-time>2025-11-22T03:49:13.401Z</bp-format-relative-time>

  <bp-format-relative-time>2025-11-21T05:49:13.401Z</bp-format-relative-time>

  <bp-format-relative-time>2025-11-25T05:49:13.401Z</bp-format-relative-time>
</div>

Numeric Format

2025-11-21T05:49:13.443Z

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">2025-11-21T05:49:13.443Z</bp-format-relative-time>

  <bp-format-relative-time numeric="always">2025-11-21T05:49:13.443Z</bp-format-relative-time>
</div>

Style Variations

2025-11-22T03:49:13.465Z

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">2025-11-22T03:49:13.465Z</bp-format-relative-time>

  <bp-format-relative-time format-style="short">2025-11-22T03:49:13.465Z</bp-format-relative-time>

  <bp-format-relative-time format-style="narrow">2025-11-22T03:49:13.465Z</bp-format-relative-time>
</div>

Specific Unit

2025-11-20T05:49:13.450Z

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">2025-11-20T05:49:13.450Z</bp-format-relative-time>

  <bp-format-relative-time unit="hour">2025-11-20T05:49:13.450Z</bp-format-relative-time>

  <bp-format-relative-time unit="day">2025-11-20T05:49:13.450Z</bp-format-relative-time>
</div>

Live Sync

2025-11-22T05:48:13.433Z

code

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

<div bp-layout="block gap:md">
  <bp-format-relative-time>2025-11-22T05:48:13.433Z</bp-format-relative-time>

  <bp-format-relative-time sync>2025-11-22T05:48:13.433Z</bp-format-relative-time>
</div>

Future Date

2025-11-23T05:49:13.414Z

2025-11-29T05:49:13.414Z

code

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

<div bp-layout="block gap:md">
  <bp-format-relative-time>2025-11-23T05:49:13.414Z</bp-format-relative-time>

  <bp-format-relative-time>2025-11-29T05:49:13.414Z</bp-format-relative-time>
</div>

Inline Text

Last updated2025-11-22T04:49:13.428Z

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">2025-11-22T04:49:13.428Z</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