Get the relative timestamp difference between dates in JavaScript

0 0 3 minutes read

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 using Date() object .
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.

html

<body> 
    <h1 style="color:green;"> 
        zambiatek 
    </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() { 
            var diff = timeDiff(new Date(), prevDate) 
            document.getElementById("GFG_DOWN").innerHTML = diff; 
        } 
    </script> 
</body>

Output:

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.

html

<body> 
    <h1 style="color:green;"> 
        zambiatek 
    </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(); 
            var diff = conversion(date.getTime() - prevDate.getTime()) 
            document.getElementById("GFG_DOWN").innerHTML = diff; 
        } 
    </script> 
</body>