Tuesday, January 29th, 2008

Do you have a pretty date?

Category: JavaScript, jQuery, Library

<>p>John Resig has created a little script to give you pretty dates that Web 2.0 know and love (thanks Rails):

javascript
< view plain text >
  1. prettyDate("2008-01-28T20:24:17Z") // => "2 hours ago"
  2. prettyDate("2008-01-27T22:24:17Z") // => "Yesterday"
  3. prettyDate("2008-01-26T22:24:17Z") // => "2 days ago"
  4. prettyDate("2008-01-14T22:24:17Z") // => "2 weeks ago"

The library is short and sweet:

javascript
< view plain text >
  1. /*
  2.  * JavaScript Pretty Date
  3.  * Copyright (c) 2008 John Resig (jquery.com)
  4.  * Licensed under the MIT license.
  5.  */
  6.  
  7. // Takes an ISO time and returns a string representing how
  8. // long ago the date represents.
  9. function prettyDate(time){
  10.     var date = new Date((time || "").replace(/-/g,"/").replace(/[TZ]/g," ")),
  11.         diff = (((new Date()).getTime() - date.getTime()) / 1000),
  12.         day_diff = Math.floor(diff / 86400);
  13.            
  14.     if ( isNaN(day_diff) || day_diff < 0 || day_diff >= 31 )
  15.         return;
  16.            
  17.     return day_diff == 0 && (
  18.             diff < 60 && "just now" ||
  19.             diff < 120 && "1 minute ago" ||
  20.             diff < 3600 && Math.floor( diff / 60 ) + " minutes ago" ||
  21.             diff < 7200 && "1 hour ago" ||
  22.             diff < 86400 && Math.floor( diff / 3600 ) + " hours ago") ||
  23.         day_diff == 1 && "Yesterday" ||
  24.         day_diff < 7 && day_diff + " days ago" ||
  25.         day_diff < 31 && Math.ceil( day_diff / 7 ) + " weeks ago";
  26. }

Related Content:

9 Comments »

Comments feed TrackBack URI

If you call using logical operators instead of if-else statements pretty, and not used once but eight times in the same statement, then I have nothing to say.

Comment by Jordan — January 29, 2008

I should also add that it’s just like those people who elect to reduce an equation down for the sake of shortness or speed, at the cost of making the code nonintuitive. e.g.,

if(mouseUp && !(isDragging || isDropping) && (dataLoading || dataExists))

if(!(!mouseUp || isDragging && isDropping || dataLoading && dataExists)) //I saved 1 character!

Comment by Jordan — January 29, 2008

I saw that, but I also saw http://www.datejs.com/ back on Nov. 28th.

Comment by BillyG123 — January 29, 2008

I use a php script that I found off of PHP.net for that. I couldn’t see a reason why you would want a Javascript version, it simply slows the proccess of your app down. Javascript like could be done with less stress on the server and the user if it was done server side. Just a Though :)

Comment by mattk — January 29, 2008

@Jordan:
It’s really a matter of personal preference. That return statement is more readable to me than 8 if-elseif blocks, uses less lines / characters to edit, 1 return statement instead of 8, etc. And in the constant battle to minimize downloads, a few characters saved here and there makes a huge difference in the long run.

Comment by Bub — January 29, 2008

@Jordan
I agree with Bub, this version is more readable (and cleaner) and is easy enough to understand seeing as though John broke unique statements up into different lines.

Comment by Andy Kant — January 29, 2008

@BillG123 – You do realize this does the exact opposite of that script?

Comment by Eric the .5b — January 29, 2008

For the Mootoolers out there:
check out Date.js and Date.Extras.js @ Clientside

Comment by anewton — January 29, 2008

thanks for this nice information on dates and javascript

Comment by mountlaurel — March 1, 2008

Leave a comment

You must be logged in to post a comment.