Wednesday, April 23rd, 2008
Timeframe: Prototype date range component
Category: JavaScript
, Library, Component, Prototype
Stephen Celis got tired of wiring together two date pickers for the common use case of grabbing a date range, so he created timeframe, which is "Click-draggable. Range-makeable. A better calendar."
Based on Prototype, you can whip up some code such as:
JAVASCRIPT:
-
-
new Timeframe('calendars', {
-
startfield: 'start',
-
endfield: 'end',
-
previousbutton: 'previous',
-
todaybutton: 'today',
-
nextbutton: 'next',
-
resetbutton: 'reset' });
-
And then you get:
Check out the live example to really see it at work.
4.5 rating from 26 votes
@Stephen Celis - great work!
FireFox beta 5 - works beautiful
IE 6 - worst experience!
Am I the only who thinks in terms of weeks and not months? Having the display of days split down middle with some on the left and the rest on the right just because they fall in different months, is annoying in IMHO. Especially if I’m trying to select a continuous range of days. (emphasis on the word ‘continuous’)
–Simon
Thanks for the coverage!
IE6 doesn’t look pretty, but I’d like to better address the way styles are handled by default soon and will give IE6 a full pass.
Simon: Someone pointed me to this after seeing the calendar. The option wouldn’t be out of the question, but unfortunately it does seem that most people think in terms of months, not weeks.
Here’s one for Mootools:
http://clientside.cnet.com/wiki/cnet-libraries/03-jswidgets/01-cms-and-form-helpers#date.picker.plus.js
I really like this, selecting something spanning more than the two months is as far as I can tell, not possible. Otherwise it’s pretty slick. Great for what it does at the moment.
Adam, it’s possible, but not very intuitive at this point.
1. You can do a quick click to get the range to “stick”, then hit the arrows to go as many months you want, then click the next date to end the range.
2. You can edit the fields and let them be parsed.
I plan to let you just drag to new months, though.
Great work.
This should be submitted to scripteka:
http://scripteka.com/ :)
Nice work! It’s sure going to be handy in a project I’m working on.
I would like to see the results of a usability test on a page using this component. The month selector could be a little more intuitive. It could say “Month” instead of “T”.
An interesting idea though.