jquery-timesince is a jQuery plugin that works like Django's timesince filter. It will display a fuzzy date/time that shows how long it has been since a given date/time. For example, "16 minutes ago" or "3 years, 2 months ago".
As the page remains open, each of the timestamps will update periodically (defaults to every minute), so that the user always has a good idea as to how long it has been since... whatever.
This plugin was partly based on the excellent timeago plugin. It was rewritten in order to match the behavior and output of Django's timesince filter.
jquery-timesince is written and maintained by Christian Hammond, and is available under the MIT license.
To begin, you'll first need to include jQuery and jquery-timesince:
<script src="jquery.min.js" type="text/javascript"></script> <script src="jquery.timesince.js" type="text/javascript"></script>
You can then drop some elements on the page with ISO 8601-formatted timestamps:
<time class="timesince" datetime="2012-06-28T02:47:40Z">June 28, 2012</time> <span class="timesince" title="2012-06-28T02:47:40Z">June 28, 2012</time>
The new HTML5 <time> element takes a datetime parameter containing
the timestamp. Other elements are expected to have title set to the
timestamp.
You can then set these up with jquery-timesince:
$(document).ready(function() {
$("time.timesince").timesince();
$("span.timesince").timesince();
});
The elements will auto-update every minute. If you'd like to change how often they update, you can change it with:
$("time.timesince").timesince({
refreshMs: 5 * 60 * 1000 // 5 minutes
});
If you want to get fancy, you can change the suffixes (the "ago" part), add
some prefixes, or change the text for the "year," "month," etc. by
setting some values in $.timesince.strings. See the list of strings in
jquery.timesince.js for more details.