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-27T03:53:36.088Z

2025-11-26T05:53:36.088Z

2025-11-30T05:53:36.088Z

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-27T03:53:36.088Z</bp-format-relative-time>

  <bp-format-relative-time>2025-11-26T05:53:36.088Z</bp-format-relative-time>

  <bp-format-relative-time>2025-11-30T05:53:36.088Z</bp-format-relative-time>
</div>

Numeric Format

2025-11-26T05:53:36.101Z

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-26T05:53:36.101Z</bp-format-relative-time>

  <bp-format-relative-time numeric="always">2025-11-26T05:53:36.101Z</bp-format-relative-time>
</div>

Style Variations

2025-11-27T03:53:36.109Z

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-27T03:53:36.109Z</bp-format-relative-time>

  <bp-format-relative-time format-style="short">2025-11-27T03:53:36.109Z</bp-format-relative-time>

  <bp-format-relative-time format-style="narrow">2025-11-27T03:53:36.109Z</bp-format-relative-time>
</div>

Specific Unit

2025-11-25T05:53:36.107Z

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-25T05:53:36.107Z</bp-format-relative-time>

  <bp-format-relative-time unit="hour">2025-11-25T05:53:36.107Z</bp-format-relative-time>

  <bp-format-relative-time unit="day">2025-11-25T05:53:36.107Z</bp-format-relative-time>
</div>

Live Sync

2025-11-27T05:52:36.098Z

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-27T05:52:36.098Z</bp-format-relative-time>

  <bp-format-relative-time sync>2025-11-27T05:52:36.098Z</bp-format-relative-time>
</div>

Future Date

2025-11-28T05:53:36.093Z

2025-12-04T05:53:36.093Z

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-28T05:53:36.093Z</bp-format-relative-time>

  <bp-format-relative-time>2025-12-04T05:53:36.093Z</bp-format-relative-time>
</div>

Inline Text

Last updated2025-11-27T04:53:36.095Z

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-27T04:53:36.095Z</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