Timeframe, by Stephen Celis

Click-draggable. Range-makeable. A better calendar.

Click here for the example.

The code:

      new Timeframe(element, options);

Options available:

The number of calendar months showing at once (default: 2).
The strftime format for the dates in the input fields (default: %b %d, %Y). (With Datejs, it takes Datejs formatting.)
The weekday offset (use 1 to start the week on Monday).
startField, endField
Declare the range start and end input tags (by default, these are generated with the Timeframe).
previousButton, todayButton, nextButton, resetButton
Declare the navigational buttons (by default, these are also generated with the Timeframe).
earliest, latest
The earliest and latest selectable dates (accepts either a Date object or a String that can be parsed with Date.parse()).
Limit the maximum possible range length (set to 1 to turn Timeframe into a regular old date picker).


Drop in a localized version of Datejs, and it should just work. An added bonus is that the text fields will live-parse more nicely! Just try “next tues.”


An example:

Please select a date range below:

and (reset):

Generated from this code (see the source for more detail):

      <script type="text/javascript" charset="utf-8">
          new Timeframe('calendars', {
            startField: 'start',
            endField: 'end',
            earliest: new Date(),
            resetButton: 'reset' });


Timeframe is open source, tested, and available for forking, pushing, and pulling at Github:


If you find Timeframe useful, please feel free to leave a donation: Click here to lend your support to: timeframe and make a donation at www.pledgie.com !



Contact me with questions/comments at .

Learn more about me at stephencelis.com.

Copyright © 2008–2009 Stephen Celis. Provided under the MIT License.