jQuery plugin: Prettydate

 

This plugin is no longer supported. Use the “Time from now” feature in Moment.js instead

 

 

This plugin, originally written by John Resig, provides clientside date formatting in the style of Twitter’s timeline: “just now”, “5 minutes ago”, “yesterday”, “2 weeks ago”. This release extends John’s original release, providing support for internationalization and improving the API a bit: You can specify the source of the ISO-date, while not having to manually set up an interval to update the date formatting over time.

To use the plugin, you need a few links with an ISO8601 date in their title:

<a title="2008-01-28T20:24:17Z">January 28th, 2008</a> <a title="2008-01-27T22:24:17Z">January 27th, 2008</a> <a title="2008-01-26T22:24:17Z">January 26th, 2008</a>

Then just apply the prettyDate method to those:

$(function() { $("a").prettyDate(); });

The result would look like this:


The demo uses a fixed date, as the plugin doesn’t format dates that are older then a month. Instead of the too vague “6 months ago” it just keeps the original date string.

To localize the plugin, overwrite the properties in $.prettyDate.messages. Here as an exemplary german localization:

$.prettyDate.messages = { now: "gerade eben", minute: "vor einer Minute", minutes: $.prettyDate.template("vor {0} Minuten"), hour: "vor einer Stunde", hours: $.prettyDate.template("vor {0} Stunden"), yesterday: "Gestern", days: $.prettyDate.template("vor {0} Tagen"), weeks: $.prettyDate.template("vor {0} Wochen") }

If you write other localizations, share them, and I’ll include them in a next release.

The plugin starts an interval to update each selected element every 10 seconds. That way a “just now” progresses to “1 minute ago” to “x minutes ago” to “1 hour ago” and so on.

You can disable that interval by specifying the interval-option as “false”:

$(function() { $("a").prettyDate({ interval: false }); });

Or set a different interval, eg. interval: 1000 to update each elements once per second:

$(function() { $("a").prettyDate({ interval: 1000 }); });

The value-option by default reads the title-attribute for the ISO8601 date string. Override that option to use something else, eg. a custom “isodate”-attribute:

$(function() { $("a").prettyDate({ function() { // "this" is the DOM element return $(this).attr("isodate"); } }); });

In the comments of the original plugins, a few improvements were proposed, which I didn’t found convincing enough to incorporate. Let me know if you’ve seen an implementation that is worth looking at.

Current version: 1.1.0
License: MIT/GPL

Files:

Download
Demo
GitHub Repository

Dependencies

Required

Support

  • Please post questions to the official Using jQuery Plugins Forum, tagging your question with (at least) “prettydate”. Keep your question short and succinct and provide code when possible; a testpage makes it much more likely that you get an useful answer in no time.
  • Please post bug reports and other contributions (enhancements, new translations) to the GitHub issue tracker