react-bootstrap-daterangepicker
Advanced tools
Changelog
7.0.0-beta.0 (2020-08-11)
Closed issues:
autoUpdateInput, singleDatePicker, startDate on <div> tag. Remove these props from the element. #190apply event and stores value of previous selection #120Readme
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):
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>
);
}
}
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:
You can listen to the following 8 events:
callback(event, picker) thrown when the widget is showncallback(event, picker) thrown when the widget is hiddencallback(event, picker) thrown when the calendar is showncallback(event, picker) thrown when the calendar is hiddencallback(event, picker) thrown when the apply button is clickedcallback(event, picker) thrown when the cancel button is clickedcallback(event, picker) thrown when any of the 6 events above are triggeredcallback(start, end, label) thrown when the start/end dates changeYou 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 />, the 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:
https://projects.skratchdot.com/react-bootstrap-daterangepicker/
<DateRangePicker>
<button type="button" className="btn btn-primary">
click to open
</button>
</DateRangePicker>
<DateRangePicker>
<input type="text" className="form-control" />
</DateRangePicker>
<DateRangePicker
initialSettings={{ startDate: '01/01/2020', endDate: '01/15/2020' }}
>
<input type="text" className="form-control" />
</DateRangePicker>
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 can be found in the Changelog.
NOTE: Please submit a PR if there are other date pickers you can recommend
Copyright (c) 2014 skratchdot
Uses the original bootstrap-daterangepicker license.
FAQs
A date/time picker for react (using bootstrap). This is a react port of: https://github.com/dangrossman/bootstrap-daterangepicker
We found that react-bootstrap-daterangepicker demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
CISA launched a new project called Vulnrichment to enrich CVEs with details that help prioritize patching and mitigation efforts, as the NVD backlog of unenriched CVEs awaiting analysis surpasses 10,000.
Security News
Socket is joining forces with CISA and other industry leaders at the RSA Conference to sign the Secure by Design pledge, committing to uphold the highest security standards in our products.
Research
The Socket research team breaks down a sampling of malicious packages that download and execute files, among other suspicious behaviors, targeting the popular Discord platform.