Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
react-bootstrap-daterangepicker
Advanced tools
Changelog
8.0.0 (2022-08-24)
Closed issues:
initialSettings
change. #224Merged pull requests:
Readme
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.
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 />
, 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.
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
The npm package react-bootstrap-daterangepicker receives a total of 29,454 weekly downloads. As such, react-bootstrap-daterangepicker popularity was classified as popular.
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
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.