Make Time Feel Human: Using Relative Time in JavaScript

Mohnish Vishwakarma

21 Oct 2025

Have you ever noticed how apps like Instagram or YouTube show “5 minutes ago” instead of a full date like 2025-10-21T10:30:00Z? That’s called relative time — and it makes your app feel more natural and user-friendly. Instead of reading a boring timestamp, people instantly know how long ago something happened. Luckily, JavaScript has a built-in way to do this easily: Intl.RelativeTimeFormat

Make Time Feel Human: Using Relative Time in JavaScript

What Is Intl.RelativeTimeFormat?

It’s a built-in JavaScript object that turns numbers into human-readable time strings — in any language!

Example:

const rtf = new Intl.RelativeTimeFormat("en");
console.log(rtf.format(-3, "days")); // → "3 days ago"
console.log(rtf.format(2, "hours")); // → "in 2 hours"

And if you change the language:

const rtf = new Intl.RelativeTimeFormat("es");
console.log(rtf.format(-3, "days")); // → "hace 3 días"

Boom 💥 — automatic translation!

Useful Options

You can customize how the text looks using two main options:

1. style

This changes how detailed the text is:

{ style: "long" }   // "in 5 hours"
{ style: "short" }  // "in 5 hr"
{ style: "narrow" } // "in 5h"

2. numeric

This controls if words like “yesterday” or “today” are used:

{ numeric: "auto" }   // → "yesterday"
{ numeric: "always" } // → "1 day ago"

Real-Life Example: “Time Ago” Function

Here’s a tiny helper function that shows “x minutes ago” automatically:

const rtf = new Intl.RelativeTimeFormat("en", { numeric: "auto" });

const DIVISIONS = [
  { amount: 60, name: "seconds" },
  { amount: 60, name: "minutes" },
  { amount: 24, name: "hours" },
  { amount: 7,  name: "days" },
  { amount: 4.34524, name: "weeks" },
  { amount: 12, name: "months" },
  { amount: Infinity, name: "years" },
];

function timeAgo(date) {
  let duration = (date - new Date()) / 1000;

  for (const division of DIVISIONS) {
    if (Math.abs(duration) < division.amount) {
      return rtf.format(Math.round(duration), division.name);
    }
    duration /= division.amount;
  }
}

Example:

timeAgo(new Date(Date.now() - 3600 * 1000)); // → "1 hour ago"

Simple, readable, and ready for production.

Why Use It?

No manual math or translations — JavaScript handles all of that.

Works in different languages — great for global users.

Cleaner UI — people understand “3 hours ago” faster than a full date.

A Few Tips

Works in all modern browsers, but old ones may need a polyfill.
Use numeric: "auto" for a natural look (“yesterday”, “today”).
Keep your date/time in sync with your server to avoid wrong times.

In Short

Intl.RelativeTimeFormat is a small but powerful tool that makes your app feel human. With just a few lines of code, you can replace dull timestamps with friendly, readable phrases like “5 minutes ago” or “in 2 weeks”.

Perfect for:

Comments
Notifications
Chat messages
Activity feeds