Datepicker input value not populated on change about react-widgets

[jquense]

Hi there,

I'm not sure what you mean by the value not being populated? Does the date not change when you select something from the calendar? Are you setting an initial value or leaving it undefined? If you are setting the value prop you also need to make sure to provide an onChange handler to respond to changes. Are you familiar in general with how form inputs work in React, such as the normal <input> and <select> tags, the widgets here work similarly.

if you defined your picker exactly like:

<DateTimePicker name="toDate" format='yyyy-MM-dd' time={false} />

then the input[name=toDate] will have a value which is a formatted date string (once you select one)

[sam3k]

I guess I'm not familiar enough with React (just started) I was able to get the value via onChange etc; but before, my expectation was that the input field input[name=toDate] value would update as you chose a new date.

This doesn't seem to be the case, the input's value remains empty no matter what date you choose. Is this normal behavior for the input to never update his value attribute?

[jquense]

the value should be updated, did you use the code example above exactly? if not can you include the exact bit of code you are using to declare the date picker? I have tried all the possible situations O can think of that match what you are doing and can confirm they work so we may just be misunderstanding each other.

[sam3k]

@jquense will do. Don't have the snippet with me this weekend so will have to wait till next week. Thanks for your quick response.

[jquense]

no problem,

Generally speaking React has two concepts for inputs, controlled and uncontrolled inputs. A controlled input is one where the parent component manages all the value state for the input. In this case you provide both a value and an onChange handler.

render() {
  function change(e){
    this.setState({ value: e.target.value }) //set state value to the input value
  }
  // the value of the input will ALWAYS be the value of `this.state.value` so we need to change that
  // value in the onChange handler
  return (<input value={this.state.value} onChange={change.bind(this)}/>)
}

In the case of uncontrolled inputs you let the input manage its own value like you are used to in normal html. Notice that you do not provide a value prop to the component.

render() {
  function change(e){
    console.log(e.target.value )
  }
  // the value of the input be managed by the input component
  return (<input  type="text" onChange={change.bind(this)}/>)
}

further reading here: http://facebook.github.io/react/docs/forms.html#controlled-components