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.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

27 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")
    };

    [Reply]

  2. 23. July 2009 |16:49

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

    [Reply]

  3. 17. August 2009 |10:06

    nice idea!
    !0x for sharing :)

    [Reply]

  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”)
    };

    [Reply]

  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”)
    };

    [Reply]

  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”)
    }

    [Reply]

  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}星期前”)
    };

    [Reply]

  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!.

    [Reply]

  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”)
    };

    [Reply]

  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).

    [Reply]

  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

    [Reply]

  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} สัปดาห์ที่แล้ว")
    }

    [Reply]

  13. 19. March 2010 |15:33

    Thanks ilumin, though, what language is that?

    [Reply]

  14. 24. March 2010 |18:55

    @It’s Thai I guess..

    Here is Turkish (tr-TR):

    $.prettyDate.messages = {
    	now: "Az önce",
    	minute: "1 dakika önce",
    	minutes: $.prettyDate.template("{0} dakika önce"),
    	hour: "1 saat önce",
    	hours: $.prettyDate.template("{0} saat önce"),
    	yesterday: "Dün",
    	days: $.prettyDate.template("{0} gün önce"),
    	weeks: $.prettyDate.template("{0} hafta önce")
    };

    [Reply]

  15. abs
    31. March 2010 |08:57

    pl-PL:

    
    $.prettyDate.messages = {
    	now: "przed chwilą",
    	minute: "minutę temu",
    	minutes: $.prettyDate.template("{0} minut temu"),
    	hour: "godzinę temu",
    	hours: $.prettyDate.template("{0} godzin temu"),
    	yesterday: "wczoraj",
    	days: $.prettyDate.template("{0} dni temu"),
    	weeks: $.prettyDate.template("{0} tygodni temu")
    }
    

    [Reply]

  16. dikey
    1. April 2010 |09:04

    thanks for all your plugins, jorn.

    here is Indonesia language:

    $.prettyDate.messages = {
    	now: "sekarang",
    	minute: "1 menit lalu",
    	minutes: $.prettyDate.template("{0} Menit lalu"),
    	hour: "1 jam lalu",
    	hours: $.prettyDate.template("{0} Jam lalu"),
    	yesterday: "Kemarin",
    	days: $.prettyDate.template("{0} Hari lalu"),
    	weeks: $.prettyDate.template("{0} Minggu lalu")
    }

    nice for you to know my language.. :)

    [Reply]

  17. 13. August 2011 |00:24

    Hi,

    JÖRN, thanks for your work on this! Great and handy plug-in.

    I updated JÖRN’s 1.0.0 code to fix the issue that Jesus mentioned above (i.e., when your server date is in a different time zone than the user/client). For this I added a new, optional ‘now’ option that you can pass in that should hold the now time from the server.

    I have the updated code here:
    http://www.tehfaces.com/js/lib/prettydate/jquery.prettyDate.js

    Run a diff on this versus JÖRN’s 1.0.0 code to see what I changed.

    I also adjusted the code to output fuzzy dates up to 12 months.

    Eric

    Ps. here a live example that shows example usage of the ‘now’ parameter. View source and look for ‘prettyDate(‘

    http://www.tehfaces.com/profile.teh?f=26

    [Reply]

  18. 13. August 2011 |21:31

    I should have made this more clear — the new, optional ‘now’ option must be populated by you. It’ll default to the client user’s computer time if you don’t pass it. Also, ‘now’ needs to be in ISO8601 date format.

    Hope that makes sense. See the live example in my last post to see the usage in action.

    Eric

    [Reply]

  19. 29. October 2011 |01:32

    Wonderful plugin, thank you

    Here is Swedish translation (sv-SE):

    $.prettyDate.messages = {
    now: “just nu”,
    minute: “en minut sedan”,
    minutes: $.prettyDate.template(“{0} minuter sedan”),
    hour: “en timme sedan”,
    hours: $.prettyDate.template(“{0} timmar sedan”),
    yesterday: “igår”,
    days: $.prettyDate.template(“{0} dagar sedan”),
    weeks: $.prettyDate.template(“{0} veckor sedan”)
    }

    [Reply]

  20. Alex
    4. January 2012 |19:48

    Hi, great job with the plugin but even if it sounds stupid I just can’t get to understand how it works / how to implement it.

    I have setup attribute to date to fit my code

    ...
    interval: 10000,
    attribute: "date",
    isUTC: false
    ...

    and then I try to make it work like this

    Html:
    or
    none of these work
    Js:
    $('.age').prettyDate();

    What could I be doing wrong? Does it auto print the result somewhere?

    Also here is a translation for romanian (ro-RO):

    $.prettyDate.messages = {
    now: "recent",
    minute: "acum 1 minut",
    minutes: $.prettyDate.template("acum {0} minute"),
    hour: "acum 1 oră",
    hours: $.prettyDate.template("acum {0} ore"),
    yesterday: "ieri",
    days: $.prettyDate.template("acum {0} zile"),
    weeks: $.prettyDate.template("acum {0} saptămâni")
    };

    [Reply]

  21. michele franzin
    28. January 2012 |11:53

    Thanks! U made my day.

    italian localization


    $.prettyDate.messages = {
    now: "adesso",
    minute: "1 minuto fa",
    minutes: $.prettyDate.template("{0} minuti fa"),
    hour: "1 ora fa",
    hours: $.prettyDate.template("{0} ore fa"),
    yesterday: "Ieri",
    days: $.prettyDate.template("{0} giorni fa"),
    weeks: $.prettyDate.template("{0} settimane fa")
    };

    [Reply]

  22. Adrian
    4. April 2012 |18:55

    Hi. At first: thanks for your plugins. Amazing work!
    But, today I get surprised because I’m spending a lot of time trying to make a relativa Date working (this prettyDate plugin).
    I’ve found that it does not work when the year changes??? Could that be possible?
    As I can see in the languages templates, it does not have any “Year” template. I’ve added it but still does not work.

    Any suggestions?
    NOTE: works ok with dates within the same year.

    [Reply]

  23. Juan A. López
    12. November 2012 |10:02

    es-ES

    $.prettyDate.messages = {
    now: “ahora”,
    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”)
    };

    [Reply]

    Jörn Reply:

    There already is a spanish translation: https://github.com/jzaefferer/jquery-prettydate/blob/master/i18n/jquery.prettydate-es.js

    If that is not correct, can you send a pull request agains that?

    [Reply]

  24. rikatee
    18. November 2012 |14:00

    How can we do future dates, e.g., it turns tomorow’s date into “tomorrow”?

    [Reply]

  25. 24. December 2012 |18:47

    Czech translation (cs-CZ):

    $.prettyDate.messages = {
    now: “před chvílí”,
    minute: “před minutou”,
    minutes: $.prettyDate.template(“před {0} minutami”),
    hour: “před hodinou”,
    hours: $.prettyDate.template(“před {0} hodinami”),
    yesterday: “včera”,
    days: $.prettyDate.template(“před {0} dny”),
    weeks: $.prettyDate.template(“před {0} týdny”)
    };

    [Reply]

  26. 10. January 2013 |11:50
Write a comment

Note: Your comment is being moderated.

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