Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
This plugin MooTools provides a way to format JavaScript dates in the style of Twitter's timeline.
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
Docs
Source
demo
README.md
package.yml

README.md

PrettyDate

This plugin provides a way to format JavaScript dates in the style of Twitter's timeline: "just now", "about 8 minutes ago","about 11 hours ago","yesterday". The method is, originally, written by John Resig.

Screenshot

How to use

First you must to include the JS files in the head of your HTML document.

    #HTML
    <script src="http://www.google.com/jsapi?key=ABQIAAAA1XbMiDxx_BTCY2_FkPh06RRaGTYH6UMl8mADNa0YKuWNNa8VNxQEerTAUcfkyrr6OwBovxn7TDAH5Q"></script>
    <script type="text/javascript">google.load("mootools", "1.3");</script>
    <script type="text/javascript" src="prettydate.js"></script>

You need to specify the source of the ISO8601-date.

   #HTML
   <ul>
   <li>@<a href="#">john</a> just happened here <span><br/><i>posted</i> <a class="pretty" href="#" title="2011-05-14 20:35:28">Sun May 14 20:35:28 +0000 2011</a></span></li>
   <li>@<a href="#">code</a> just happened here <span><br/><i>posted</i> <a class="pretty" href="#" title="2011-05-14 19:15:28">Sun May 14 19:15:28 +0000 2011</a></span></li>
   <li>@<a href="#">php</a> just happened here <span><br/><i>posted</i> <a class="pretty" href="#" title="2011-05-14 10:54:28">Sun May 14  10:54:28 +0000 2011</a></span></li>
   <li>@<a href="#">mootools</a> just happened here <span><br/><i>posted</i> <a class="pretty" href="#" title="2011-05-14 21:40:28">Sun May 14 21:40:28 +0000 2011</a></span></li>
   <li>@<a href="#">jquery</a> just happened here <span><br/><i>posted</i> <a class="pretty" href="#" title="2011-05-13 12:54:28">Sun May 14 12:54:28 +0000 2011</a></span></li>
   <li>@<a href="#">yui</a> just happened here <span><br/><i>posted</i> <a class="pretty" href="#" title="2011-05-12 14:54:28">Sun May 14 19:54:28 +0000 2011</a></span></li>
   </ul>

Then you can apply the method.

   #JS
   window.addEvent('domready', function() {
          new PrettyDate($$("a.pretty"));
   });

   OR

   //apply `prettyDate` method to those;
   window.addEvent('domready', function() {
          $$("a.pretty").prettyDate(); 
   });       

To localize this plugin overwrite the options. ex: french localization:

   #JS 
   window.addEvent('domready', function() {
        var options = {
         now      : "a l'instant",
         minute   : "il y a 1 minute",
         minutes  : "il y a {x} minutes",
         hour     : "il y a 1 heure",
         hours    : "il y a {x} heures",
         yesterday: " hier",
         days     : " il y a {x} jours",
         weeks    : " il y a {x} semaines"             
        };
        $$('a.pretty').prettyDate(options); 
   });
Something went wrong with that request. Please try again.