Quick Review of jQuery Date/Time Widgets

Once again I find myself browsing around for a better javascript calendar tool. I'm particularly looking for jQuery support, the ability to handle both date and time entry, and — being post-iPhone/Android/iPad 2010 — I'm concerned about making sure it is finger friendly (i.e. it works on a touch screen).

The table below summarises my findings at this point (see here for my full survey results). The ranking is just my personal view, and this list is certainly not all inclusive (if you know of other/better options I'd be really interested to hear from you). Each tool links to a test page where I've tried to cut everything back to the bare essentials needed to run a demo. Feel free to pinch the source if it helps.

Conclusions? There are some reasonably effective tools here for quickly dropping in date and time editing support, but at the end of the day I'm not sure that Google haven't already got it right with the simple combo-box time selectors in Google Calendar (is there a widget that includes something similar? Haven't found it yet).

The Field

* indicates the latest versions that I have been able to successfully test

jQuery Datepicker [Rank: B]

• jQuery*: 1.4.2


• jQuery UI*: 1.8.2,1.7.3


• Dates: Yes Times: No


• Finger Friendly:Yes


• Comments:The standard widget

Any+Time [Rank: A]

• jQuery*: 1.4.2


• jQuery UI*: n/a


• Dates: Yes Times: Yes


• Finger Friendly:Yes


• Comments: Extensively customisable and scriptable. Supports jQuery UI themes. Also works with prototype instead of jQuery. Cannot edit the bound field while the widget is active [Update 18-Jun-2010: fixed incorrect statement that jQuery themes not supported]

Martin Milesich's Timepicker [Rank: A-]

• jQuery*: 1.4.2, 1.3.2


• jQuery UI*: 1.8.2, 1.7.2


• Dates: Yes Times: Yes


• Finger Friendly: Cannot use the time slider with finger, but you can select a point on the slider with finger OK.


• Comments: Generally neat extension of the standard datepicker. Supports alternate fields to split out date/time component for easier processing.

Trent Richardson's Timepicker [Rank: B+]

• jQuery*: 1.4.2


• jQuery UI*: 1.8.2


• Dates: Yes Times: Yes


• Finger Friendly: Cannot use the time slider with finger. You can select a point on the slider with finger, but there is a minor bug meaning you need to select twice. You can also edit the bound field while the widget is active.


• Comments: Generally a very neat extension of the standard datepicker. Doesn't support all features however e.g. alternate fields

W3VISIONS Date-Time-Picker [Rank: B-]

• jQuery*: 1.3.2


• jQuery UI*: n/a


• Dates: Yes Times: Yes


• Finger Friendly: Yes. Slider button doesn't work with the finger, but can select positions on the slider OK


• Comments: The UI is a bit klunky and no themes support so I didn't bother with a demo page for this

timepickr [Rank: C]

• jQuery*: 1.4.2


• jQuery UI*: 1.7.3


• Dates: NoTimes: Yes


• Finger Friendly: No fingers, no play (unless the device has a trackball you can fallback on)


• Comments: A different take on time entry. Maybe too different.

Additional Resources

• jQuery Home


• Datejs extends javascript Date parsing capabilities and adds nice syntactic sugar


• Date Format extends javascript Date formating capabilities

Alternative Frameworks

jQuery is not the only game in town of course. Here are some others...

• Dojo Date Controls and
  TimeSpinner


• MooTools Datepicker


• YUI Calendar, timepicker


• Calendar Date Select Prototype-based Rails plugin


• In Railscast 213 Ryan Bates provides some great coverage of date/calendar plugins with Rails

Blogarhythm for this post: Time - Pink Floyd