How to represent the number of days in natural language in JavaScript

Amit Merchant · July 19, 2021 ·

Extending the use of the Intl object from the previous article, today we’re going to talk about the Intl.RelativeTimeFormat object that has an important and relatively frequent usecase in modern web applications.

Take the following for example.

Let’s say, you’re developing a social media application and when the user of your application posts something, you might want to show the number of days passed since the day it has been posted intrinsically.

For instance, if the user has posted a day ago, you might want to show “yesterday”. Or if your application has a schedule post feature where the user has set the post to be published the next day. In such a case, you might want to show “tomorrow”.

You can do just that using the Intl.RelativeTimeFormat object.

The Intl.RelativeTimeFormat object

Essentially, you can create a relative time formatter in your locale using the Intl.RelativeTimeFormat object which can be used to represent days in a natural language.

So, if you want to represent the previous day as “yesterday”, you can do it using Intl.RelativeTimeFormat like so.

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

relativeTimeFormatter.format(-1, "day");
// 'yesterday'

relativeTimeFormatter.format(1, "day");
// 'tomorrow'

As you can tell, you can create a relative time formatter using Intl.RelativeTimeFormat by passing in the locale as the first parameter and an option object as a second parameter.

Here, in this case, we passed in the numeric: auto option will produce the string yesterday or tomorrow. And finally, we can pass the number of days (negative in case if in past) to the Intl.RelativeTimeFormat.format() function as the first parameter and you can pass in a string as a second parameter which will be used when the first argument is not -1 or 1.

If the value is other than 1 and -1, it will intelligently return a related string like so.

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

relativeTimeFormatter.format(4, "day");
// 'in 4 days'

relativeTimeFormatter.format(-3, "day");
// '3 days ago'

Learn more about Intl.RelativeTimeFormat.

👋 Hi there! I'm Amit. I write articles about all things web development. If you like what I write and want me to continue doing the same, I would like you buy me some coffees. I'd highly appreciate that. Cheers!

Comments?