Intl.RelativeTimeFormatenables localized formatting of relative times without sacrificing performance.
We've all seen websites using Just now, an hour ago, a week ago etc. to describe when the post was created.
Almost all of these websites uses popular libraries like Moment.js, Globalize, date_fns and-all to use this feature.
Today we'd look at how we can do that with just Vanilla JavaScript!
A Quick Example
Just to show you how the Intl.RelativeTimeFormat constructor works
const when = new Intl.RelativeTimeFormat('en').format(-1, 'day');
console.log(when);
// "1 day ago"
Here we passed the Intl.RelativeTimeFormat an argument, a string with a BCP 47 language tag. This argument decides the output language.
Additionally, the Intl.RelativeTimeFormat constructor accepts an optional options argument, which gives us more control over the output. We'd talk about it later in this tutorial.
Then we told the Intl.RelativeTimeFormat constructor to format the relative time (the -1 value) in day unit.
Lets tweak this code a bit (copy this and check the code in your console)
const when = new Intl.RelativeTimeFormat('bn').format(-5, 'day');
console.log(when);
// "৫ দিন আগে" (translation: 5 days ago)
And of course we can set times in future as well
const when = new Intl.RelativeTimeFormat('en').format(2, 'day');
console.log(when);
// in 2 days
The options Object
The options object gives us more control over the output. It have three possible values:
- localeMatcher
- numeric
- style
Read about the options in details here
const options = {
numeric: 'auto',
}
const when = new Intl.RelativeTimeFormat('en', options).format(-1, 'day')
console.log(when);
// yesterday
Possible Values for Unit
You can pass in the following values in Intl.RelativeTimeFormat(locale).format(relative time, **UNIT**):
- second
- minute
- hour
- day
- month
- quarter
- year
Logically Show When Something Was Created
Suppose your post was created at some date
const createdAt = new Date(2020, 11, 10); // December 10, 2020
And I, the user visited your post right now
const userVisited = new Date();
If we subtract createdAt from userVisited we'll get a number in milliseconds
const diff = userVisited - createdAt;
// some value in milliseconds
Now we need to convert this diff in days
const toSec = (diff / 1000);
// convert the milliseconds to seconds
const toMin = (toSec / 60);
// convert the seconds to minutes
const toHour = toMin / 60;
// convert the minutes to hours
const toDays = toHour / 24;
// convert the hours to days
// now we'll round the days up/down
const rounded = Math.round(toDays);
And finally we'll pass the rounded value to Intl.RelativeTimeFormat constructors format method
const when = new Intl.RelativeTimeFormat('en').format(-rounded, 'day');
// because your post was created in past
// we pass a minus sign before the rounded
// to get the output in past tense
That's it for today, obviously you can make this code a lot more dynamic to show different types of unit based on when the post was created. Try that out on your own.
Top comments (0)