Created: 2008-04-21 02:58
Updated: 2018-06-27 22:00
License: mit



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.


  • Justin Palmer ("Caged")
  • Nik Wakelin ("codetocustomer")
  • Sebastien Grosjean ("ZenCocoon")
  • Will Bryant ("willbryant")


Find the latest version of Timeframe on Github.

More information can be found here.

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

Cookies help us deliver our services. By using our services, you agree to our use of cookies Learn more