Simple Range Picker

Motivation

Inspiration for this component came from the Flash-based date range picker you can see on Google Analytics and Stephen Celis's Timeframe component. It's sort of a mix of the two.

Usage

new RangePicker(element[, options, locale, template]);

For insight on the options available or what attributes may be supported by the locale and template objects, please take a look at the README on the github project page.

Documentation

README

Example

Please, pick a date range from the component below:

Generated from the code below (check source code for more detail):

      <script type="text/javascript" charset="utf-8">
        //<![CDATA[
          document.observe(ɽom:loaded', function() {
            new RangePicker('rangepicker', {
                months: 3,
                currentMonthPosition: 'last'
            });
          });
        //]]>
      </script>
    

Download

You can download this project in either zip or tar formats.

You can also clone the project with Git by running:

$ git clone git://github.com/etrepat/simple-range-picker.git

Dependencies

This project depends on the following libraries:

• Prototype 1.6 or higher
• Datejs 1.0 Alpha-1 or higher
• (optional) Script.aculo.us 1.8.0 o higher (If present, some effects are used)

Localization

Localization can be accomplished by modifying the strings present in RangePickerOptions.Locale object. Also, as this project relies on the Datejs library for date manipulation, dropping a localized culture info file will do the job for date formats, day names, etc.

Contact

Coded by Estanislau Trepat. Released under the terms of the MIT License.

You may reach me with questions/comments at estanis@etrepat.com.