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


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")
};
Great plugin! I really appreciate all your plugins. Thanks!
nice idea!
!0x for sharing
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”)
};
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”)
};
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”)
}
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}星期前”)
};
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!.
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”)
};
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).
Excellent!!! really useful plugin.. In all our projects we show history log in the admin side.. this plugin is really useful in that..
Thanks
$.prettyDate.messages = {
now: “ปัจจุบัน”,
minute: “นาที”,
minutes: $.prettyDate.template(“{0} นาทีที่แล้ว”),
hour: “ชั่วโมง”,
hours: $.prettyDate.template(“{0} ชั่วโมงที่แล้ว”),
yesterday: “เมื่อวาน”,
days: $.prettyDate.template(“{0} วันที่แล้ว”),
weeks: $.prettyDate.template(“{0} สัปดาห์ที่แล้ว”)
}
Thanks ilumin, though, what language is that?