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;"> neveropen </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;"> neveropen </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> |
Output:
