Skip to content

etrepat/simple-range-picker

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

15 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Simple Range Picker

Simple javascript date range picker component I made some time ago for my own projects and self-testing/learning.

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

Usage

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

options parameter

  • months: number of calendar months showing at once (default: 3).
  • currentMonthPosition: position of current month. one of: first, last or middle. (default: last).
  • current: current date. (default: 'Date.today()').
  • initialSelectionStart, initialSelectionEnd: initial selection range start/end dates (default: 'Date.today()')
  • earliest, latest: The earliest and latest selectable dates. (default: earliest)
  • onRangeChange: callback fired when range selection changes

locale and template parameters

  • locale: Allows for simple runtime locale manipulation (component-specific or date manipulation).
  • template: Sets the markup which RangePicker will use to generate the calendar component.

Please take a look at the RangePickerOptions object on rangepicker.js for further details on the options avaible on both objects.

Quick & Dirty

<script type="text/javascript" charset="utf-8">
    new RangePicker('rangepicker', {
        months: 3,
        currentMonthPosition: 'last'
    });
</script>

You can see it in action online here or take a look at the example folder.

Dependencies

RangePicker depends on the following libraries:

Notes:

  • All dependencies are bundled on the lib directory at what version they were when this component was written.

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.


Coded by Estanislau Trepat, released under the MIT License.

About

Yet another javascript date picker component

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published