A year does not always have 365 days. Compared to the web site you refer to, there is also another difference:
Usually when people speak of "today it is exactly 1 month ago", they mean it was on the same month-date. So 14 March comes exactly 1 month after 14 February, and 14 April comes exactly 1 month after 14 March. This means the length of what a "month" is, depends on what your reference point is. In the example, the first difference is 28 days (in non-leap years), while the second is 31 days.
A solution that comes close to the results you get on the web site, can be achieved with this code:
function dateDiff(a, b) {
// Some utility functions:
const getSecs = dt => (dt.getHours() * 24 + dt.getMinutes()) * 60 + dt.getSeconds();
const getMonths = dt => dt.getFullYear() * 12 + dt.getMonth();
// 0. Convert to new date objects to avoid side effects
a = new Date(a);
b = new Date(b);
if (a > b) [a, b] = [b, a]; // Swap into order
// 1. Get difference in number of seconds during the day:
let diff = getSecs(b) - getSecs(a);
if (diff < 0) {
b.setDate(b.getDate()-1); // go back one day
diff += 24*60*60; // compensate with the equivalent of one day
}
// 2. Get difference in number of days of the month
let days = b.getDate() - a.getDate();
if (days < 0) {
b.setDate(0); // go back to (last day of) previous month
days += b.getDate(); // compensate with the equivalent of one month
}
// 3. Get difference in number of months
const months = getMonths(b) - getMonths(a);
return {
years: Math.floor(months/12),
months: months % 12,
days,
hours: Math.floor(diff/3600),
minutes: Math.floor(diff/60) % 24,
seconds: diff % 60
};
}
// Date to start on
var startDate = new Date("Jun 5, 2011 00:00:00");
// Update the count every 1 second
setInterval(function() {
const diff = dateDiff(startDate, new Date);
const str = Object.entries(diff).map(([name, value]) =>
value > 1 ? value + " " + name : value ? value + " " + name.slice(0, name.length-1) : ""
).filter(Boolean).join(", ") || "0 seconds";
document.getElementById("demo").textContent = str;
}, 1000);
<div id="demo"></div>
Some thoughts
This variable notion of month may lead to unexpected results when instead of the end date, you increase the start date one day at a time: the distance between Feb 28, 2019 and April 1, 2019 is reported as 1 month, 4 days. But when you add 1 day to the first date, the difference is reported as 1 month exactly. Where did those 3 days go? ,-)
So this solution (and the one on the referenced web site) works well when varying the end date. For situations where you would want to vary the start date with "logical" steps in the output, you would need a slightly different algorithm. But then you'll get such "jumps" when varying the end date.
For instance: 28 Feb 2019 - 1 April 2019. Is the difference 1 month + 1 day or 1 month + 4 days? If you think you have the answer, move one of those dates one day closer to the other... there is just no way to have a consistent output that also jumps with 1 day each time one of either dates is moved with 1 day.