While attending Microsoft Mix earlier this spring, I stumbled upon a book called “Making Forms That Work“, which was written by Caroline Jarrett and Gerry Gaffney. The book focused on building web-forms that aren’t intimidating and that people will actually fill out. One of the focuses was making sure to use the right controls for the right question you have for your user. You certainly don’t want a drop down list of 1000 names to have the user pickout their name, and you definitely don’t want to give them a text-box to type in their gender.
On that same line of reasoning, it’s probably not a good idea to have users manually type in dates. Considering all of the formats possible for entering a date, say “5/28/2009”, “5/28/09”, “Thursday, May 28th, 2009”, “May 28 09”, etc, you would need quite the number of regular expressions to determine if what the user entered in actually was a date. One solution to this is to draw a small calendar on the page and have the user click which date they want, but those often take up a lot of screen real estate.
Instead, I usually recommend some sort of pop-up date picker. For ASP.NET, I’ll typically use the AJAX Control Toolkit Date Picker. For other situations, I”ll make use of Kevin Luck’s JQuery DatePicker. For more advanced date picking, you might also look into the JQuery Date Range Picker.
For today’s project, we’ll make a basic implementation of Luck’s JQuery Date Picker. Here’s how to get started:
(1) Download the libraries
For this project, we’re actually going to need a couple different libraries. We’ll need the JQuery library it self. You’ll also need the date methods extension for JQuery. After we have those two helper-libraries in place, we can download the JQuery Date Picker library it self and the associated CSS file.
(2) Create header references
Now that we’ve got all of the libraries, we need to add some references in the header that should (for the most part, depending on where you put the files) look like this:
<script src=”jquery-1.3.2.min.js” type=”text/javascript”></script>
<script src=”date.js” type=”text/javascript”></script>
<script src=”jquery.datePicker.js” type=”text/javascript”></script>
<link href=”datePicker.css” rel=”stylesheet” type=”text/css” />
(3) Create an input field for your datepicker
With the datepicker, you’ll actually click the textbox itself or an associated image, and that will load the javascript popup that lets you pick out a date, and then the date picker will fill the value you choose into that textbox. Add an input tag to your page. Make sure to give it a class of “date-pick”.
<input name="date1" id="date1" class="date-pick" />
(3) Call the date picker script
Somewhere in the header, we’ll need to call the date picker script so that it loads when the page does. That code should look like this:
<script type=”text/javascript” charset=”utf-8″>
$(function()
{
$(‘.date-pick’).datePicker();
});
</script>
(4) You’re done
At this point, you should have something that looks like this (after you click on the “Choose Date” text):
Right now, it’s pretty ugly. The neat little calendar icon won’t be there, but you can add that by modifying the css.You’ll probably also want to modify the color scheme to match the theme of your site. You can download my quick and dirty example code here (36 KB).