I wrote this date chooser because the ones I could find on the Internet were crummy, too complicated, or not free. The point is to make form entry more usable and help the user enter valid data (of course, you still need to validate your input when processing). I also wanted to code to be compact and fast, and not require a bunch of ugly code injected into the web page.
I made a demo so you can see it in action.
This code uses some code from my article about date formatting and parsing via dynamic code generation, to implement a date-formatting syntax similar to PHP’s
The script depends upon date-functions.js, datechooser.js, select-free.css, and datechooser.css.
How to use it
To create a date-chooser on your HTML document, follow these steps:
headof your document.
select-free.cssin a conditional comment for IE, as in the demo.
- Create a form, a
divto hold the date chooser, a form field to hold the results, and an image to trigger showing and hiding the chooser, as below.
Here’s some sample code:
<input id="dob" name="dob" size="10" maxlength="10" type="text"/><img src="/files/calendar.gif" onclick="showChooser(this, 'dob', 'chooserSpan', 1950, 2010, 'Y-m-d', false);"/> <div id="chooserSpan" class="dateChooser select-free" style="display: none; visibility: hidden; width: 160px;"> </div>
This code causes the date chooser to be shown with a date range of 1950 to 2010, with the date formatted in ISO-8601 date format.
On May 26 2006, I decided I could no longer procrastinate and integrated many of the helpful suggestions from the comments into the code. Thanks to all who wrote in comments suggesting improvements, and a big thanks to Jared for integrating a bunch of code for me and sending me a comment about it. Changes include a fix for the IE problem of
select fields showing through, no conflicts with the Prototype library, and a cleaner show/hide behavior.