React Datepicker input state not changing?

Question

I have a multi-step form with child form components. On one of the components, I'm trying to implement YouCanBookMe DatePicker.

Now, when I try to update the state of datepicker's value like I do with other regular text inputs, the state does not get updated. If I typed the date, the state gets updated, but not when I actually select the date from the picker. I'm really clueless why. Can any of you point out why it doesn't?

Your help is greatly appreciated. I'm new to React and I've tried 3 different Datepicker libraries and I'm slowly going insane, because none seems to work or I'm not able to transform it to a Parent-Child structure. Thanks!

Parent:

 constructor(props) {
    super(props);

    this.state = {
      wants_interview_date: moment().format("DD-MM-YYYY")
   }
  }
  
 handleChange(field) {
    return (evt) => this.setState({ [field]: evt.target.value });
 }
 
 render(){
    return <FormStep8
        wants_interview_date={this.state.wants_interview_date}
        onDateChange={this.handleChange('wants_interview_date')} />;
 }

Child Component:

render() {
  <Datetime
    timeFormat={false}
    dateFormat="DD-MM-YYYY"
    inputProps={{id: 'wants_interview_date', onBlur: this.props.onDateChange, value: this.props.wants_interview_date}} //To get the regular HTML input props
  />
}

@MuratK. I don't. I don't fully understand that StateChange method, but it works with normal text inputs. I got it from [this tutorial](https://goshakkk.name/wizard-form-collect-info/) — Doge, Aug 02 '17 at 09:27

score 2 · Answer 1 · answered Aug 03 '17 at 07:06

The good friends at Reactiflux helped me solve the issue. Apparently Moment.js was returning an Object on handleChange and therefore the state was not showing anything. The output needed to use the _d Moment.js method. Here is the correct handleChange method:

handleDateChange(field) {
    return evt => {
      const value = evt._d;
      this.setState({ wants_interview_date: value });
    };
  }

score 0 · Answer 2 · answered Aug 02 '17 at 10:08

0

this code snippet works fine for me, import DateTime (capital T)

import DateTime from 'react-datetime'; 

<DateTime name="newapp_time" 
onChange={(e) => { this.setState({ newapp_time: moment(e).toJSON() }) }} />

the result is a timestamp in this case

answered Aug 02 '17 at 10:08

Chaitanya Mankala

1,594
17
24

Would it work if you update the state with the use of props? Because that is my current issue – Doge Aug 02 '17 at 10:28
do u mean, setting initial state with props? – Chaitanya Mankala Aug 02 '17 at 10:29
You said, if you pick the date from picker, then the state is not working, right? If thats the case, my solution would work. I also faced issues with datetime packages. But this one works fine for me. Please,Try it and let me know. :) – Chaitanya Mankala Aug 02 '17 at 10:31
I am trying to set the state from a child component. The state is set on the parent component. And the state is not being updated. That's my issue – Doge Aug 02 '17 at 10:32
Im sorry, Im unable to completely understand you code, because there are mistakes, like (changes here)=> 1.this.handleChange.bind(this,'wants_interview_date') – Chaitanya Mankala Aug 02 '17 at 10:38
2.handleChange(field,evt) { this.setState({ [field]: evt.target.value }); } – Chaitanya Mankala Aug 02 '17 at 10:39
Added your changes, value and state are still not changing – Doge Aug 02 '17 at 10:46

React Datepicker input state not changing?

2 Answers2

Linked