We deal with a lot of dates in elementalClinic and needed a UI control that allows a clinician to choose a date by either picking from a calendar or manually typing in the date.

Randall Hansen, our director of engineering came up with a simple and intuitive calendar widget that uses the jQuery javascript library.

Here's a screen shot of the widget being used in elementalClinic:

Features

• Ability to quickly type in a date or pick one from the calendar
• Validation for keyboard entered dates is presented unobtrusively and inline.
• Uses jQuery, our Javascript library of choice
• Clean, extensible code

Demo

View the date picker in action.

Usage

To use this date picker simply include jquery and the date_picker.js files in your html file and add the "date_picker" class to any text elements you want to use the widget for.

            <input type="text" name="zero" class="date_picker" />

License

GPL

Downloads

• Subversion
• Direct download

Changelog

• 12-10-2008 - Initial release

Project Page

• jQuery Project Page