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

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

);
}
}
`

Documentation

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 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 , 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.

$3

For more usage examples, please view the storybook:
https://projects.skratchdot.com/react-bootstrap-daterangepicker/

#### Simple button example

`javascript


click to open


`

#### Simple input example

`javascript



`

#### Initialize with a startDate and endDate

`javascript
initialSettings={{ startDate: '01/01/2020', endDate: '01/15/2020' }}
>


`

#### 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.

Links

- Source Code
- Changelog
- Live Demo
- Original Plugin

Other React Date Pickers

- react-date-range
- react-dates
- 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 license.