Last Updated: September 09, 2019
·
24.61K
· 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 ·

Have a fresh tip? Share with Coderwall community!

Post
Post a tip
Did you know?

JavaScript on a page runs with the privileges of that origin. One altered library, tag manager, or snippet can read inputs, change what people see, and call your APIs as the user.

Security insights from Cside