Wednesday, April 23rd, 2008

Timeframe: Prototype date range component

Category: Component, JavaScript, Library, 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:


  1. new Timeframe('calendars', {
  2.             startfield: 'start',
  3.             endfield: 'end',
  4.             previousbutton: 'previous',
  5.             todaybutton: 'today',
  6.             nextbutton: 'next',
  7.             resetbutton: 'reset' });

And then you get:


Check out the live example to really see it at work.

Posted by Dion Almaer at 6:25 am

3.4 rating from 16 votes


Comments feed TrackBack URI

@Stephen Celis – great work!

Comment by WillPeavy — April 23, 2008

FireFox beta 5 – works beautiful
IE 6 – worst experience!

Comment by ajaxus — April 23, 2008

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


Comment by SimonEdwards — April 23, 2008

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.

Comment by stephencelis — April 23, 2008

Here’s one for Mootools:

Comment by anewton — April 23, 2008

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.

Comment by Adam Sanderson — April 23, 2008

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.

Comment by stephencelis — April 23, 2008

Great work.

This should be submitted to scripteka: :)

Comment by jdalton — April 23, 2008

Nice work! It’s sure going to be handy in a project I’m working on.

Comment by tjackiw — April 24, 2008

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.

Comment by rstackhouse — April 29, 2008

Leave a comment

You must be logged in to post a comment.