CODEWITHSUNDEEP
javascriptreactjsdatetime
Deee
Deee

Reputation: 329

Reactjs datetime value undefined

I am using React js and I have difficulties getting value/data from my datetime picker.

Here's my input field: 

<Form className="form1" onSubmit={this.handleSubmit}>
  <label>Date Started: </label>
  <Datetime dateFormat='YYYY-MM-DD'
            timeformat='hh-mm-ss'
            value={this.state.datestartedV}
            onChange={this.props.handleDatestarted} />

  <label>Date Ended: </label>
  <Datetime dateFormat='YYYY-MM-DD'
            timeformat='hh-mm-ss'
            value={this.state.dateendedV}
            onChange={this.props.handleDateended} />

  <Button onClick={this.handleSubmit}>SubmitRequest</Button>
</Form>

Here's my listener:

handleSubmit(event) {
  event.preventDefault();
  alert('Date is: ' + this.state.datestartedV + this.state.dateendedV); 
}

handleDatestarted(event) {
  this.setState({datestartedV: event.target.value});
}

handleDateended(event) {
  this.setState({dateendedV: event.target.value}); 
}

constructor(props) {
  super(props);
  this.state = {datestartedV: ''};
  this.state = {dateendedV: ''};
  this.handleDatestarted = this.handleDatestarted.bind(this);
  this.handleDateended = this.handleDateended.bind(this);
}

Upvotes: 1

Views: 2317

Answers (2)

Knut Herrmann
Knut Herrmann

Reputation: 30960

Initialy, this.state.datestartedV is undefined because you overwrite the initial state with a second state definition.

Change your constructor to:

constructor(props) {
  super(props);
  this.state = {
       datestartedV: '',
       dateendedV: ''
  };
  this.handleDatestarted = this.handleDatestarted.bind(this);
  this.handleDateended = this.handleDateended.bind(this);
}

Assuming your question's code is all in one component then you have to use your functions without .props this way:

     onChange={this.handleDatestarted}

and 

     onChange={this.handleDateended}

Upvotes: 1

Jude Niroshan
Jude Niroshan

Reputation: 4460

You don't need to take the target.value. Because it returns a moment() (more info)which represent a JavaScript Date object.

You can simply try this. (event itself is a Date Object. You can rename it to startDate to make more sense)

handleDatestarted(event){
    this.setState({datestartedV: event});
}

Upvotes: 0

Related Questions