Timeframe

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()).

• minRange, maxRange: Limit the minimum and maximum possible range length (set maxRange to 1 to turn Timeframe into a regular old date picker).

Localization:

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:

var timeframe = new Timeframe();
timeframe.initialize(window.calendars, {
  earliest: new Date(),
  resetButton: $('#reset'),
  startField: $('#start'),
  endField: $('#end')
});

See it in action here.

Dependencies:

Timeframe requires jQuery. It was built using 1.8, but older versions should work too.

Contributors:

• Stephen Celis ("stephencelis") - original developer of Timeframe (using Prototype)
• Justin Palmer ("Caged")
• Nik Wakelin ("codetocustomer")
• Sebastien Grosjean ("ZenCocoon")
• Will Bryant ("willbryant")

Download:

Find the latest version of Timeframe on Github.

More information can be found here.

Copyright (c) 2008-2011 Kyle Konrad, released under the MIT license.