Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Get the relative timestamp difference between dates in JavaScript
Have you ever seen notifications on any website showing the time stamp? It shows something like "12 minutes ago", "2 days ago", "10 hours ago", etc. It is related to the timestamp difference between two dates or times.
Also, some apps show that this device's last login was 22 hours ago. So, there are many uses to get the timestamp difference between two dates.
In this tutorial, we will learn different approaches to get the relative timestamp difference between two dates.
Using getTime() Method with Custom Algorithm
In JavaScript, we can create a date object using the new Date() constructor. Also, we can pass a particular date as a parameter of the Date() constructor to initialize the date object with that date value.
The getTime() method returns the total milliseconds from 1st January 1970 to the current date. So, we can find the total milliseconds for both dates and subtract them to get the difference in milliseconds. Using that millisecond difference, we can find the timestamp difference in seconds, minutes, hours, days, etc.
Syntax
let second_diff = (current_date.getTime() - previous_date.getTime()) / 1000;
In the above syntax, current_date and previous_date are two different dates. We used the getTime() method to get the difference of milliseconds between the two dates.
Note: By comparing the value of the second_diff variable with predefined time units, you can get a relative timestamp difference.
Example
In the example below, we have created two different date objects using the Date constructor and implemented a custom algorithm to find the relative timestamp between two dates.
<html>
<body>
<h3>Getting the relative timestamp difference between two dates using <i>custom algorithm</i></h3>
<p id="output"></p>
<script>
let output = document.getElementById("output");
// creating the current date
let current_date = new Date();
// previous date
let previous_date = new Date("jan 14, 2022 12:21:45");
// finding the difference in total seconds between two dates
let second_diff = (current_date.getTime() - previous_date.getTime()) / 1000;
output.innerHTML += "The first date is " + current_date + "<br>";
output.innerHTML += "The second date is " + previous_date + "<br>";
// showing the relative timestamp
if (second_diff < 60) {
output.innerHTML += "Difference is " + Math.floor(second_diff) + " seconds ago";
} else if (second_diff < 3600) {
output.innerHTML += "Difference is " + Math.floor(second_diff / 60) + " minutes ago";
} else if (second_diff < 86400) {
output.innerHTML += "Difference is " + Math.floor(second_diff / 3600) + " hours ago";
} else if (second_diff < 2620800) {
output.innerHTML += "Difference is " + Math.floor(second_diff / 86400) + " days ago";
} else if (second_diff < 31449600) {
output.innerHTML += "Difference is " + Math.floor(second_diff / 2620800) + " months ago";
} else {
output.innerHTML += "Difference is " + Math.floor(second_diff / 31449600) + " years ago";
}
</script>
</body>
</html>
The first date is Mon Dec 16 2024 10:30:00 GMT+0000 (UTC) The second date is Fri Jan 14 2022 12:21:45 GMT+0000 (UTC) Difference is 35 months ago
Using Intl.RelativeTimeFormat() API
The Intl.RelativeTimeFormat() API provides a more elegant and localized way to format relative time differences. This modern approach automatically handles pluralization and supports multiple languages.
Syntax
const relativeTimeFormatter = new Intl.RelativeTimeFormat("en", {
numeric: "auto"
});
// Use formatter.format(value, unit) to get formatted result
Example
In the example below, we use the Intl.RelativeTimeFormat() method to get the relative timestamp difference between two dates with proper formatting.
<html>
<body>
<h3>Getting the relative timestamp difference using <i>Intl.RelativeTimeFormat()</i> method</h3>
<p id="output"></p>
<script>
let output = document.getElementById("output");
let current_date = new Date();
let previous_date = new Date("jan 14, 2022 12:21:45");
// finding the difference in milliseconds between two dates
let millisecond_diff = current_date.getTime() - previous_date.getTime();
output.innerHTML += "The first date is " + current_date + "<br>";
output.innerHTML += "The second date is " + previous_date + "<br>";
// Define time units in milliseconds
const time_units = {
year: 31536000000,
month: 2629746000,
day: 86400000,
hour: 3600000,
minute: 60000,
second: 1000,
};
const relativeTimeFormatter = new Intl.RelativeTimeFormat("en", {
numeric: "auto",
});
// iterate through all time units
for (const unit in time_units) {
if (Math.abs(millisecond_diff) >= time_units[unit] || unit === "second") {
const value = Math.round(millisecond_diff / time_units[unit]);
output.innerHTML += "The difference between two dates is " +
relativeTimeFormatter.format(-Math.abs(value), unit);
break;
}
}
</script>
</body>
</html>
The first date is Mon Dec 16 2024 10:30:00 GMT+0000 (UTC) The second date is Fri Jan 14 2022 12:21:45 GMT+0000 (UTC) The difference between two dates is 35 months ago
Comparison of Methods
| Method | Browser Support | Localization | Code Complexity |
|---|---|---|---|
| Custom Algorithm | All browsers | Manual | Higher |
| Intl.RelativeTimeFormat() | Modern browsers | Built-in | Lower |
Conclusion
Both methods effectively calculate relative timestamps between dates. Use the custom algorithm for broader browser support, or choose Intl.RelativeTimeFormat() for modern applications requiring localization and cleaner code.
6K+ Views
