Skip to content

This plugin MooTools provides a way to format JavaScript dates in the style of Twitter's timeline.

Notifications You must be signed in to change notification settings

thinkphp/prettydate

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

8 Commits
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

About

This plugin MooTools provides a way to format JavaScript dates in the style of Twitter's timeline.

Resources

Stars

Watchers

Forks

Packages