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.

Posted by Rey Bango at 6:51 am
16 Comments

+++--
3.4 rating from 48 votes

16 Comments »

Comments feed TrackBack URI

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.524ms

Comment by olga — May 16, 2008

Not taking anywhere near that here, olga.

Comment by ceejayoz — May 16, 2008

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 …

Comment by Harald — May 16, 2008

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?

Comment by joomlaman — May 16, 2008

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

Comment by olga — May 16, 2008

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?

Comment by Jeria — May 16, 2008

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.

Comment by Adam Sanderson — May 16, 2008

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.

Comment by tj111 — May 16, 2008

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.

Comment by mansfiem — May 16, 2008

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.

Comment by Unfocused — May 16, 2008

Funny how people always find a way to whine about something. This is genious, great work!

Comment by Nick — May 16, 2008

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

Comment by eyelidlessness — May 16, 2008

It’s very attractive but needs some performance improvements

Comment by Holooli — May 16, 2008

I’m not whining, just saying that it’s not very usable if I have to wait 15-20 seconds after clicking the arrow.

Comment by olga — May 19, 2008

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.

Comment by Venkman — May 19, 2008

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.

Comment by Venkman — May 19, 2008

Leave a comment

You must be logged in to post a comment.