jQuery plugin: Prettydate

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.0.0
License: MIT/GPL

Files:

Download
Demo

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.

13 Comments
  1. 29. May 2009 |17:39

    Great plugin! We’re developing an activity stream feature for one of our projects and this will be really useful, thank you very much Jörn!

    Here is my locale ES (Spanish):


    $.prettyDate.messages = {
    now: "recién",
    minute: "hace 1 minuto",
    minutes: $.prettyDate.template("hace {0} minutos"),
    hour: "hace 1 hora",
    hours: $.prettyDate.template("hace {0} horas"),
    yesterday: "ayer",
    days: $.prettyDate.template("hace {0} días"),
    weeks: $.prettyDate.template("hace {0} semanas")
    };

  2. 23. July 2009 |16:49

    Great plugin! I really appreciate all your plugins. Thanks!

  3. 17. August 2009 |10:06

    nice idea!
    !0x for sharing :)

  4. 14. October 2009 |09:31

    Here is Latvian (lv or lv-LV)

    $.prettyDate.messages = {
    now: “tikko”,
    minute: “pirms minūtes”,
    minutes: $.prettyDate.template(“pirms {0} minūtēm”),
    hour: “pirms stundas”,
    hours: $.prettyDate.template(“pirms {0} stundām”),
    yesterday: “vakar”,
    days: $.prettyDate.template(“pirms {0} dienām”),
    weeks: $.prettyDate.template(“pirms {0} nedēļām”)
    };

  5. 31. October 2009 |16:44

    Code for french (fr-FR):

    $.prettyDate.messages = {
    now: “à l’instant”,
    minute: “il y a 1 minute”,
    minutes: $.prettyDate.template(” il y a {0} minutes”),
    hour: ” il y a 1 heure”,
    hours: $.prettyDate.template(“il y a {0} heures”),
    yesterday: “Hier”,
    days: $.prettyDate.template(“il y a {0} jours”),
    weeks: $.prettyDate.template(“il y a {0} semaines”)
    };

  6. Zitar Roden
    5. November 2009 |21:44

    Dutch code (nl-NL):

    $.prettyDate.messages = {
    now: “nu net”,
    minute: “een minuut geleden”,
    minutes: $.prettyDate.template(“{0} minuten geleden”),
    hour: “1 uur geleden”,
    hours: $.prettyDate.template(“{0} uur geleden”),
    yesterday: “gisteren”,
    days: $.prettyDate.template(“{0} dagen geleden”),
    weeks: $.prettyDate.template(“{0} weken geleden”)
    }

  7. Bai Naohui
    7. November 2009 |18:06

    Chinese translate:

    $.prettyDate.messages = {
    now: “刚刚”,
    minute: “1分钟前”,
    minutes: $.prettyDate.template(“{0}分钟前”),
    hour: “1小时前”,
    hours: $.prettyDate.template(“{0}小时前”),
    yesterday: “昨天”,
    days: $.prettyDate.template(“{0}天前”),
    weeks: $.prettyDate.template(“{0}星期前”)
    };

  8. Jesus Ramirez
    16. November 2009 |13:44

    When the user and server are in differents timezones the result differs in hours (my server is in USA and I’m in Spain)

    I’m trying to get an independent-server-timezone response. To do that I set the server timezone to UTC with php.ini and set the diff at jquery.prettydate.js in this way:

    var dn = new Date();
    diff = (($.prettyDate.now().getTime() – date.getTime() – dn.getTimeZoneOffset()*6000) / 1000),

    but the result is the date without formating. What is wrong?

    Thanks!.

  9. 14. January 2010 |14:50

    Really this is a great plugin!

    Continuing contribution, here is my locale pt-BR (Portugês Brasil):

    $.prettyDate.messages = {
    now: “agora”,
    minute: “há 1 minuto”,
    minutes: $.prettyDate.template(“há {0} minutos”),
    hour: “há 1 hora”,
    hours: $.prettyDate.template(“há {0} horas”),
    yesterday: “ontem”,
    days: $.prettyDate.template(“há {0} dias”),
    weeks: $.prettyDate.template(“há {0} semanas”)
    };

  10. Peter
    17. March 2010 |07:59

    Great stuff! The only thing that bugs me is the way it parses the date from “yyyy/mm/dd hh:nn:ss” format (same thing with John Resig’s code). Well – the ECMAScript/JavaScript documentation does not specify a string date format for parse(). MSDN/IE documentation says that the above format is OK (http://msdn.microsoft.com/en-us/library/k4w173wk(v=VS.85).aspx), but the Mozilla docs say it should be an RFC822 timestamp (https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/Date/parse).

  11. Anz
    18. March 2010 |06:34

    Excellent!!! really useful plugin.. In all our projects we show history log in the admin side.. this plugin is really useful in that..

    Thanks

  12. 19. March 2010 |04:34

    $.prettyDate.messages = {
    now: “ปัจจุบัน”,
    minute: “นาที”,
    minutes: $.prettyDate.template(“{0} นาทีที่แล้ว”),
    hour: “ชั่วโมง”,
    hours: $.prettyDate.template(“{0} ชั่วโมงที่แล้ว”),
    yesterday: “เมื่อวาน”,
    days: $.prettyDate.template(“{0} วันที่แล้ว”),
    weeks: $.prettyDate.template(“{0} สัปดาห์ที่แล้ว”)
    }

  13. 19. March 2010 |15:33

    Thanks ilumin, though, what language is that?

Write a comment

Note: Wrap all of your code blocks in <code>...</code> and replace < with &lt; and > with &gt;.