How to take value of two input at once on click of a button in react?

Question

What I'm trying:

Take two date input (Start Date & End Date) at once on a single click of a button.
By default their values should be the of today's date ie if one input is left untouched (and one selected) and then button clicked, values should be user selected and by-default today's date respectively.
Output should be in order yyyy/mm/dd
What should be the most React way to approach this?

My approach:

import React, { Component } from 'react';
import '../App.css';

class DateSelector extends Component {

  constructor(props){
    super(props);
    this.state = {
      startDate:"yyyy-MM-dd",
      endDate:"yyyy-MM-dd"
    }
  }

  dateHandler = (event) => {
    console.log("startDate: "+this.state.startDate+" endDate:"+this.state.startDate);
  }

  startDateOnChange = (event) => {
    this.setState({startDate: event.target.value});
  }

  endDateOnChange = (event) => {
    this.setState({endDate: event.target.value});
  }

  render() {
    return (
      <div>
        START DATE<input type="date" id="startDate" value="{this.state.startDate}" onChange={this.startDateOnChange}/>
        END DATE<input type="date" id="endDate" value="{this.state.startDate}" onChange={this.endDateOnChange}/>
        <button type="submit" onClick={this.dateHandler}>Submit</button>
      </div>
    );
  }
}

export default DateSelector;

The above code gives following error on Date tag's onChange event:

The specified value "{this.state.startDate}" does not conform to the required format, "yyyy-MM-dd".

And <button> tag's onClick gives empty string as startDate: endDate:

NOTE: I am quite new to web designing thing. I did quite googling but didn't find any related tutorial/doc/post. Any guide/reference (for future reference) regarding these kind of situations is much appreciated.

Either make the inputs controlled or get the value using refs — Shubham Khatri, Sep 14 '17 at 16:55
This answer should help https://stackoverflow.com/questions/44471370/reactjs-why-is-onchange-the-prefered-way-to-handle-input-changes/44471458#44471458 — Shubham Khatri, Sep 14 '17 at 16:58
I don't think you need to use refs for this. The documentation encourages you to not use refs unless strictly necessary. — nbkhope, Sep 14 '17 at 17:04
@ShubhamKhatri I tried `controlled input` as suggested by you. I am having some errors running the code. I have updated my question. Pls have a look & tell me what I'm doing wrong — noobie, Sep 15 '17 at 05:21
`value="{this.state.startDate}"` should be `value={this.state.startDate}` at both the places and `this.state = { startDate:"yyyy-MM-dd", endDate:"yyyy-MM-dd" }` should be `this.state = { startDate:"", endDate:"" }` — Shubham Khatri, Sep 15 '17 at 05:23

score 0 · Accepted Answer · answered Sep 14 '17 at 17:02

0

Make the date input components controlled by defining a value and onChange property on each. The value should be coming from the component state. Upon the onChange event, set the state with the new value.

Add the button component and in the onClick event handler method, check the values of each input using this.state.startDate and this.state.endDate. You can adjust their values accordingly using setState if needed.

answered Sep 14 '17 at 17:02

nbkhope

7,360
4
40
58

How do I set default value to them? Can we get value of `` tag in a similar way as we get value of ` (ie. `event.target.value` ? And default values are set in `onDefault` ? – noobie Sep 14 '17 at 17:08
If you want to set a default value when the component mounts, you can do it in the initial state. e.g. add a `constructor(props) { super(props); this.state = { startDate: 'someInitialValue', endDate: 'someInitialValue' }; }` to your component class. – nbkhope Sep 14 '17 at 17:12
What you suggest I could do to format the date as yyyy/mm/dd? – noobie Sep 14 '17 at 17:13
Can I get Date type input's value in similar way as that of text's (ie `event.target.value` )? – noobie Sep 14 '17 at 17:15
@noobie, yes, the onChange event handler method for an input component has the event parameter. `onSomethingChange = (event) => { console.log(event.target.value) }` – nbkhope Sep 14 '17 at 17:18
For the date format, you could either (1) store the original format for the input and display it in a different format after processing: `convertToAnotherFormat(this.state.startDate);` or (2) upon setting the state with the value, pre-format it: `onStartDateChange = (event) => { this.setState({ startDate: convertToAnotherFormat(event.target.value) });` – nbkhope Sep 14 '17 at 17:19
I tried your approach. Now I'm getting this error. Pls help! – noobie Sep 15 '17 at 05:19

How to take value of two input at once on click of a button in react?

1 Answers1