Setting state with the value of a react-dateTime component

Question

please I need help. I'm using a react-dateTime component, and I am simply trying to get the value of that component just like every other field in a form. But I am unable to get the value of the selected date let alone store it in a state with the other attributes on other fields.

Here is my code:

Datetime component

  <Datetime
    onChange={this.handleChange}
    value={startDate}
    timeFormat={true}
    name="startDate"
    inputProps={{ placeholder: "Start Date" }}
   />

event handler

  handleChange = event => {
    this.setState({ [event.target.name]: event.target.value });
  };

second onchange handler

 handleSelectDate = event => {
    if (event.target.name === "startDate") {
      this.setState({ startDate: event.target.value});
    } else {
      this.setState({ endDate: event.target.value });
    }
  }```

The state object

 this.state= { startDate: '' }

I have tried different approaches, currently I get an error that event.target is undefined, so there is no event at all, I have also tried to initialize the handler by calling event there onChange

Thanks

In whicj function are you getting undefined?? `handleChange` or `handleSelectDate` ? — Anitta Paul, Jan 13 '20 at 05:48
Both of them, I was trying different implementations. There is another date which is the endDate, but I didnt add the state for that here since if one works the other will work as well. — Martins, Jan 13 '20 at 07:56
the library does not pass the default event, but its own variable. just console.log(event) and you will see it is most likely a moment/date object — oshell, Jan 13 '20 at 08:34

score 1 · Accepted Answer · answered Jan 13 '20 at 08:09

It doesn't work like regular input to get its value by name

onChange: Callback trigger when the date changes. The callback receives the selected moment object as only parameter, if the date in the input is valid. If the date in the input is not valid, the callback receives the value of the input (a string). Docs

Try this:

class App extends React.Component {

  state = {
    startDate: ""
  }
  // You need to bind "this"
  handleChange = this.handleChange.bind(this)

  // Receives the selected "moment" object as only parameter
  handleChange(date) {
    this.setState({ startDate: date })
  }

  render() {
    return (
      <div>
        <Datetime
          value={this.state.startDate}
          onChange={this.handleChange}
          timeFormat={true}
          inputProps={{ placeholder: "Start Date" }}
        />
        <hr />
        Select date:{" "}
        {this.state.startDate ? this.state.startDate.toString() : "no selected date"}
      </div>
    )
  }
}

Check this codeSandbox example.

Although it works, it's kinda outdated and I encourage you to check react-datetime-picker or react-date-picker

Yes, I have been able to resolve this isseu, I had to point to date._d which is a moment property then is initialized it with the .toISOString() format which is what was requred. Thanks. — Martins, Jan 13 '20 at 15:36

Setting state with the value of a react-dateTime component

1 Answers1