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.
new RangePicker(element[, options, locale, template]);
months
: number of calendar months showing at once (default:3
).currentMonthPosition
: position of current month. one of:first
,last
ormiddle
. (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
: 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.
<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.
RangePicker 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)
Notes:
- All dependencies are bundled on the
lib
directory at what version they were when this component was written.
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.