Human-readable date difference in JavaScript
In this article, we will learn how to get the human-readable date difference in JavaScript. We will see how to get the difference between two dates in years, months, days, hours, minutes, and seconds.
So, you might have come across a situation where you need to show the difference between two dates in a human-readable format. For example, you might have a blog post and you want to show the date when the post was published.
In such scenarios, you might want to show the difference between the current date and the date when the post was published. For example, you might want to show something like “2 days ago” or “1 month ago” or “2 years ago” depending on the difference between the current date and the date when the post was published.
In JavaScript, this can be achieved using the Intl.RelativeTimeFormat() API. So, let’s see how we can use this API to get the human-readable date difference in JavaScript.
Date difference in human-readable format
The Intl.RelativeTimeFormat() API in JavaScript can be used to get the human-readable date difference. Here’s a simple example of how you can use this API.
const olderDate = new Date('2022-10-31');
const currentDate = new Date('2022-11-01');
const diff = olderDate - currentDate;
const formatter = new Intl.RelativeTimeFormat('en', { numeric: 'auto' });
console.log(formatter.format(Math.round(diff / 86400000), 'day'));
// yesterday
As you can tell, we are creating two Date objects, one for the older date and another for the current date. This will return the difference between the two dates in milliseconds.
Next, we are creating an instance of the Intl.RelativeTimeFormat object and pass in the en locale and { numeric: 'auto' } options. Then, we are calling the format() method of the Intl.RelativeTimeFormat object and passing the difference in days (must be a valid numeric value) and the unit as day. And so, we are getting the human-readable date difference in JavaScript.
Here, the result will be yesterday because the difference between the two dates is negative (-1) and we are using the numeric auto option. If we use the numeric always option, we will get the result as 1 day ago instead of yesterday.
const formatter = new Intl.RelativeTimeFormat('en', {
numeric: 'always'
});
console.log(formatter.format(Math.round(diff / 86400000), 'day'));
// 1 day ago
For the positive difference of dates, we will get the result as tomorrow instead of 1 day ago.
const futureDate = new Date('2022-11-02');
const currentDate = new Date('2022-11-01');
const diff = futureDate - currentDate;
const formatter = new Intl.RelativeTimeFormat('en', {
numeric: 'auto'
});
console.log(formatter.format(Math.round(diff / 86400000), 'day'));
// tomorrow
We can specify some other options like style and localeMatcher as well.
const formatter = new Intl.RelativeTimeFormat('en', {
numeric: 'auto',
style: 'long',
localeMatcher: 'best fit'
});
console.log(formatter.format(Math.round(diff / 86400000), 'day'));
// tomorrow
Which units are supported?
The Intl.RelativeTimeFormat API supports the following units.
secondminutehourdayweekmonthquarteryear
You would need to calculate the numeric value passed into the format() function based on which unit of time you have chosen.
Browser support
The Intl.RelativeTimeFormat API is supported in all modern browsers. So, browser compatibility is not an issue.
In closing
In this article, we learned how to get the human-readable date difference in JavaScript using the Intl.RelativeTimeFormat() API. We also saw how to get the difference between two dates in years, months, days, hours, minutes, and seconds.
If you have any questions, feel free to ask them in the comments below.
Like this article?
Buy me a coffee
👋 Hi there! I'm Amit. I write articles about all things web development. You can become a sponsor on my blog to help me continue my writing journey and get your brand in front of thousands of eyes.
