title: integrate jquery ui datepicker into React JS
body: <p>I'm trying to integrate the jquery ui datepicker on an input text using React js , I have this jsbin , <a href="http://jsbin.com/diyifa/edit?html,js" rel="noreferrer">http://jsbin.com/diyifa/edit?html,js</a>.</p>
  
  <p>I have this component called Datepicker.js</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import {UserProfileForm} from 'react-stormpath';
  
  export default class DateInput extends React.Component {
      render() {
          return (
              &lt;input type="text" className="datepicker"/&gt;
          )
      }
  }
  export default class Calendar extends React.Component {
      componentDidMount: function () {
          $('.datepicker').datepicker();
          render()
          {
              return (
                  &lt;DateInput/&gt;
              )
          }
      }
  }
  ReactDOM.render(
      &lt;Calendar/&gt;, document.getElementById('dpick')
  );
  </code></pre>
  
  <p>and I want to call this component in my page called PatPage.js</p>
  
  <pre><code>import React from 'react';
  import DocumentTitle from 'react-document-title';
  import {UserProfileForm} from 'react-stormpath';
  import {Calendar} from './Datepicker.js';
  
  &lt;div className="form-group"&gt;
      &lt;label id="id_label_dateofbirth" htmlfor="id_field_dateofbirth" className="col-md-6 control-label2"&gt;
          &lt;span className="e2bcode" id="E2BCodes"&gt;D.2.1&lt;/span&gt;Date of Birth
      &lt;/label&gt;
      &lt;div className="col-md-3 divhidetxtdpatient" id="showhidemasked"&gt;
          &lt;div id="dpick"&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>(there's more code but I'm only showing the part when im implementing this)
  Any hints to make it work would be appreciated, I'm new to react JS, thanks</p>