Timeframe, by Stephen Celis

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

Click here for the example.

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

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

maxRange

Limit the maximum possible range length (set 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.”

Notes:

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

An example:

• A little bit slow in IE. Optimizations forthcoming.
• Try Safari for the best experience.