Currently working on creating a react ponent for a form. I am applying a datepicker via a regular javascript file to my inputs which are being rendered in react (jsx).

I am trying to pull the state from the inputs when a date is selected from the datepicker. Unfortunately react is not picking up the value. I know it is probably something to do with calling the datepicker from a regular javascript file onto the rendered inputs. Thing is, when I am calling a regular .val on the input once I have selected a date, it gives me the value.

Also should mention, I am using bootstrap-datepicker

Any suggestions or remendations would be greatly appreciated :)

form.js.jsx

var StepOne = React.createClass({
  getInitialState: function() {
    return {start: '', end: ''};
  },
startDateChange: function(e) {
    this.setState({start: e.target.value});
  },
  endDateChange: function(e) {
    this.setState({end: e.target.value});
  },
  render: function() {
    return (
      <div className="stepOne">
        <ul>
          <li>
            <label>Starts</label>
            <input id="event-start" type="text" value={this.state.start} onChange={this.startDateChange} />
            <label>Ends</label>
            <input id="event-end" type="text" value={this.state.end} onChange={this.endDateChange} />
          </li>
        </ul>
      </div>
    );
  },
}); // end of ponent

stepone_datepicker.js

$(function() {
  var date = new Date();
  date.setDate(date.getDate()-1);
  $('#event-start, #event-end').each(function() {
    $(this).datepicker({
      autoclose: true,
      minDate: new Date(),
      startDate: date
    });
  });
});

Currently working on creating a react ponent for a form. I am applying a datepicker via a regular javascript file to my inputs which are being rendered in react (jsx).

I am trying to pull the state from the inputs when a date is selected from the datepicker. Unfortunately react is not picking up the value. I know it is probably something to do with calling the datepicker from a regular javascript file onto the rendered inputs. Thing is, when I am calling a regular .val on the input once I have selected a date, it gives me the value.

Also should mention, I am using bootstrap-datepicker

Any suggestions or remendations would be greatly appreciated :)

form.js.jsx

var StepOne = React.createClass({
  getInitialState: function() {
    return {start: '', end: ''};
  },
startDateChange: function(e) {
    this.setState({start: e.target.value});
  },
  endDateChange: function(e) {
    this.setState({end: e.target.value});
  },
  render: function() {
    return (
      <div className="stepOne">
        <ul>
          <li>
            <label>Starts</label>
            <input id="event-start" type="text" value={this.state.start} onChange={this.startDateChange} />
            <label>Ends</label>
            <input id="event-end" type="text" value={this.state.end} onChange={this.endDateChange} />
          </li>
        </ul>
      </div>
    );
  },
}); // end of ponent

stepone_datepicker.js

$(function() {
  var date = new Date();
  date.setDate(date.getDate()-1);
  $('#event-start, #event-end').each(function() {
    $(this).datepicker({
      autoclose: true,
      minDate: new Date(),
      startDate: date
    });
  });
});

• javascript
• jquery
• reactjs
• datepicker

Share Improve this question Follow edited Feb 24, 2016 at 17:14 luke asked Feb 24, 2016 at 17:01 lukeluke 1,57822 gold badges2222 silver badges3939 bronze badges 4

• What is the date-picker control that you use ? – Nour Sammour Commented Feb 24, 2016 at 17:11
• 2 First of all, I notice that you use this.state.end on one end and you set the state to end_date. Secondly, I would not mix jquery an react for this. Maybe you can try some react datepicker ponents available on github. If you really need to use jQuery, use the ponentDidMount lifecycle hook of the react ponent to run your jquery code, not to mess with the react way of rendering. – Alex Moldovan Commented Feb 24, 2016 at 17:13
• 1 @AlexMoldovan is correct. Because of the way React's virtual DOM works, if jQuery modifies the DOM externally, React does not 'know' about it, and conversely as React re-renders jQuery won't know about those updates. If you want to use jQuery in React, you'll need to use it within React's life cycle methods and should use ReactDOM.findDOMNode() to reference the DOM elements. – RickTakes Commented Feb 24, 2016 at 17:21
• Makes sense. I knew jQuery would be effecting the DOM differently but didn't think it would effect getting the actual value from the input. Looks like i'm finally just going to get Browserify running and use an actual react datepicker. Thanks for helping me understand this! – luke Commented Feb 24, 2016 at 17:59

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

The code in the stepone_datepicker.js file is probably executing before your React ponent has rendered into the DOM.

Using id to reference a DOM node inside a React ponent is very rarely a good idea and generally ends up as confusing spaghetti code.

React gives us a way to get hold of the DOM nodes with it's refs mechanism.

First, move the date picker code into a new method in your ponent.

 makeDatePicker: function(element) {
   var date = new Date();
   date.setDate(date.getDate() - 1);

   $(element).datepicker({
     autoclose: true,
     minDate: new Date(),
     startDate: date
   });
 }

Now we can add the ref attribute to each input and use this new method as the callback.

<label>Starts</label>
<input ref={this.makeDatePicker} type="text" value={this.state.start} onChange={this.startDateChange} />
<label>Ends</label>
<input ref={this.makeDatePicker} type="text" value={this.state.end} onChange={this.endDateChange} />

When the element is ready, React will call makeDatePicker and pass the DOM node as the first argument.

After that, you can intercept the DOM node and apply the jQuery plugin.

This way you could even render multiple instances of the StepOne ponent and not have to worry about collisions between id attributes.

It's not the correct way to do it maybe better to use react-datepicker

But you can do this to trigger onChange event manually

$(function() {
  var date = new Date();
  date.setDate(date.getDate()-1);
  $('#event-start, #event-end').each(function() {
    $(this).datepicker({
      autoclose: true,
      minDate: new Date(),
      startDate: date,
      onSelect: function( selectedDate ) {
       var event = new Event('input', { bubbles: true });
       this.dispatchEvent(event);
      }
    });
  });
});

and maybe better to use react-dom to get the DOM node anyway the code that i post with the minimum changes