Package Exports

react-bootstrap-daterangepicker

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-bootstrap-daterangepicker) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-bootstrap-daterangepicker

Description

A date/time picker for react (using bootstrap). This is a react port of:

bootstrap-daterangepicker

Getting Started

Install the module with: npm install --save react-bootstrap-daterangepicker
Create your module (you need to use something like browserify to build)

var React = require('react');
var moment = require('moment');
var DateRangePicker = require('react-bootstrap-daterangepicker');
var someReactComponent = React.createClass({
    render: function () {
        return (
            <DateRangePicker startDate={moment('1/1/2014')} endDate={moment('3/1/2014')}>
                <div>Click Me To Open Picker!</div>
            </DateRangePicker>
        );
    }
});

Include the daterangepicker CSS in your project somewhere. The CSS file is here: daterangepicker.css (don't hotlink- download and host your own copy)

<link rel="stylesheet" href="daterangepicker.css" type="text/css" />

Documentation

For in depth documentation, see the original bootstrap-daterangepicker project page.

You can pass all the same props as the original plugin:

<input>, applyClass, autoApply, autoUpdateInput, buttonClasses, cancelClass, dateLimit, drops, endDate, isInvalidDate, linkedCalendars, locale, maxDate, minDate, opens, parentEl, ranges, showDropdowns, showWeekNumbers, singleDatePicker, startDate, template, timePicker, timePicker24Hour, timePickerIncrement, timePickerSeconds, timeZone

You can listen to the following 7 events:

onShow: thrown when the widget is shown
onHide: thrown when the widget is hidden
onShowCalendar: thrown when the calendar is shown
onHideCalendar: thrown when the calendar is hidden
onApply: thrown when the apply button is clicked
onCancel: thrown when the cancel button is clicked
onEvent: thrown when any of the 4 events above are triggered

All 7 of the events above should take a handler that is passed 2 arguments: event and picker

Example event handler:

var someReactComponent = React.createClass({
    handleEvent: function (event, picker) {
        console.log(picker.startDate);
    },
    render: function () {
        return (
            <DateRangePicker onEvent={this.handleEvent} />
        );
    }
});

JSPM