Wednesday, January 23rd, 2008

New Twist on Date Pickers

Category: JavaScript, Prototype, Scriptaculous

We’ve all seen variations on date selection components such as Marc Grabanski’s UI DatePicker and the very unique DateJS library. So it’s refreshing to see new ideas cropping up in this space.

Geoffrey McGill, developer of the DateJS library, pointed me to a new date select control that uses a slider bar for choosing dates:

…we present the sliding date-picker. This element enables you to pick dates with a simple slider bar. By dragging the bar over the time-line, the dates change instantly. Besides this, when the user decides to manually change the dates, the bar is automatically adjusted to the corresponding dates. As you are used to from us, the script is based on Prototype/Scriptaculous, but now combined with the very sexy DateJs library.

It’s a mix of Prototype/ for the cool slider effect coupled with DateJS’ date string parsing capabilities. I think this is a novel method of choosing dates. One enhancement that would make it very cool would be to have the slider dynamically appear when an input field received focus or perhaps a user clicked on an icon next to the input field.

You can see the demo for the slider date picker here.

Posted by Rey Bango at 6:30 am

3.8 rating from 46 votes


Comments feed TrackBack URI

Very nice. Would be great for flight/hotel bookings, with a few enhancements (e.g. show weekday). Could use vertical dimension for time of day.

Comment by Michael Mahemoff — January 23, 2008

Pretty, but… ummm… no thanks.

Comment by Marty — January 23, 2008

Interesting idea and great for visualizing time ranges, but I can’t imagine using that with a track-pad given the 1-day-per-pixel resolution. I had a hard enough time with a normal mouse…

Comment by Ben — January 23, 2008

Very slow to load for me.

Comment by Chris Phillips — January 23, 2008

Isn’t this exactly what the Google finance and analytics date pickers do? Props for execution though.

Comment by Kingsley2 — January 23, 2008

The author did a great job of pushing the standard for what is possible with UI. I am not sure of a use case for this, but maybe it would be useful for an analytics application or something where you need a broad visual view what dates you are looking at. The ruler isn’t useful for precision date choosing, so it is necessary to provide the date fields below.

@Chris: The page is loading slow because the page is loading over 300KB worth of assets. I find that people start complaining when the total page weight is over 250KB, so if you are going to use this you should consider including feedback to the user while it is loading.

Comment by Marc — January 23, 2008

I don’t understand why you would want to ever run javascript on the server side.

You can already do anything you want with PHP, ASP.NET, Ruby, C++ etc on the server side. You have no limitations. You have ultimate control over the HTML on the server.

Plus, Anything dynamic on the client still has to be done on the client, otherwise you end up with a postback, hence the entire reason for javascript and AJAX.


Comment by pennyfx54 — January 23, 2008

oops Ignore the previous comment.. Wrong topic.

Comment by pennyfx54 — January 23, 2008

Undoubtedly very cool, but there’s no way I’d ever use it on a production site. My instinct was to type dates into the boxes, which had no effect.

Still – nice job. :)

Comment by johnmccollum — June 26, 2008

Leave a comment

You must be logged in to post a comment.