Timeago is a jQuery plugin that makes it easy to support automatically updating fuzzy timestamps (e.g. "4 minutes ago" or "about 1 day ago") from ISO 8601 formatted dates and times embedded in your HTML (à la microformats).
First, load jQuery and the plugin:
<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.timeago.js" type="text/javascript"></script>Now, let's attach it to your timestamps on DOM ready - put this in the head section:
<script type="text/javascript">
jQuery(document).ready(function() {
$("abbr.timeago").timeago();
});
</script>This will turn all abbr elements with a class of timeago and an ISO 8601 timestamp in the title (conforming to the datetime design pattern microformat):
<abbr class="timeago" title="2011-12-17T09:24:17Z">December 17, 2011</abbr>into something like this:
<abbr class="timeago" title="December 17, 2011">about 1 day ago</abbr>HTML5 <time> elements are also supported:
<time class="timeago" datetime="2011-12-17T09:24:17Z">December 17, 2011</time>As time passes, the timestamps will automatically update.
You can override the default labels, change the original ranges, or replace the original ranges altogether. You may also display either the difference in time or the original date.
<script type="text/javascript">
// Change a few labels
jQuery.timeago.ranges.day.string = "%m %d";
jQuery.timeago.ranges.days.string = "%m %d";
jQuery.timeago.ranges.month.string = "%m %d";
jQuery.timeago.ranges.months.string = "%m %d";
// Replace all of the default ranges.
jQuery.timeago.ranges = {
seconds: {
limit: 59*$.timeago.units.sec, // Within 59 seconds
string: "moments %sfx" // Moments ago
},
minute: {
limit: 119*$.timeago.units.sec, // Within 119 seconds
string: "1 minute %sfx" // 1 minute ago
},
minutes: {
limit: 59*$.timeago.units.min, // Within 59 minutes
string: "%NM minutes %sfx" // N minutes ago
},
hour: {
limit: 119*$.timeago.units.min, // Within 119 minutes
string: "1 hour %sfx" // 1 hour ago
},
hours: {
limit: 23*$.timeago.units.hour, // Within 23 hours
string: "%NH hours %sfx" // N hours ago
},
year: {
limit: 1*$.timeago.units.year, // Within 1 year
string: "%m-%d" // 02-12
},
years: {
limit: 9999*$.timeago.units.year, // Within 9999 years
string: "%b %d %Y" // Feb 12 2012
}
};
</script>For more usage and examples: http://timeago.yarp.com/
For different language configurations: visit the locales directory.
Copyright (c) 2008-2012, Ryan McGeary (ryan -[at]- mcgeary [dot] org)