Timeframe

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

The code:

new Timeframe(element, options);

Options available:

• calendars: 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).

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

Notes

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

Also!!:

The startfield and endfield are parsed with Date.parse(), so feel free to use Datejs for ninja-quick date-parsing.

An example:

<script type="text/javascript" charset="utf-8">
  //<![CDATA[
    new Timeframe('calendars', {
      startfield: 'start',
      endfield: 'end',
      previousbutton: 'previous',
      todaybutton: 'today',
      nextbutton: 'next',
      resetbutton: 'reset' });
  //]]>
</script>

See it in action here.

Dependencies

Timeframe requires Prototype 1.6 or higher.

Download

Find the latest version of Timeframe on Github.

More information can be found at here.

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