Blog Author: Raymond Camden

Raymond Camden is the ColdFusion Jedi. A long time ColdFusion user, Raymond has worked on numerous ColdFusion books including the ColdFusion Web Application Construction Kit and has contributed to the Fusion Authority Quarterly Update and the ColdFusion Developers Journal. He also presents at conferences and contributes to online webzines. He founded many community web sites including CFLib.org, ColdFusionPortal.org, ColdFusionCookbook.org and is the author of open source applications, including the popular BlogCFC (www.blogcfc.com) blogging application. Raymond can be reached at his blog (www.coldfusionjedi.com) or via email at ray@camdenfamily.com. He is the happily married proud father of three kids and is somewhat of a Star Wars nut.

The Alagad Technical Team Blog

Playing with jQuery Datepicker

Published By: Raymond Camden on Apr 20, 2009 at 05:56 PM
Categories: jQuery

I've had a chance to play a bit with jQuery's Datepicker widget and am really growing to enjoy how simple it is to use. I won't go over a full explanation of the widget, the site has that covered, but just to give a quick example, check out how easy it is to add the control to a form field.

<html>
<head>
<link rel="stylesheet" href="/jquery/jqueryui/css/smoothness/jquery-ui-1.7.1.custom.css" type="text/css" />
<script src="/jquery/jquery.js"></script>
<script src="/jquery/jqueryui/js/jquery-ui-1.7.1.custom.min.js"></script>
<script>
$(document).ready(function() {
$("#theDate").datepicker()
})
</script>
</head>

<body>

<input type="text" name="date" id="theDate">

</body>
</html>

Nothing terribly complex. I've got one line to include the CSS, 2 JavaScript includes (one for the core jQuery, one for jQuery UI), and finally, I can enable the default datepicker by just using a selector and the .datepicker() constructor. Easy as pie. You can view an example of this here.

Ok, so given how easy it is to use, there were two things I wasn't quite sure of. First, how can I create a date field that only allows you to pick dates in the future. Now to be picky, we can mean two things by that. Today and onward - or just tomorrow and onward. The datepicker widget takes many options, but one of them is a minDate value. What's awesome is that you can pass in a JavaScript date object, a string value (like 7d), or even a simple number. Consider this simple example:

<html>

<head>
<link rel="stylesheet" href="/jquery/jqueryui/css/smoothness/jquery-ui-1.7.1.custom.css" type="text/css" />
<script src="/jquery/jquery.js"></script>
<script src="/jquery/jqueryui/js/jquery-ui-1.7.1.custom.min.js"></script>
<script>
$(document).ready(function() {
    $("#theDate").datepicker({
        minDate:0
    })
    $("#theDate2").datepicker({
        minDate:1
    })

})
</script>
</head>

<body>

<input type="text" name="date" id="theDate">

<input type="text" name="date2" id="theDate2">

</body>
</html>

I've got two datepicker widets now. The first one will allow today and onward while the second one will only allow tomorrow and onward. You can see this in action here.

The last thing I wanted to try was a date range. Given two dates (first date, second date), how can we make it so that the first date restricts the minimum date for the second date, and the second date restricts the maximum date for the first one? (Try saying that three times fast.)This wasn't too terribly difficult, but I did run into a little snag.

First off, we do have access to a select event when working with datepickers. This let's us run custom code when you select a date. So I figured I'd do something like so: When you pick a date in the First Date box, use that as the minimum date for the Last Date. When you pick a date in the Last Date box, set that as the maximum date for the First Date. Here is what I ended up with:

<html>

<head>
<link rel="stylesheet" href="/jquery/jqueryui/css/smoothness/jquery-ui-1.7.1.custom.css" type="text/css" />
<script src="/jquery/jquery.js"></script>
<script src="/jquery/jqueryui/js/jquery-ui-1.7.1.custom.min.js"></script>
<script>
$(document).ready(function() {
$("#firstDate").datepicker({
onSelect:function(theDate) {
$("#endDate").datepicker('option','minDate',new Date(theDate))
}
})
$("#endDate").datepicker({
onSelect:function(theDate) {
$("#firstDate").datepicker('option','maxDate',new Date(theDate))
}
})
})
</script>
</head>
<body>
Begin: <input type="text" name="firstDate" id="firstDate">

End: <input type="text" name="endDate" id="endDate">
</body>
</html>

Most of this should be self-explanatory, but I will point out one thing. The onSelect function gets the selected date as an argument. However, that value can't be used as a min or maxDate value. You can pass it in, but it doesn't get parsed right. I ended up with values in 2067 or so, and as we all know, the robots will have taken over by then and web apps won't exist. When I simply wrapped the date with the JavaScript Date() constructor, everything worked fine. You can check this demo out here.

5 responses to “Playing with jQuery Datepicker”

Muchas Gracias no sabia como hacer esto!!!!

Thank you ......

Posted By: ElkinC on Apr 25, 2009 at 12:00 AM

http://concealer.mybrute.com
Check out the cool mini-game

Posted By: Marcus on May 11, 2009 at 12:00 AM

Dawg, I already bookmarked your page... this datepicker tutorial sure solved a lotta date-range problems for me.
Thanks.

Posted By: Cat on May 19, 2009 at 12:00 AM

Raymond, this is very nice, but I've tried it using a different date format (set in the .js file - dd/mm/yy and the enddate doesn't appear to adopt this format. So, I put the start date as June 3rd 2009 (03/06/09) and the enddate calendar prevents me from using dates before March 6th 2009! (06/03/09)

Any thoughts on how I can solve this?

Posted By: Steve on Jun 12, 2009 at 12:00 AM

FYI, the example page you reference - http://www.coldfusionjedi.com/demos/datepicker/test1.cfm - does not work with Firefox 3.

Posted By: Michael D. on Oct 8, 2009 at 3:57 PM

The Alagad Technical Team Blog

Playing with jQuery Datepicker

5 responses to “Playing with jQuery Datepicker”

Leave a Reply