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/Script.aculo.us 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.
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.
Pretty, but… ummm… no thanks.
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…
Very slow to load for me.
Isn’t this exactly what the Google finance and analytics date pickers do? Props for execution though.
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.
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.
?
oops Ignore the previous comment.. Wrong topic.
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. :)