integrate jquery ui datepicker into React JS

Question

I'm trying to integrate the jquery ui datepicker on an 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 in my page called PatPage.js

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'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

Answer 1

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

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

Also, add the jquery-ui to your entry list before the main entry.js

The following is an ES6 Class of what you will roughly need

//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

I mad made it work this way:

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 />              
    );
  }
}

And I call my component from another file like this

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