Need help with react-bootstrap-daterangepicker?
Click the “chat” button below for chat support from the developer who created it, or find similar developers for support.

About the developer

460 Stars 201 Forks Other 239 Commits 6 Opened issues


A date/time picker for react (using bootstrap). This is a react wrapper around the bootstrap-daterangepicker project.

Services available


Need anything else?

Contributors list


NPM version Build Status Code Climate Coverage Status Dependency Status devDependency Status



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):


Getting Started

  1. Install the needed peer dependencies:

    npm install --save bootstrap-daterangepicker react jquery moment
  2. Install the module with:

    npm install --save react-bootstrap-daterangepicker
  3. Include the [email protected] css and fonts in your project. (aka

    import 'bootstrap/dist/css/bootstrap.css';
  4. Include the bootstrap-daterangepicker css in your project. (aka

    import 'bootstrap-daterangepicker/daterangepicker.css';
  5. 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 [email protected] if you are using
// a tool like webpack, you can do the following:
import 'bootstrap/dist/css/bootstrap.css';
// you will also need the css that comes with bootstrap-daterangepicker
import 'bootstrap-daterangepicker/daterangepicker.css';

class MyComponent { render() { return ( Click Me To Open Picker! ); } }


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

You can pass all the settings from the original plugin to the

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

You can listen to the following 8 events:

  • onShow:
    callback(event, picker)
    thrown when the widget is shown
  • onHide:
    callback(event, picker)
    thrown when the widget is hidden
  • onShowCalendar:
    callback(event, picker)
    thrown when the calendar is shown
  • onHideCalendar:
    callback(event, picker)
    thrown when the calendar is hidden
  • onApply:
    callback(event, picker)
    thrown when the apply button is clicked
  • onCancel:
    callback(event, picker)
    thrown when the cancel button is clicked
  • onEvent:
    callback(event, picker)
    thrown when any of the 6 events above are triggered
  • onCallback:
    callback(start, end, label)
    thrown when the start/end dates change

You MUST pass a single child element to the

 component- and it MUST be a DOM element.
Passing custom react components is not currently supported b/c this lib needs a single dom node to initialize.

NOTE: This component should be used as an Uncontrolled Component. If you try to control the value of your child

, the you will probably encounter issues.

There are 2 methods from the upstream lib that can be called:

, but you need to use refs when doing so. Please view the storybook for an example of this.


For more usage examples, please view the storybook:

Simple button example

    click to open

Simple input example


Initialize with a startDate and endDate


Example event handler:

class SomeReactComponent extends React.Component {
  handleEvent(event, picker) {
  handleCallback(start, end, label) {
    console.log(start, end, label);
  render() {
    return (

Release Notes

Release notes can be found in the Changelog.


Other React Date Pickers

NOTE: Please submit a PR if there are other date pickers you can recommend


Copyright (c) 2014 skratchdot
Uses the original bootstrap-daterangepicker license.

We use cookies. If you continue to browse the site, you agree to the use of cookies. For more information on our use of cookies please see our Privacy Policy.