Last Updated: September 09, 2019
·
23.86K
· goker

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.

10 Responses
Add your response

Love that it doesn't have library dependencies. Nice.

over 1 year ago ·

thanks.

over 1 year ago ·

Really nice work. Would you mind elaborating on why you check for 'seconds < 45' as opposed to 60?

over 1 year ago ·

Seems to be broken in FF 21...

over 1 year ago ·

@csbarker thanks for reporting. I have FF 22. It works when I replaced with .innerHTML to .innerText.

over 1 year ago ·

@chip, You can change time values. I copied the values from jQuery timeAgo.

over 1 year ago ·

Good one

over 1 year ago ·

Nice! Also moment.js is fantastic for date manipulation :)

over 1 year ago ·

please send me full script at lightsomali@gmail.com

over 1 year ago ·

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-/

over 1 year ago ·