Get the relative timestamp difference between dates in JavaScript

28 Jan, 2020
Given the 2 JavaScript dates and the job is to get the relative time difference between them(eg.. 2 hours ago, 2.5 days ago, etc.) Here 2 approaches are discussed with the help of javaScript.
Approach 1:
Get the prevDate and currDate in a variable.
Calculate the milliseconds in Minute, Hour, Day, Month and in an Year.
Calculate the milliseconds difference between the prevDate and currDate.
Compare these milliseconds with the milliseconds in Minute, Hour, Day, Month and in an year in this order.
If the milliseconds are less than any of them, then calculate the respective Minutes, Hours, Days, Months and Years.
Example 1: This example implements the above approach.
<!DOCTYPE HTML><html>  <head>    <title>        Get the relative timestamp difference between dates in JavaScript.    </title>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">    </script></head>  <body style="text-align:center;">    <h1 style="color:green;">              GeeksForGeeks          </h1>    <p id="GFG_UP">    </p>    <button onclick="GFG_Fun();">        click here    </button>    <p id="GFG_DOWN">    </p>    <script>        var up = document.getElementById('GFG_UP');        var down = document.getElementById('GFG_DOWN');        var prevDate = new Date();        prevDate.setDate(prevDate.getDate() - 6);        up.innerHTML =            "Click on the button to get relative time difference between dates." +            "<br><br>Older Date : " + prevDate;          function timeDiff(curr, prev) {            var ms_Min = 60 * 1000; // milliseconds in Minute            var ms_Hour = ms_Min * 60; // milliseconds in Hour            var ms_Day = ms_Hour * 24; // milliseconds in day            var ms_Mon = ms_Day * 30; // milliseconds in Month            var ms_Yr = ms_Day * 365; // milliseconds in Year            var diff = curr - prev; //difference between dates.            // If the diff is less then milliseconds in a minute            if (diff < ms_Min) {                return Math.round(diff / 1000) + ' seconds ago';                  // If the diff is less then milliseconds in a Hour            } else if (diff < ms_Hour) {                return Math.round(diff / ms_Min) + ' minutes ago';                  // If the diff is less then milliseconds in a day            } else if (diff < ms_Day) {                return Math.round(diff / ms_Hour) + ' hours ago';                  // If the diff is less then milliseconds in a Month            } else if (diff < ms_Mon) {                return 'Around ' + Math.round(diff / ms_Day) + ' days ago';                  // If the diff is less then milliseconds in a year            } else if (diff < ms_Yr) {                return 'Around ' + Math.round(diff / ms_Mon) + ' months ago';            } else {                return 'Around ' + Math.round(diff / ms_Yr) + ' years ago';            }        }          function GFG_Fun() {            $('#GFG_DOWN').html(timeDiff(new Date(), prevDate));        }    </script></body>  </html>
Output:
Before clicking on the button:
After clicking on the button:
Approach 2:
Get the prevDate and currDate in a variable.
Calculate the seconds, Minutes, Hours and Days difference between the dates.
Compare these parameters with the 60 seconds, 60 Minutes, 24 Hours, Day in this order.
If any of those condition satisfies then return the respective parameter.
Example 2: This example implements the above approach.
<!DOCTYPE HTML><html>  <head>    <title>        Get the relative timestamp difference      between dates in JavaScript.    </title>    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">    </script></head>  <body style="text-align:center;">    <h1 style="color:green;">              GeeksForGeeks          </h1>    <p id="GFG_UP">    </p>    <button onclick="GFG_Fun();">        click here    </button>    <p id="GFG_DOWN">    </p>    <script>        var up = document.getElementById('GFG_UP');        var down = document.getElementById('GFG_DOWN');        var prevDate = new Date();        prevDate.setDate(prevDate.getDate() - 6);        prevDate.setHours(prevDate.getHours() - 6);        up.innerHTML =            "Click on the button to get relative time " +            "difference between dates.<br><br>Older Date : " + prevDate;          function conversion(ms) {              // Calculating Seconds            var sec = (ms / 1000).toFixed(1);              // Calculating Minutes            var min = (ms / (1000 * 60)).toFixed(1);              // Calculating hours             var hrs = (ms / (1000 * 60 * 60)).toFixed(1);              // Calculating days            var days = (ms / (1000 * 60 * 60 * 24)).toFixed(1);            if (sec < 60) {                return sec + " Sec";            } else if (min < 60) {                return min + " Min";            } else if (hrs < 24) {                return hrs + " Hrs";            } else {                return days + " Days"            }        }          function GFG_Fun() {            var date = new Date();$('#GFG_DOWN').html(conversion(date.getTime() - prevDate.getTime()));        }    </script></body>  </html>
Output:
Before clicking on the button:
After clicking on the button:
javascript-date
JavaScript-Misc
JavaScript
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array
Hide or show elements in HTML using display property
How to append HTML code to a div using JavaScript ?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
How to fetch data from an API in ReactJS ?