I have a situation where I want to stop the timeago setInterval. Currently it is impossible to do so as the interval ID is not returned by the function.

The interval ID can be returned by simply adding it to the self object that is returned by the timeago() function.

This line:

setInterval(function() { self.each(refresh); }, $s.refreshMillis);

would become:

self.intervalId = setInterval(function() { self.each(refresh); }, $s.refreshMillis);

I'm testing timeago in IE7 (via IE9 set to IE7 browser mode), and get an error popup (from inside jquery) when using a <time> element, and triggering timeago on it. Swiching from <time> to <span> fixes the problem.

It's a bit clumsy to say "a day ago" - shouldn't we be able to say "yesterday" or "yesterday at 4am" if the thing happened yesterday (but over 24h ago)? I think Facebook has a nice implementation.

However, this is not trivial to fix. We need:

• current time-of-day detection, and date boundary detection (26 hours ago might be "yesterday at 4am" or "2 days ago")
• time formatting (unless we skip the "at 4am" part"?)
• timezone support and DST awareness: if it's Sunday, 24.5 hours ago might be Sunday, Saturday or Friday!

Another option would be to skip "a day ago" and "%d days ago" with "Friday at 4am". Some of the bullets also apply in that case.

Hi,

I needed the possibility to add the timestamp to the timeago string to have something like "Yesterday 10:28" so I added the distanceMillis to the substitute function. Here is my diff. Maybe you could integrate it or give me the right to commit.

@@ -62,23 +62,23 @@
       var days = hours / 24;
       var years = days / 365;

-      function substitute(stringOrFunction, number) {
-        var string = $.isFunction(stringOrFunction) ? stringOrFunction(number) : stringOrFunction;
+      function substitute(stringOrFunction, value, millis) {
+        var string = $.isFunction(stringOrFunction) ? stringOrFunction(value, millis) : stringOrFunction;
         var value = ($l.numbers && $l.numbers[number]) || number;
         return string.replace(/%d/i, value);
       }

-      var words = seconds < 45 && substitute($l.seconds, Math.round(seconds)) ||
-        seconds < 90 && substitute($l.minute, 1) ||
-        minutes < 45 && substitute($l.minutes, Math.round(minutes)) ||
-        minutes < 90 && substitute($l.hour, 1) ||
-        hours < 24 && substitute($l.hours, Math.round(hours)) ||
-        hours < 48 && substitute($l.day, 1) ||
-        days < 30 && substitute($l.days, Math.floor(days)) ||
-        days < 60 && substitute($l.month, 1) ||
-        days < 365 && substitute($l.months, Math.floor(days / 30)) ||
-        years < 2 && substitute($l.year, 1) ||
-        substitute($l.years, Math.floor(years));
+      var words = seconds < 45 && substitute($l.seconds, Math.round(seconds), distanceMillis) ||
+        seconds < 90 && substitute($l.minute, 1, distanceMillis) ||
+        minutes < 45 && substitute($l.minutes, Math.round(minutes), distanceMillis) ||
+        minutes < 90 && substitute($l.hour, 1, distanceMillis) ||
+        hours < 24 && substitute($l.hours, Math.round(hours), distanceMillis) ||
+        hours < 48 && substitute($l.day, 1, distanceMillis) ||
+        days < 30 && substitute($l.days, Math.floor(days), distanceMillis) ||
+        days < 60 && substitute($l.month, 1, distanceMillis) ||
+        days < 365 && substitute($l.months, Math.floor(days / 30), distanceMillis) ||
+        years < 2 && substitute($l.year, 1, distanceMillis) ||
+        substitute($l.years, Math.floor(years), distanceMillis);

       return $.trim([prefix, words, suffix].join(" "));
     },

After that I could add strings in this way:

day: function(value, millis) { return writeYesterday(millis, "gestern, %s Uhr"); },

the function looks like:

function writeYesterday(ms, str) {
        var writeDate = new Date(new Date().getTime() - ms);

        var returnStr = str.replace(/%s/i, fillDate(writeDate.getHours()) + ':' +
                                           fillDate(writeDate.getMinutes()));
        return returnStr;
    }

due to a bug in jQuery or Sizzle, in IE <8, line 88 will not work correctly:

$(elem).is('time')

you can use IE's developer console to verify. this is due to the issue described by resig:
http://ejohn.org/blog/nodename-case-sensitivity/

i'm fixing this by replacing that bit of code with:

$(elem).get(0).tagName.toLowerCase() == 'time'

hope this helps while jQuery and Sizzle figure things out

It would be nice to provide the ability to specify a range over which dates are not converted.
For instance, having a range set with a value > 0, the script would convert only the timestamps where distanceMillis < range.

Here's how I implemented this feature.

// new range setting
$.extend($.timeago, {
  settings: {
    ...
    range: 1000 * 60 * 60 * 24 * 30, // 1 month
    ...
  },

// inRange check
function inRange(date) {
  return Math.abs(distance(date)) < $t.settings.range;
}

// don't convert unless inRange
function refresh() {
  var data = prepareData(this);
  if (!isNaN(data.datetime)) {
    if (inRange(data.datetime)) {
      $(this).text(inWords(data.datetime));
    } else {
      $(this).text($(this).attr("title"));
    }
  }
  return this;
}

Right now there is only support for English, and it's hardcoded. If would be useful to add support for more languages, and I wouldn't mind translating to Portuguese.

In windows xp (I am in california):

1. double click on your time
2. Click the time zone tab
3. Uncheck "Automatically adjust clock for daylight saving changes"
4. Keep the Timezone to GMT-8
5. Go to internet time tab
6. Uncheck "Automatically synchronize with an Internet time server"
7. Go to the Date & Time tab
8. Set your time to the correct current time
9. Now any incoming date such as "2011-04-11T23:33:00+0000" will appear as "an hour ago" instead of "less than a minute ago".

Any ideas on how to get around this?

Part of the benefit of jquery-timeago is that it turns something silly/complicated and long like:

Created 2008-02-22, Updated 2012-03-21

into the much shorter and cleaner:

Created 4 years ago, Updated about 3 hours ago

To me, the conciseness is a great benefit, but the "about" word seems to detract from that. Of course it wasn't updated -exactly- 3 hours ago. I know that, you know that, everyone reading should be relatively aware of that. As such, the "about" qualifier seems unnecessary to me, and decreases that conciseness, so it'd be nice to have a feature to turn it off.

Add an option so timeago prints the date difference - ignoring hours, seconds, days.

Also add options for printing 'days' as 'Today' if the difference in days is < 1; and where the difference in days is equal to one, print "Tomorrow" or "Today" (as the case may be).

I was looking PT-Br translations... and found it a little bit strange.

It always shows "há" in the front... it don't let you do something like "João tem um ano de vida", because it will be "João tem há um ano de vida" (in english: "João has one year of life", don't know how to translate the second example).

It would limit the library to show only times of posts, e.g.

I believe that would be great fix that. I could do that if you want.

Timeago works with 2012-08-18T16:10:29.543Z ...
but not with 2012-08-14T14:06:04.63Z..

the difference I see is when it only shows hundreds instead of thousands of a second.

This might not be timeago specific but Firefox specific.. but maybe others have the same issue... Im using Newtonsoft Json.Net in my solution to convert datetimes.

Newtonsoft.Json.Converters.IsoDateTimeConverter()

First - thanks for this great plugin.

It would be nice if the ISO date handling supported the style:

2010-W38-4

(though I'm about to rewrite my datasource to go with MM-DD, this might be helpful for someone down the road.)

Thanks!

I was skimming through bootstrap by @twitter the other day and while reading some of their jQuery/ender plugins I noticed that they were using a cool trick to activate some of their JavaScript based UI elements thanks to the new "data-*" attributes available in HTML5.

I think it would be a decent idea to use that instead of using the "abbr" tag you would have something like this:

<span data-timeago="2011-10-20 00:43:28"></span>

The cool thing is that you wouldn't be forced to use "abbr" and attach your timestamp to various elements. This is just an idea but I thought I would suggest it, I'll probably try to make the modifications myself but I thought I'd post the idea before if anyone has suggestions and all...

Hi,
I want to remove dotted underline coming under date which i am getting via timeago plugin. Is it possible?

Thanks.

If I have a a page with no time objects $("abbr.time").timeago() return an error and stop the execution of the rest of Javascript

If you have a document that changes a lot, where elements are added and removed on the fly, it would be nice to have a way to clean out timeago instances bound to removed dom elements, so their timers stop firing, etc.

This is more of a suggested enhancement than a bug really. I would like to be able to reset the timestamp. I'm using timeago to display the length of time until the user's session times out - when the user acts to extend the session I would like to extend the timestamp.

Here is my implementation:

    $.fn.timeago = function(timestamp, text) {
        var self = this;

        if (timestamp) {    // Reset the timestamp.
            self.removeData("timeago")
                .html(text && text.length > 0 ? text : "")
                .attr("title", timestamp);
        }

        self.each(refresh);

        var $s = $t.settings;
        if ($s.refreshMillis > 0) {
            setInterval(function() { self.each(refresh); }, $s.refreshMillis);
        }   // For now just keep spawning extra timers...

        return self;
    };

astute observers may notice that every time this method is used it spawns an extra timer. I couldn't think of a quick way to fix that issue and it's unlikely to cause problems in my particular situation.

Besides... Calling timeago multiple times on the same element has the same effect (I think).

Hi,

First of all, thank you for the plugin, it's very well written while being simple, powerful and very easy to use.

That said however, it seems to have absolutely no effect in any webkit based browsers.

IE, FF, Opera seem fine.

Chrome and Safari however do not.

Is this a known issue? Are there any workarounds? Or do I need to look for another solution or code something up myself?

Many thanks.

.

There's other ways to working around this, but I was wondering if it would be possible to use the javascript's getTimezoneOffset to use that the calculations are done in the User's timezone, in case the time that comes from the server is in a different timezone. I.e., Server's always outputting UTC, etc...

Hello and thanks for such a great plugin!

I just implemented your plugin in the footer of my dev site: http://dev.jacobdubail.com. It worked great for a few hours, but now display "NaN years ago" for 2 of the 3 items. Have you run into this before? Do you know what I broke?

Thanks for your help!
-J

Very simple functionality. For dates within threshold, display "just now" (or any other localized string) instead of "seconds ago".

This allows for more creative descriptions (like "just recently", "right now", "moments ago", etc.).

This might be implemented as a config option (i.e. justNowThreshold: 10000) and locale string justNow: "just now".

See another implementation that has this

It would be great to expose an API to reset timeago back to the page load state.
$.timeago('reset');

I'm currently using it for a "last saved x min ago" function that needs to be dynamically updated when the save button is clicked.

I'm using your script for displaying time ago for latest tweet.

It works like charm on all browsers except IE. It doesn't work on any version of IE. On IE, it is displayed NaN years ago.

Here is the URL, I'm waiting for your reply on how to fix this.

http://projects.xcellence-it.com/HotHouse/

Thanks in advance,
Xcellence-IT
http://www.xcellence-it.com/

e.g 2008-10-13T15:31:31.000Z or 2008-10-13T15:31:31.000-07:00

One way of handling this is to just strip out the millis:

s = s.replace(/\.\d\d\d/,"");   // Remove milliseconds

Currently it is hardcoded as browser current time, but it would be usefull to allow user specify that is current time (something like this http://gist.github.com/398904).

In my case it necessary because I have to display intervals like '2 seconds' ago and very often browser time is different from server time in couple of seconds. With this patch I can specify current time as server time and display correct intervals.

Currently, every time an element is passed into the $.fn.timeago() method that element is included in the setInterval, regardless of whether or not it has already been included in a previous interval.

We have found this problematic as we use a event to trigger binding of the timeago plugin, like so (within a Sammy.js app):
app.bind('widgetsRendered', function(e) {
$('.timestamp').timeago();
});

It would be ideal if only elements that were not already bound to timeago were included in the setInterval.

I'm wondering about the ability to change or add a CSS class to time/attr elements based on the timeago spread.

Basically we would have another string setting
recentAgoCss= "recentAgo"
recentAgoLessThan = "10000" //10 seconds

then, if the timeago spread is less than 10 seconds, the recentAgoCss will be added to the element.

We're working on allowing users to specify their timezone for our site. One area we use timeago for is to display when notes were added against a contact in a more friendly format. To do this, we render out the localised time in markup.

I'm working in a UTC- 03:00 timezone to make sure our site works as required, and IE/Firefox are working as I would have expected i.e. creating a note displays "about 10 seconds ago" when rendering it out and applying timeago.

Chrome is a different story! Creating a note shows the note as created "about 3 hours ago". I can only imagine that Chrome is working with dates in UTC time rather than the client machine's timezone.

Does this match anyone else's experience, and is there a fix for it?

Thanks very much,
Jon

I am using a string to populate the field "Thu Oct 06 2011 11:13:06". This goes into the parse: function(iso8601) function and when it is done it becomes: " hu Oct 06 2011 11:13:06 GMT/0400 (EDT)"

I believe the line s = s.replace(/T/," ").replace(/Z/," UTC"); is somehow getting rid of the T in Thu but cannot be sure :)

New content that contains abbr tags do not get the royal treatment when they are added to the page. Is there a better way than calling
$('abbr.timeago').timeago();
again after each ajax request?

Timeago doesn't seem to work correctly in Chromium (4.0.291.0 (35604)). It does something, because the title attribute gets changed, but the tag contents don't change.

Currently, times can't be properly localized for languages that do not use spaces, like Japanese. The best one can do right now is 大体 23 時間位 前, which looks messy and wrong.

It should be 大体２３時間位前.

Ideally it would output a full-width "２３" as well, but a roman "23" is acceptable, too.

Running into an issue where the following lines is preventing the "self" object from being deleted from memory upon removal of the element.

if ($s.refreshMillis > 0) {
    setInterval(function() { self.each(refresh); }, $s.refreshMillis);
}

I have a Firefox addon which does a periodic poll for new info. The info has a timestamp and so I am using $("abbr").timeago() to get the pretty dates to output. However, when new information comes in, I do have to call $("tr.info").remove(), which removes the row and the embedded "abbr" elements from the DOM. However, as the element still lives within timeago's setInterval, it ends up becoming a zombie object.

Hello,
Not sure if this is a bug or a feature ;) - I have a <time> tag that is updated using ajax but tag text is not getting unpdated using datetime attribute value.

Is there a way to reset plugin timer ? Or get inWords text to updated tag manually ?

I have change language with add param my strings object.

 var strings = {
        prefixAgo: lang("timeAgoprefixAgo"),
        prefixFromNow: null,
        suffixAgo: lang("timeAgosuffixAgo"),
        suffixFromNow: lang("from_now"),
        seconds: lang("less_than_a_minute"),
        minute: lang("about_a_minute"),
        minutes: lang("%d_minutes"),
        hour: lang("about_an_hour"),
        hours: lang("about_%d_hours"),
        day: lang("a_day"),
        days: lang("%d_days"),
        month: lang("about_a_month"),
        months: lang("%d_months"),
        year: lang("about_a_year"),
        years: lang("%d_years"),
        numbers: []
      }
$("abbr.timeago").timeago(value);

And i have modif this :

$.fn.timeago = function(langString) {

var self = this;
if(langString)
    $t.settings.strings = langString;

self.each(refresh);
var $s = $t.settings;
    if ($s.refreshMillis > 0) {
      setInterval(function() { self.each(refresh); }, $s.refreshMillis);
    }
return self;
};

Is there a way to limit the timestamp to 1 month. I am very new to jQuery and I would love to figure this out but I need help.

I noticed that this issue has been brought up before (see here), but I don't think a good justification was ever given, so I'd like to chime in with my own.

I'm writing a simple message/commenting system. Every time a user submits a comment, the comment is stored in the database along with the UTC time that it was posted. Then, when the comments are displayed, I output that time in the DOM, to be used by the timeago plugin.

The issue with this is the "current time" that the timeago plugin uses to compute the difference. It generates this current time by using javascript's new Date() function. This gives us the current time in the user's timezone. The problem with this is of course that the computed difference is only accurate if the user is in UTC time too.

So what I'd like to do is instead compute the difference using the current UTC time as the current time. As far as I can tell there's not a straightforward way to just get the current UTC time in javascript. Instead, we can use the getTimezoneOffset() function. I modified the distance function in the plugin as follows:

function distance(date) {
    var UTC_date_string = new Date().toUTCString(); // get current UTC Time in string form
    var millis_since_epoch = Date.parse(UTC_date_string); // convert it to milliseconds

    /* The date passed in comes to us in the client's timezone because it was created using the javascript
     * new Date() constructor when it was parsed form the DOM.  Unforunately, the date in the DOM is from
     * the server, and already in UTC.  We can account for this discrepancy by subtracting the client's 
     * timezone offset.
     */
    var date_millis = date.getTime(); // convert passed in date to milliseconds (still wrong timezone)
    var minutes_off = date.getTimezoneOffset(); // get the number of minutes this timezone differs from UTC time
    var millis_off = minutes_off*60*1000; // convert from minutes to milliseconds
    var date_millis_since_epoch = date_millis - millis_off; // subtract the discrepancy from the date milliseconds

    return (millis_since_epoch - date_millis_since_epoch); // finally, find the difference
}

Obviously the above is a very verbose implementation, but it communicates the essence of what I'm trying to do.

So, is there a simpler way to do what I described? And if not, any comments on adding this sort of functionality? I'd be happy to initiate a pull request.

Hi,
It looks like a wordSeparator setting string was added recently.

Unfortunately, all translations (https://gist.github.com/6251) have not been updated to have that string.

What happens if you use a translation without the "wordSeparator" string is that a dot is used instead, like this:

för.7.minuter.sedan

Equivalent to the english:

7.minutes.ago

Could it be changed to fall back on a space (" ") instead of a dot (".")?

The plugins provide a global configuration hash but it doesn't offer the ability to overwrite a specific setting at runtine like the most part of jQuery plugin do.

It would be nice to provide support for an options parameter.

jQuery(function($) {
  if ($.timeago) {
    $.timeago.settings.allowFuture = false;

    ...

    $('#expiring abbr.timeago').timeago({ allowFuture: true, range: 30 });
    $('#expired abbr.timeago').timeago({ allowFuture: false, range: 0 });
  }
});

• http://docs.jquery.com/Plugins/Authoring
• http://www.learningjquery.com/2007/10/a-plugin-development-pattern

Changing the settings text but in Arabic we use to say "2 minutes" different than "3 minutes" and so .. therefore I think we need new settings variables to set
if:
-2 minutes
-2 hours
-2 days
-less than or equal 10 minutes
-less than or equal 10 hours
-less than or equal 10 days

It would seem to make sense that a single "global" timer could be used on a page rather than an individual timer per element. The reference to the timer could be stored in the $.data() of the document element so that it can be referred to and cancelled. This timer could then be subscribed to by any elements that need updating or trigger 'timeago_update' that could bubble up from the document.

When using timeago() on this date:
Thu, 03 May 2012 04:25:15 +0000

I don't get the formatted time ago when using IE9. It works in Chrome. When debugging i can see that the parse method returns Invalid date since it wipes the uppercase T in the beginning

Maybe this is a user issue (aka, my fault) but I'm trying to convert a date "2012-05-10 13:02:00 GMT" by using jQuery.timeago(2012-05-10 13:02:00 GMT) and all I get is NaN years ago?

I'm using this date because it's what the Tumblr API spits out. The Tumblr API allows you use to use "timestamp" - The time of the post, in seconds since the epoch or "date" - The GMT date and time of the post, as a string.

How do I get this to work with the timeago plugin? Do I need to convert that GMT or timestamp before I use the timeago function? I'm lost and don't fully get what I'm doing wrong....

The timestamp format in a twitter status looks something like this: "Tue May 25 13:06:56 +0000 2010"

On Tuesdays and Thursdays, the .parse method, on the line

s = s.replace(/T/," ").replace(/Z/," UTC");

replaces the T of Tue with a space, giving " ue May 25 13:06:56 +0000 2010" whih fails to parse and results in a NaN.

I've done a dirty patch for my application, but I don't know the best way to fix it for timeago.

Relative time display "1 minute ago" doesn't make a lot of sense when printing a page. What about a feature that lets timeago generate a hidden tag containing an absolute date?