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 href="/jquery/jqueryui/css/smoothness/jquery-ui-1.7.1.custom.css"
rel="stylesheet" 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 id="theDate" name="date" type="text" />
</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. You can check this demo out here.
DougHughes.net 
Comments on: "Playing with jQuery Datepicker" (6)
Muchas Gracias no sabia como hacer esto!!!!
Thank you ……
LikeLike
http://concealer.mybrute.com
Check out the cool mini-game
LikeLike
Dawg, I already bookmarked your page… this datepicker tutorial sure solved a lotta date-range problems for me.
Thanks.
LikeLike
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?
LikeLike
FYI, the example page you reference – http://www.coldfusionjedi.com/demos/datepicker/test1.cfm – does not work with Firefox 3.
LikeLike
. Js files where the download link
LikeLike