# react-bootstrap-daterangepicker [![NPM version](https://badge.fury.io/js/react-bootstrap-daterangepicker.svg)](http://badge.fury.io/js/react-bootstrap-daterangepicker) [![Build Status](https://travis-ci.org/skratchdot/react-bootstrap-daterangepicker.svg?branch=master)](https://travis-ci.org/skratchdot/react-bootstrap-daterangepicker) [![Code Climate](https://codeclimate.com/github/skratchdot/react-bootstrap-daterangepicker.png)](https://codeclimate.com/github/skratchdot/react-bootstrap-daterangepicker) [![Coverage Status](https://coveralls.io/repos/skratchdot/react-bootstrap-daterangepicker/badge.svg?branch=master&service=github)](https://coveralls.io/github/skratchdot/react-bootstrap-daterangepicker?branch=master) [![NPM](https://nodei.co/npm/react-bootstrap-daterangepicker.png)](https://npmjs.org/package/react-bootstrap-daterangepicker) # 🚨 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](#other-react-date-pickers) libraries listed below. ## 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](https://github.com/dangrossman/bootstrap-daterangepicker) ## 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 bootstrap@4 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. ```javascript 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'; // you will also need the css that comes with bootstrap-daterangepicker import 'bootstrap-daterangepicker/daterangepicker.css'; class MyComponent { render() { return ( ); } } ``` ## Documentation For in depth documentation, see the original [bootstrap-daterangepicker](https://github.com/dangrossman/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 `` 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](https://reactjs.org/docs/uncontrolled-components.html). If you try to control the value of your child ``, 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. ### Examples For more usage examples, please view the storybook: https://projects.skratchdot.com/react-bootstrap-daterangepicker/ #### Simple button example ```javascript ``` #### Simple input example ```javascript ``` #### Initialize with a startDate and endDate ```javascript ``` #### Example event handler: ```javascript class SomeReactComponent extends React.Component { handleEvent(event, picker) { console.log(picker.startDate); } handleCallback(start, end, label) { console.log(start, end, label); } render() { return ( ; } } ``` ## Release Notes Release notes can be found in the [Changelog](https://github.com/skratchdot/react-bootstrap-daterangepicker/blob/master/CHANGELOG.md). ## Links - [Source Code](https://github.com/skratchdot/react-bootstrap-daterangepicker) - [Changelog](https://github.com/skratchdot/react-bootstrap-daterangepicker/blob/master/CHANGELOG.md) - [Live Demo](http://projects.skratchdot.com/react-bootstrap-daterangepicker/) - [Original Plugin](https://github.com/dangrossman/bootstrap-daterangepicker) ## Other React Date Pickers - [react-date-range](https://github.com/Adphorus/react-date-range) - [react-dates](https://github.com/airbnb/react-dates) - [react-datepicker](https://github.com/Hacker0x01/react-datepicker) **NOTE: Please submit a PR if there are other date pickers you can recommend** ## License Copyright (c) 2014 skratchdot Uses the original [bootstrap-daterangepicker](https://github.com/dangrossman/bootstrap-daterangepicker) license.

	Stars	Issues	Version	Updated	Created
react-bootstrap-daterangepicker			8.0.0	2 years ago	10 years ago
react-datepicker	7,834	313	6.9.0	8 days ago	10 years ago
react-day-picker			8.10.1	10 days ago	9 years ago

react-bootstrap-daterangepicker vs react-datepicker vs react-day-picker

Downloads in past1 Month3 Months6 Months1 Year2 Years5 YearsAll time

Stats

Popular Searches

Sick of boring JavaScript newsletters?

Downloads in past