react-bootstrap-daterangepicker v8.0.0
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):
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, 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.
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 skratchdot
Uses the original bootstrap-daterangepicker license.
2 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
6 years ago
6 years ago
6 years ago
7 years ago
7 years ago
7 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
8 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
9 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago
10 years ago