How to get selected date using react-datetime?

Question

I am using react-datetime out of the box.

Right now, I am trying to get the selected date to be saved into my date state.

import DateTime from 'react-datetime';
import '../DateTime.css';

class SomeClass extends React.Component {
  render(){
    return (
      <div>
        <DateTime onChange={this.props.handleDate}/>
      ...

The program above works - it displays a simple box that shows a calendar when someone clicks it.

Here is handleDate method:

  ...
  handleDate(e){
    this.setState({date: e.target.value}, () => console.log(this.state.date))
  };

It works on my regular ol' react-bootstrap component: <FormControl type="date" onChange={this.props.handleDate} /> but when I use DateTime, it says that its value is undefined. "Schedule.js:135 Uncaught TypeError: Cannot read property 'value' of undefined"

I am looking at the APIs from the npm site but don't see any example showing how to get the data. I might be overreading it.

How can I get the value of the selected dates using DateTime? e.target.value does not seem to work on this case.

Answer 1

From the docs: 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).

Using this information, the handler should look like so:

handleDate(date){
   this.setState({date}); # ES6 
};

Answer 2

It is late but it will help someone.

import Datetime from 'react-datetime';

 class User extends React.Component {

    constructor(props) {
        super(props);
        this.state = {  
              date: "",
              time: "",
        }
     }
changeDate = (event) => {
     console.log(event.toDate()) // Tue Nov 24 2020 00:00:00 GMT+0400 (Gulf Standard Time)
     console.log(event.format("DD-MM-YYYY")) //24-11-2020
     this.setState({...this.state, date: event.format("DD-MM-YYYY")}) 
}

changeTime = (event) => {
    console.log(event.format("HH-mm-ss a")) //02-00-00 am
    this.setState({...this.state, time: event.format("HH-mm-ss a")})
}

  render() {
    return (
            <div>
              <Datetime
                     id="datepicker"
                           viewMode="days"
                           timeFormat={false}
                            dateFormat="DD-MM-YY"
                            value={this.state.date}
                           onChange={this.changeDate}

                    />


                <Datetime
                     id="timepicker"
                     viewMode="time"
                     dateFormat={false}
                     onChange={this.changeTime}
                     />
            </div>

     )
  }


}