FormatRelativeTime

Used to format relative times.

Demo

React

Just now

In 15d

Happened 5h ago

Vue

Just now

In 15d

Happened 5h ago

Example

React

import { FormatRelativeTime } from '@fintech-sandpit/ui/react';

return (
  <FormatRelativeTime
    date={new Date()}
  />

  <FormatRelativeTime
    date={new Date(Date.now() + 1000 * 60 * 60 * 24 * 15)}
  />

  <FormatRelativeTime
    date={new Date()}
    now={new Date(Date.now() + 1000 * 60 * 60 * 5)}
    options={{
      hourAgo: 'Happened %h ago',
    }}
  />
);

Vue

<script setup lang="ts">
import { FormatRelativeTime } from '@fintech-sandpit/ui/vue';
</script>

<template>
  <FormatRelativeTime
    :date="new Date()"
  />

  <FormatRelativeTime
    :date="new Date(Date.now() + 1000 * 60 * 60 * 24 * 15)"
  />

  <FormatRelativeTime
    :date="new Date()"
    :now="new Date(Date.now() + 1000 * 60 * 60 * 5)"
    :options="{
      hourAgo: 'Happened %h ago',
    }"
  />
</template>

Props

Name	Type	Required	Default	Description
date	Date | string	Yes		Date to format
now	Date | string		Date.now()	Date to use for comparison
options	object		—	Options to use for formatting

Formatting options

Option	Default	Example	Description
justNow	'Just now'	Just now	Text to display if the date is just now
inMin	'In %m'	In 15m	Text to display the future date in minutes
minAgo	'%m ago'	15m ago	Text to display the past date in minutes
inHour	'In %h'	In 1h	Text to display the future date in hours
hourAgo	'%h ago'	1h ago	Text to display the past date in hours
inDay	'In %d'	In 1d	Text to display the future date in days
dayAgo	'%d ago'	1d ago	Text to display the past date in days
inMonth	'In %mo'	In 1mo	Text to display if the date is in months
monthAgo	'%mo ago'	1mo ago	Text to display the past date in months
inYear	'In %y'	In 1y	Text to display the future date in years
yearAgo	'%y ago'	1y ago	Text to display the past date in years
notSoon	'Not anytime soon'	Not anytime soon	Text to display if the date is not soon
longAgo	'Long time ago'	Long time ago	Text to display if the date is long ago