react-bootstrap-daterangepicker not working - reactjs

Question

import React from 'react';
import $ from "jquery";
import moment from "moment";
import DateRangePicker from "react-bootstrap-daterangepicker";
import dateRangePickerCss from '../../../../media/css/shared/daterangepicker.css'
const Filter = () => {
const openDropdown = (e) => {
var parent = e.target.parentElement;
$(parent).siblings().removeClass('open');
$(parent).toggleClass('open');
};
const handleEvent = (event, picker) => {
console.log(picker.startDate);
};
return (
<DateRangePicker onEvent={handleEvent}>
<a class="selected-txt">Filter by Date</a>
</DateRangePicker>
)
}
export default Filter
The datepicker: https://github.com/skratchdot/react-bootstrap-daterangepicker
When i am using the picker it gives me the following error on the console
Uncaught Error: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's `render` method, or you have multiple copies of React loaded
EDIT
This is my package.json
{
"name": "a",
"version": "0.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev_build": "webpack --display-modules --progress --colors --watch",
"prod_build": "sh frt_build_script.sh"
},
"author": "",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.23.1",
"babel-loader": "^6.3.2",
"babel-plugin-react-html-attrs": "^2.0.0",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.23.0",
"css-loader": "^0.28.0",
"eslint": "^3.15.0",
"eslint-config-standard": "^7.1.0",
"eslint-loader": "^1.6.3",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
"eslint-plugin-promise": "^3.5.0",
"eslint-plugin-react": "^6.10.0",
"eslint-plugin-standard": "^2.1.1",
"extract-text-webpack-plugin": "^2.1.0",
"file-loader": "^0.10.1",
"webpack": "^2.2.1"
},
"peerDependencies": {
"react": "^15.4.2"
},
"dependencies": {
"axios": "^0.12.0",
"jquery": "^3.2.1",
"react-dom": "^15.4.2",
"react-modal": "^1.7.3",
"react-redux": "^5.0.3",
"react-router": "^3.0.2",
"redux": "^3.6.0",
"redux-logger": "^2.8.2",
"redux-promise-middleware": "^4.2.0",
"redux-thunk": "^2.2.0"
}
}

Answer 1

I think your reason of using datepicker is because you want the user to only allow date to be chosen in between specified start date till end date. Am I right? If I am, then you can do it simply by giving input type date.. If it is the reason, let me know. Will update the answer with the solution. :)