React Bootstrap Daterangepicker

A date/time picker for react (using bootstrap). This is a react wrapper around the bootstrap-daterangepicker project.
Alternatives To React Bootstrap Daterangepicker
Project NameStarsDownloadsRepos Using ThisPackages Using ThisMost Recent CommitTotal ReleasesLatest ReleaseOpen IssuesLicenseLanguage
Bootstrap Magic1,670
4 years ago35otherHTML
Bootstrap themes generator made with AngularJS
Angular Bootstrap Datetimepicker1,287170116 months ago31November 17, 201929mitTypeScript
Native Angular date/time picker component styled by Twitter Bootstrap
Twitter Bootstrap For Omnigraffle591
2 years ago1mit
Omnigraffle stencil, template, and color picker modeled after Twitter Bootstrap
Vanillajs Datepicker5733a day ago9December 31, 202139mitJavaScript
A vanilla JavaScript remake of bootstrap-datepicker for Bulma and other CSS frameworks
Angular Daterangepicker5342744 years ago2July 14, 20168mitCoffeeScript
Angular.js wrapper for dangrossman/bootstrap-daterangepicker
Jtsage Datebox480
a year ago27November 25, 20194otherJavaScript
A multi-mode date and time picker for Bootstrap (3&4), jQueryMobile, Foundation, Bulma, FomanticUI, and UIKit (or others)
React Bootstrap Daterangepicker471140599 months ago57August 24, 202218otherJavaScript
A date/time picker for react (using bootstrap). This is a react wrapper around the bootstrap-daterangepicker project.
Angular Bootstrap Colorpicker423208114 years ago14December 06, 201714mitCSS
Native AngularJS colorpicker directive. No dependency on jQuery or jQuery plugin is required.
Awesome React Bootstrap Components377
4 years ago2
⚛️ React.js components made using 🅱️ Bootstrap
Pick A Color263
4 years ago57mitJavaScript
an easy-to-use jQuery color picker for Twitter Bootstrap
Alternatives To React Bootstrap Daterangepicker
Select To Compare

Alternative Project Comparisons


NPM version Build Status Code Climate Coverage Status


🚨 Deprecation Notice 🚨

I put this project on github because I used it briefly for a project back in 2014. I haven't used it for years, and have recommended looking for a "pure react" date picker library. I might continue to merge small PRs, but will not be giving this library much/any support. I recommend using one of the other react date picker libraries listed below.


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 (
        initialSettings={{ startDate: '1/1/2014', endDate: '3/1/2014' }}
        <button>Click Me To Open Picker!</button>


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

You can pass all the settings from the original plugin to the initialSettings prop:

  • <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 <DateRangePicker /> 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 <input />, then you will probably encounter issues.

There are 2 methods from the upstream lib that can be called: setStartDate and setEndDate, 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

  <button type="button" className="btn btn-primary">
    click to open

Simple input example

  <input type="text" className="form-control" />

Initialize with a startDate and endDate

  initialSettings={{ startDate: '01/01/2020', endDate: '01/15/2020' }}
  <input type="text" className="form-control" />

Example event handler:

class SomeReactComponent extends React.Component {
  handleEvent(event, picker) {
  handleCallback(start, end, label) {
    console.log(start, end, label);
  render() {
    return (
      <DateRangePicker onEvent={this.handleEvent} onCallback={this.handleCallback}>
        <input />

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.

Popular Bootstrap Projects
Popular Picker Projects
Popular Web User Interface Categories
Related Searches

Get A Weekly Email With Trending Projects For These Categories
No Spam. Unsubscribe easily at any time.