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 wrapper around an existing jQuery/bootstrap library (it is not a pure react port):

bootstrap-daterangepicker

Getting Started

Install the module with: npm install --save react-bootstrap-daterangepicker
Install the needed peer dependencies: npm install --save react react-dom jquery moment prop-types
Include the bootstrap@3 css and fonts in your project.
This is a commonjs library. You will need a tool like browserify/webpack/etc to build your code.

import React, { Component } from 'react';
import DateRangePicker from 'react-bootstrap-daterangepicker';
// you will need the css that comes with bootstrap@3. if you are using
// a tool like webpack, you can do the following:
import 'bootstrap/dist/css/bootstrap.css';

class MyComponent {
  render() {
    return (
      <DateRangePicker startDate="1/1/2014" endDate="3/1/2014">
        Click Me To Open Picker!
      </DateRangePicker>
    );
  }
}

Documentation

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

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

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

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:

class SomeReactComponent extends React.Component {
  handleEvent(event, picker) {
    console.log(picker.startDate);
  }
  render() {
    return <DateRangePicker onEvent={this.handleEvent} />;
  }
}

Release Notes

Release notes can be found in the Changelog.

JSPM