Integrate jquery ui datepicker in React JS

Question

I am trying to integrate jquery ui datepicker into input text using React js, I have this jsbin, http://jsbin.com/diyifa/edit?html,js .

I have this component called Datepicker.js

import React from 'react';
import ReactDOM from 'react-dom';
import {UserProfileForm} from 'react-stormpath';

export default class DateInput extends React.Component {
    render() {
        return (
            <input type="text" className="datepicker"/>
        )
    }
}
export default class Calendar extends React.Component {
    componentDidMount: function () {
        $('.datepicker').datepicker();
        render()
        {
            return (
                <DateInput/>
            )
        }
    }
}
ReactDOM.render(
    <Calendar/>, document.getElementById('dpick')
);

and I want to call this component on my PatPage.js page

import React from 'react';
import DocumentTitle from 'react-document-title';
import {UserProfileForm} from 'react-stormpath';
import {Calendar} from './Datepicker.js';

<div className="form-group">
    <label id="id_label_dateofbirth" htmlfor="id_field_dateofbirth" className="col-md-6 control-label2">
        <span className="e2bcode" id="E2BCodes">D.2.1</span>Date of Birth
    </label>
    <div className="col-md-3 divhidetxtdpatient" id="showhidemasked">
        <div id="dpick"></div>
    </div>
</div>

(there is more code, but I show only a part when I implement it) Any hints of his work will be appreciated, I'm new to reacting to JS, thanks

Answer 1

Assuming your build system is webpack, you should use a provisioning plugin to make sure $ and jQuery are loaded ...

new webpack.ProvidePlugin({
  Promise: 'bluebird',
  jQuery: 'jquery',
  $: 'jquery',
  React: 'react'
})

, jquery-ui . js

ES6,

//DatePicker.js
export default class DatePicker extends React.Component {
  componentDidMount() {
    $(this.refs.input).datepicker();
  }

  componentWillUnmount() {
    $(this.refs.input).datepicker('destroy');
  }

  render() {
    const props = this.props;
    return <input ref="input" type="date" {...props} />
  }
}

//entry.js
import ReactDOM from 'react-dom';
import DatePicker from './DatePicker';

ReactDOM.render(
  <DatePicker 
    value="2015-01-01" 
    onChange={(evt)=>console.log('new date', evt.target.value)} 
  />, 
  document.getElementById('dpick')
)

Answer 2

:

Datepicker.js

import React from 'react';

export default class Datepicker extends React.Component {  
  render() {
    return (      
      <input type="text" id="id_field_dateofbirth" className="datepicker form-control" placeholder="DD-MM-YYYY"/>
    );    
  }
}

Calendar.js

import React from 'react';
import Datepicker from './Datepicker';

export default class Calendar extends React.Component {  
  componentDidMount() {
    $('.datepicker').datepicker({
      changeMonth: true,
      changeYear: true,
      showButtonPanel: true,
      yearRange: "-116:+34",
      dateFormat: 'dd/mm/yy'
    });
  } 
  render() {
    return ( 
          <Datepicker />              
    );
  }
}

,

import Calendar from '../components/Calendar'
.....
.....
<Calendar />