react-bootstrap-daterangepicker not working

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"
  }
}

change import dateRangePickerCss from '../../../../media/css/shared/daterangepicker.css' to import '../../../../media/css/shared/daterangepicker.css' — Ved, Apr 19 '17 at 13:56
check this: http://stackoverflow.com/questions/28519287/what-does-only-a-reactowner-can-have-refs-mean — Ved, Apr 19 '17 at 14:10
@Ved Moved react to peerDependencies still get the same error — vini, Apr 19 '17 at 14:18
@Ved Solved the issue was a problem with my package.json works now — vini, Apr 19 '17 at 14:34

score 0 · Answer 1 · answered Apr 19 '17 at 13:38

0

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. :)

answered Apr 19 '17 at 13:38

Saif Ali Khan

818
3
9
34

Not really the component is not leading itself. – vini Apr 19 '17 at 13:40
yes because you can't insert an anchor tag in between the DatePicker you have to first close the DatePicker and then use the anchor tag. – Saif Ali Khan Apr 19 '17 at 13:41
According to there documentation you can add that https://github.com/skratchdot/react-bootstrap-daterangepicker – vini Apr 19 '17 at 13:47
yeah ok cool.. then I think your problem is similar to this problem http://stackoverflow.com/questions/28519287/what-does-only-a-reactowner-can-have-refs-mean/39405375#39405375 Let me know if you get what desired. – Saif Ali Khan Apr 19 '17 at 13:51

react-bootstrap-daterangepicker not working

1 Answers1