Showing Relative Time (1 day ago, 1 min ago, Yesterday etc) with Native Javascript

javascript
Published on March 19, 2019

Showing relative time such as "1 day ago", "5 days ago" etc previously required external Javascript libraries such as Moment.js. But now browsers have added native support for this — you may not need external libraries.

Displaying Relative Time with Intl.RelativeTimeFormat API

The Intl.RelativeTimeFormat object can be used to display time in relative format. The strings are language sensitive too, so words such as "ago", "yesterday", "tomorrow" etc are replaced by their language counterparts.

The first parameter of the Intl.RelativeTimeFormat object is a locale string of the form "en", "en-US", "de-DE", "en-IN" etc. If left blank, then the default browser locale is used.

// new object with "en" locale 
var time = new Intl.RelativeTimeFormat('en');

// will output "5 minutes ago"
console.log(time.format(-5, 'minute'));

// will output "in 5 minutes"
console.log(time.format(5, 'minute'));

// default browser locale
var time = new Intl.RelativeTimeFormat();

// new object with "de-DE" locale 
var time = new Intl.RelativeTimeFormat('de-DE');

// will output "vor 5 Minuten"
console.log(time.format(-5, 'minute'));

// will output "in 5 Minuten"
console.log(time.format(5, 'minute'));

The format method accepts 2 parameters :

  1. numeric value to use in relative time.
  2. unit to use in the relative time. Allowed values are "year", "quarter", "month", "week", "day", "hour", "minute", "second". You can also pass plural forms such as "years", "minutes" etc.

Showing Short or Long Forms in Relative Time

The second parameter of the Intl.RelativeTimeFormat object accepts an object of options. One of them is the style option that can be used to set the length of the message — "1 minute ago", or "1 min. ago".

3 values are allowed for the style option :

  • "long" : This is default. It outputs long format such as "1 minute ago"
  • "short" : It outputs shorter formats such as "1 min ago"
  • "narrow" : Similar to short
var time = new Intl.RelativeTimeFormat('en', {style: "long"});

// will output "1 month ago"
console.log(time.format(-1, 'month'));

// will output "in 1 month"
console.log(time.format(1, 'month'));

var time = new Intl.RelativeTimeFormat('en', {style: "short"});

// will output "1 min. ago"
console.log(time.format(-1, 'minute'));

// will output "in 1 min."
console.log(time.format(1, 'minute'));

Showing Numeric Strings or Words such as "Yesterday" or "Tomorrow"

Another option that can be passed to Intl.RelativeTimeFormat is numeric. This option can be used whether or not to show numeric strings in the output. 2 values are allowed for the numeric option :

  • "always" : This is default. It outputs messages such as "1 day ago"
  • "auto" : It outputs messages such as "yesterday", "this week" etc
var time = new Intl.RelativeTimeFormat('en', {numeric: "always"});

// will output "1 day ago"
console.log(time.format(-1, 'day'));

// will output "in 1 day"
console.log(time.format(1, 'day'));

// will output "in 0 days"
console.log(time.format(0, 'day'));

// will output "1 week ago"
console.log(time.format(-1, 'week'));

// will output "in 1 week"
console.log(time.format(1, 'week'));

// will output "in 0 weeks"
console.log(time.format(0, 'week'));

Strings such as "in 0 days" & "in 0 weeks" do look a bit odd. This can be shown in a better format using "auto".

var time = new Intl.RelativeTimeFormat('en', {numeric: "auto"});

// will output "yesterday"
console.log(time.format(-1, 'day'));

// will output "tomorrow"
console.log(time.format(1, 'day'));

// will output "today"
console.log(time.format(0, 'day'));

// will output "last week"
console.log(time.format(-1, 'week'));

// will output "next week"
console.log(time.format(1, 'week'));

// will output "this week"
console.log(time.format(0, 'week'));

Browser Compatibility

The Intl.RelativeTimeFormat API is now supported in all modern browsers.

In this Tutorial