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:
<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>
<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.
Archived Comments
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. . ..
@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.
I'll ditto Kevin. I'm not sure it supports "no weekends" - but check the docs.
here is a couple of other options - same results:
timeago
http://timeago.yarp.com/
cutetime
http://tpgblog.com/cutetime/
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...