Javascript TimeAgo Func. (e.g. 8 hours ago)
It is native Javascript function for automatically updating fuzzy timestamps (e.g. "8 minutes ago").
You can test it on http://jsfiddle.net/goker/3J9Dz/ or http://codepen.io/goker/pen/yBEGD
HTML
<abbr class="timeago" title="2011-12-17T09:24:17Z">2 years ago</abbr>
<abbr class="timeago" title="December 17, 2012">6 months ago</abbr>
<time class="timeago" datetime="2013-01-17T09:24:17Z">5 months ago</time>
<span class="timeago" title="1372218564">about 20 hours ago</span>
Javascript
(function timeAgo(selector) {
var templates = {
prefix: "",
suffix: " ago",
seconds: "less than a minute",
minute: "about a minute",
minutes: "%d minutes",
hour: "about an hour",
hours: "about %d hours",
day: "a day",
days: "%d days",
month: "about a month",
months: "%d months",
year: "about a year",
years: "%d years"
};
var template = function(t, n) {
return templates[t] && templates[t].replace(/%d/i, Math.abs(Math.round(n)));
};
var timer = function(time) {
if (!time)
return;
time = time.replace(/\.\d+/, ""); // remove milliseconds
time = time.replace(/-/, "/").replace(/-/, "/");
time = time.replace(/T/, " ").replace(/Z/, " UTC");
time = time.replace(/([\+\-]\d\d)\:?(\d\d)/, " $1$2"); // -04:00 -> -0400
time = new Date(time * 1000 || time);
var now = new Date();
var seconds = ((now.getTime() - time) * .001) >> 0;
var minutes = seconds / 60;
var hours = minutes / 60;
var days = hours / 24;
var years = days / 365;
return templates.prefix + (
seconds < 45 && template('seconds', seconds) ||
seconds < 90 && template('minute', 1) ||
minutes < 45 && template('minutes', minutes) ||
minutes < 90 && template('hour', 1) ||
hours < 24 && template('hours', hours) ||
hours < 42 && template('day', 1) ||
days < 30 && template('days', days) ||
days < 45 && template('month', 1) ||
days < 365 && template('months', days / 30) ||
years < 1.5 && template('year', 1) ||
template('years', years)
) + templates.suffix;
};
var elements = document.getElementsByClassName('timeago');
for (var i in elements) {
var $this = elements[i];
if (typeof $this === 'object') {
$this.innerHTML = timer($this.getAttribute('title') || $this.getAttribute('datetime'));
}
}
// update time every minute
setTimeout(timeAgo, 60000);
})();
You can use jQuery timeAgo plugin for this also.But It can not handle Unix Timestamp.
Written by goker cebeci
Related protips
10 Responses
Love that it doesn't have library dependencies. Nice.
thanks.
Really nice work. Would you mind elaborating on why you check for 'seconds < 45' as opposed to 60?
Seems to be broken in FF 21...
@csbarker thanks for reporting. I have FF 22. It works when I replaced with .innerHTML to .innerText.
@chip, You can change time values. I copied the values from jQuery timeAgo.
Good one
Nice! Also moment.js is fantastic for date manipulation :)
please send me full script at lightsomali@gmail.com
I have been trying multiple solutions and couldn't get the exact answer. Finally I got simplest and easiest solution. Hope this helps others too.
http://www.samantsingh.com/blogs/post/how-to-format-time-since-xxx-e-g-2-minutes-ago-/