Skip to content
Click-draggable. Range-makeable. A better calendar.
Find file
New pull request
Pull request Compare This branch is 23 commits behind stephencelis:master.



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

The code:

new Timeframe(element, options);

Options available:

  • months: The number of calendar months showing at once (default: 2).

  • format: The strftime format for the dates in the input fields (default: %b %d, %Y). (With Datejs, it takes Datejs formatting.)

  • weekOffset: Override the localization's default weekday start with this option (e.g., 1 will force the rows to start on Monday; use 0 for Sunday).

  • startField, endField: Declare the range start and end input tags (by default, these are generated with the Timeframe). When the value attribute is pre-populated, the Timeframe will load with this range.

  • previousButton, todayButton, nextButton, resetButton: Declare the navigational buttons (these are also generated by default 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()).

  • maxRange: 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."


  • I'm just sick of multiple date pickers on the same page.

An example:

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

See it in action here.


Timeframe requires Prototype 1.6 or higher.


Find the latest version of Timeframe on Github.

More information can be found here.

Copyright (c) 2008 Stephen Celis, released under the MIT license.

Something went wrong with that request. Please try again.