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

Also!!:

The startfield and endfield are parsed with Date.parse(), so feel free to use Datejs.js 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>

Dependencies

Timeframe requires Prototype 1.6.

Download

Find the latest version of Timeframe on Github.

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