A better jQuery date picker

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:

date_picker_small.jpg

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

Changelog

  • 12-10-2008 - Initial release

Project Page

Tagged as: elementalClinic

7 comments

Frits (not verified) wrote 1 year 32 weeks ago

Looks very nice, really.

Looks very nice, really. Unfortunately, as far as I can see, it provides only an american date format. I'm from Europe.

alex (not verified) wrote 1 year 32 weeks ago

Frits, Thanks for checking

Frits,

Thanks for checking it out. Yeah, we haven't used this date picker on any applications that support non-American date formats. We're constantly working on improving it though.

Alvin Mites (not verified) wrote 1 year 31 weeks ago

Thanks guys

Probably the most functional data picker I've found, being able to quickly select different years / months is going to save lots of time for users of the site I'm building.

and it's in JQuery - Woo Hoo

Visitor (not verified) wrote 1 year 29 weeks ago

There's also a standard

There's also a standard datepicker that comes with jQuery UI. See it in action at http://ui.jquery.com/demos/datepicker. It's available with almost 40 localisations.

Visitor (not verified) wrote 1 year 24 weeks ago

link is broken

The demo link to "View the date picker in action" returns a 404 page... :-(

Michael D Prasuhn (not verified) wrote 1 year 22 weeks ago

I like it but.....

At least in my browser here, I am getting a cursor change when rolling over the little calendar icon to the right of the date, but clicking on it doesn't open the calendar. While I agree that click on the link date is cool, not being able to click on the calendar icon to open the date picker is a pretty big issue as that's how almost every other date picker I've seen or used works.

menzess (not verified) wrote 31 weeks 2 days ago

Good one

I think it's a good one,I'll download it to use it in my new blog but I don't know whether I can code it in my blog properly or not. Thanks for it.

Add your comment

The content of this field is kept private and will not be shown publicly.
  • Web page addresses and e-mail addresses turn into links automatically.
  • Allowed HTML tags: <a> <em> <strong> <cite> <code> <ul> <ol> <li> <dl> <dt> <dd>
  • Lines and paragraphs break automatically.
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>. Beside the tag style "<foo>" it is also possible to use "[foo]".

More information about formatting options