Friday, May 16th, 2008
A new spin on the datepicker control
Category: JavaScript
, jQuery
Just when you thought that datepickers had been played out, along comes Filament Group and puts a whole new spin on it. Working from Mark Grabanski’s jQuery UI DatePicker control, the team substantially enhanced the UI with a host of new features including:
- shortcut links to preset date ranges, for example, “Past 30 days” or “Current YTD,”
- links to “All dates before…” and “All dates after…” to simplify selecting a range of values where the data set is very large or the high or low end value is an unknown, and
- only showing the number of calendars needed for choosing a particular range (i.e., you only need one calendar to choose “All dates before…”, but you’ll need two to select a custom range).
- Use of progressive enhancement for graceful degradation /li>
Check out the demo here.
3.5 rating from 42 votes
Nice, but quite slow. Took almost 20 seconds to change the date (Firebug’s profiler):
function: nodeName, calls: 1406, percent: 93.89%, own time: 15449.139ms, time: 15458.153ms, avg: 10.994ms, min: 0.005ms, max: 451.524msNot taking anywhere near that here, olga.
the click behaviour is kinda wonky, sometimes it does not slide … and why can’t it simply show? I think “smooth transitions” for simple controls steal users time. animations should be used to show significant changes on a page like new content but not for a control. Especially when it slides only sometimes, or maybe the animation is thwarted by dom creation in the background.
The idea of selecting dates is pretty nice, could be extensible. Typing in stuff like tomorrow, yesterday, in 2 days …
compare this to http://www.lubber.de/extjs/datepickerplus/
what exactly does this have that the other one doesn’t? unknown date ranges? how would that help?
I know, this machine is slow as hell, but I haven’t had any problems with other libraries though. But it’s good to have a slow computer, it teaches you to optimize your code :)
When loading the demo I first saw two text field flash, then I see the drop down slide down and then back up. Eh?
This widget is nice, but I agree about the animations and also ask myself where this widget would be useful. Why not just simply two text fields with a simple calendar icon next to them?
It’s a great idea, but I have to agree with olga, it was really slow sometimes on my machine (not 20 seconds, but quite perceptible). Very slick design though.
It’s a nice interface for date picking, although I can see it being a little slow for users with slow computers. Also, the arrows on the side seem to be for increasing or decreasing the current date by 1 day, but clicking the left arrow increases the date.
It’s a decent UI, but non-technical people won’t get it right away. I didn’t have problems with the load time at all. It was actually quite fast.
As a warning - don’t compare timings from Firebug’s profiler with other widgets where you didn’t have the profiler enabled. Firebug’s debugger/profiler is known to *significantly* increase the amount of time it takes to execute any Javascript.
Anyway, this is a good step towards improving the usability of date pickers. Because really, some of them in the past have been just painful to use.
Funny how people always find a way to whine about something. This is genious, great work!
“Funny how people always find a way to whine about something.”
Complaining, criticizing and challenging is how things improve. Funny how people always find a way to whine about criticism.
It’s very attractive but needs some performance improvements
I’m not whining, just saying that it’s not very usable if I have to wait 15-20 seconds after clicking the arrow.
I hope this does not come out as a whine, but I do have significant problems with this.
To be precise, I follow these steps:
1. Date range Apr 19, 2008 to May 19, 2008 is selected at satart in the demo. I press the > button to the right of the picker.
2. Now the range selected is May 20 to June 18, which is a bit surprising but acceptably valid.
3. I press the : May 23 to May 22 and I’m totally lost.
Uhm, shouldn’t have used angles…
I repeat:
1. Date range Apr 19 to May 19 is selected at satart in the demo. I press the RIGHT button to the right of the picker.
2. Now the range selected is May 20 to June 18, which is a bit surprising but acceptably valid.
3. I press the LEFT: Range is now May 21 to May 20, which is clearly confusing.
4. I press LEFT again: May 22 to May 19.. uhmmm…
5. Press RIGHT now: May 23 to May 22 and I’m totally lost.
Thanks.Good article