#134 Date-Time Selectors

A Quick Survey of jQuery Date-Time Selector libraries and approaches (circa 2010)

Notes

NB: this research was done in 2010 and needs updating. It was originally published on the tardate blog. For more recent info, see:

Overview

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. 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).

Evaluation

Example	jQuery	jQuery UI	Dates	Times	Finger Friendly	Comments	Rank
jQuery Datepicker	1.4.2	1.8.2, 1.7.3	Yes	No	Yes	The standard widget	B
Any+Time	1.4.2	n/a	Yes	Yes	Yes	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.	A
MartinMilesich’s Timepicker	1.4.2	1.8.2, 1.7.2	Yes	Yes	Cannot use the time slider with finger, but you can select a point on the slider with finger OK.	Generally neat extension of the standard datepicker. Supports alternate fields to split out date/time component for easier processing.	A-
Trent Richardson’s Timepicker	1.4.2	1.8.2	Yes	Yes	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.	Generally a very neat extension of the standard datepicker. Doesn’t support all features however e.g. alternate fields	B+
W3VISIONS Date-Time-Picker	1.4.2	n/a	Yes	Yes	Yes. Slider button doesn’t work with the finger, but can select positions on the slider OK	The UI is a bit klunky and no themes support so I didn’t bother with a demo page for this	B-
timepickr	1.4.2	1.7.3	No	Yes	No fingers, no play (unless the device has a trackball you can fallback on)	A different take on time entry. Maybe too different.	C

NB: version numbers refer to the latest versions that I have been able to successfully test

Alternative Frameworks

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

Calendar Date Select Prototype-based Rails plugin
Dojo Date Controls and TimeSpinner
MooTools Datepicker
YUI Calendar, timepicker

Credits and References