"Pretty Dates" with jQuery (ColdFusion example)

This post is more than 2 years old.

Just a quick note here to share a jQuery plugin that Todd Sharp shared with me: Prettydate. Prettydate takes dates (which you would hide within your DOM) and formats them in a more generic "time since.." form. So for example, a date within a few seconds will post as "just now", whereas an entry a few minutes old will display as "5 minutes old." The plugin supports dates up to one month old and will automatically update while your users look at a page. This creates a cool effect. They may initially see:

But within a few minutes this will be:

I created a quick ColdFusion script that demonstrates this. The one thing you have to remember is that you must convert the dates to ISO8601 format. In the following example I've used hard coded dates but obviously you could get this data from a database:

<html>

<head> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script> <script type="text/javascript" src="/jquery/jquery.prettydate.js"></script> <script> $(document).ready(function() { $("div#content > p.article > span").prettyDate() }) </script> <style> .date { font-family: Arial, Helvetica, sans-serif; font-size: 10px; display:block; } </style> </head> <body>

<cfset articles = [ {title="Article AAA", date=dateAdd("s", -50, now())}, {title="Article One", date=dateAdd("n", -5, now())}, {title="Article Two", date=dateAdd("n", -58, now())} ]>

<div id="content"> <cfloop index="article" array="#articles#"> <cfoutput> <p class="article"> <span class="title"><b>#article.title#</b></span><br/> <span class="date" title="#dateFormat(article.date,'yyyy-mm-dd')#T#timeFormat(article.date,'HH:mm:ss')#"></span> Some kind of teaser here...<br/> </p> </cfoutput> </cfloop> </div>

</body> </html>

The screen shots I pasted above show the result of this example. For more docs and examples, see the plugin's home page. Note - this is an update to a plugin John Resig originally created so if you Google, make sure you get the new one.

Raymond Camden's Picture

About Raymond Camden

Raymond is a senior developer evangelist for Adobe. He focuses on document services, JavaScript, and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA https://www.raymondcamden.com

Archived Comments

Comment 1 by Mark posted on 11/17/2009 at 4:56 AM

Got a jQuery datePicker with good config options?

I mean for example, you cant pick a weekend date, you cant pick a date more than a month in the future etc. . ..

Comment 2 by Kevin posted on 11/17/2009 at 11:01 PM

@Mark, I really like the jQuery UI datepicker - http://jqueryui.com/demos/d...

The default works well most of the time and configuration is really easy, just look at the options and examples at the link above.

Comment 3 by Raymond Camden posted on 11/17/2009 at 11:22 PM

I'll ditto Kevin. I'm not sure it supports "no weekends" - but check the docs.

Comment 4 by Scott P posted on 11/20/2009 at 7:25 AM

here is a couple of other options - same results:

timeago
http://timeago.yarp.com/

cutetime
http://tpgblog.com/cutetime/

Comment 5 by Ron posted on 1/27/2010 at 10:41 PM

Hello I had the same question as Mark (disable picking weekends). I am using the datepicker from jqueryui.com
To disable weekends use
$('.selector').datepicker({beforeShowDay: $.datepicker.noWeekends});

See here http://www.sanchothefat.com...
Select Customize tab and its the first example.

Also see here for ideas on how to add holidays and other things
http://stackoverflow.com/qu...