Datepicker for React-Strap

javascript reactjs react-bootstrap bootstrap-datepicker
Nyxynyx picture Nyxynyx · Nov 13, 2017 · Viewed 14.8k times · Source

I am using react-strap npm package to use Bootstrap 4 components in my React app.

When I try to add the datepicker react-bootstrap-date-picker

npm install --save react-bootstrap-date-picker

then try to use it in my component:

var DatePicker = require("react-bootstrap-date-picker");

I get the error

Error in ./~/react-bootstrap-date-picker/lib/index.js

Module not found: 'react-bootstrap/lib/Button' in C:\Users\y\Desktop\Code\test\node_modules\react-bootstrap-date-picker\lib

@ ./~/react-bootstrap-date-picker/lib/index.js 15:14-51

Is this because react-bootstrap-date-picker is not compatible with react-strap? In this case, which npm packages should I install for bootstrap 4 components so that the datepicker module can work?

Answer

shuning picture shuning · Nov 15, 2017

react-bootstrap-date-picker is using react-bootstrap, react-bootstrap depends on bootstrap3. reactstrap is for bootstrap4 That is why it doesnt work.

You can use react-widgets DateTimePicker instead.

Related questions

How do I create a dynamic drop down list with react-bootstrap

The example code in the react-bootstrap site shows the following. I need to drive the options using an array, but I'm having trouble finding examples that will compile. <Input type="select" label="Multiple Select" multiple> <option value="…

Read More
How to get select element's value in react-bootstrap?

So I'm trying to get a select element's value in reactjs, but just can't figure it out. The this.refs.selectElement.getDOMNode().value is always coming as undefined. All other controls on the form like text are working fine. Any …

Read More
How to get values/properties from a react-bootstrap checkbox?

I'm trying to use the react-bootstrap checkbox (https://react-bootstrap.github.io/components.html#forms-controls) and I need to fire an event when it changes state. It would also be great to be able to programatically un/check it and/or …

Read More