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
- Install the needed peer dependencies:
`npm install --save bootstrap-daterangepicker react jquery moment`
- Install the module with:
`npm install --save react-bootstrap-daterangepicker`
- Include the bootstrap@4 css and fonts in your project.
(aka `import 'bootstrap/dist/css/bootstrap.css';`)
- Include the bootstrap-daterangepicker css in your project.
(aka `import 'bootstrap-daterangepicker/daterangepicker.css';`)
- 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';
// you will also need the css that comes with bootstrap-daterangepicker
import 'bootstrap-daterangepicker/daterangepicker.css';
class MyComponent {
render() {
return (
<DateRangePicker
initialSettings={{ startDate: '1/1/2014', endDate: '3/1/2014' }}
>
<button>Click Me To Open Picker!</button>
</DateRangePicker>
);
}
}
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,
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.Examples
For more usage examples, please view the storybook:https://projects.skratchdot.com/react-bootstrap-daterangepicker/
Simple button example
<DateRangePicker>
<button type="button" className="btn btn-primary">
click to open
</button>
</DateRangePicker>
Simple input example
<DateRangePicker>
<input type="text" className="form-control" />
</DateRangePicker>
Initialize with a startDate and endDate
<DateRangePicker
initialSettings={{ startDate: '01/01/2020', endDate: '01/15/2020' }}
>
<input type="text" className="form-control" />
</DateRangePicker>
Example event handler:
class SomeReactComponent extends React.Component {
handleEvent(event, picker) {
console.log(picker.startDate);
}
handleCallback(start, end, label) {
console.log(start, end, label);
}
render() {
return (
<DateRangePicker onEvent={this.handleEvent} onCallback={this.handleCallback}>
<input />
</DateRangePicker>;
}
}
Release Notes
Release notes can be found in the Changelog.Links
Other React Date Pickers
NOTE: Please submit a PR if there are other date pickers you can recommend
License
Copyright (c) 2014 skratchdotUses the original bootstrap-daterangepicker license.