A better jQuery date picker

alexkroman
December 10, 2008

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 3 years 7 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 3 years 7 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 3 years 6 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 3 years 4 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 2 years 51 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 2 years 49 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 2 years 5 weeks 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.