CODEWITHSUNDEEP
reactjsdatetimereact-datetime
Iggy
Iggy

Reputation: 5251

How to get selected date using react-datetime?

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.

Upvotes: 8

Views: 26562

Answers (3)

Muhammad Shahzad
Muhammad Shahzad

Reputation: 9652

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>

     )
  }


}

Upvotes: 5

Sachin Kumar
Sachin Kumar

Reputation: 463

Adding to Oluwafemi Sule's answer, to get the date object from moment object you need to use .toDate() and not use any internal properties such as _d as per moment.

Moment uses a technique called epoch shifting that causes this property to sometimes differ from the actual date value that the Moment reflects. In particular if Moment TimeZone is in use, this property will almost never be the same as the actual value that Moment will output from its public .format() function. As such, the values of _d and any other properties prefixed with _ should not be used for any purpose.

To print out the value of a Moment, use .format(), .toString() or .toISOString().

To retrieve a native Date object from Moment, use .toDate(). This function returns a properly shifted date for interaction with third party APIs.

Moment.js Guide

Upvotes: 4

Oluwafemi Sule
Oluwafemi Sule

Reputation: 38922

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 
};

Upvotes: 9

Related Questions