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

More information can be found at here.