Get the relative timestamp difference between dates in JavaScript

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.



filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        Get the relative timestamp difference between dates in JavaScript.
    </title>
    <script src=
    </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>

chevron_right


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.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE HTML>
<html>
  
<head>
    <title>
        Get the relative timestamp difference
      between dates in JavaScript.
    </title>
    <script src=
    </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>

chevron_right


Output:

  • Before clicking on the button:
  • After clicking on the button:



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.