I'm trying to integrate the jquery ui datepicker on an input text using React js , I have this jsbin , ,js.

I have this ponent 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 {
    ponentDidMount: function () {
        $('.datepicker').datepicker();
        render()
        {
            return (
                <DateInput/>
            )
        }
    }
}
ReactDOM.render(
    <Calendar/>, document.getElementById('dpick')
);

and I want to call this ponent 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

I'm trying to integrate the jquery ui datepicker on an input text using React js , I have this jsbin , http://jsbin./diyifa/edit?html,js.

I have this ponent 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 {
    ponentDidMount: function () {
        $('.datepicker').datepicker();
        render()
        {
            return (
                <DateInput/>
            )
        }
    }
}
ReactDOM.render(
    <Calendar/>, document.getElementById('dpick')
);

and I want to call this ponent 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

• javascript
• reactjs

• Are you using angular, react, or both? – Tracker1 Commented Mar 17, 2016 at 0:31
• I'm using React , I'm sorry, I meant React js instead of Angular , thanks .I changed the title. – Kevin Lopez Commented Mar 17, 2016 at 0:34

3 Answers 3

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 {
  ponentDidMount() {
    $(this.refs.input).datepicker();
  }

  ponentWillUnmount() {
    $(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')
)

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 {  
  ponentDidMount() {
    $('.datepicker').datepicker({
      changeMonth: true,
      changeYear: true,
      showButtonPanel: true,
      yearRange: "-116:+34",
      dateFormat: 'dd/mm/yy'
    });
  } 
  render() {
    return ( 
          <Datepicker />              
    );
  }
}

And I call my ponent from another file like this

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

check src attribute of script tag of jquery ui datepicker , maybe it pointing to wrong destination