How to get the value of the date input in ReactJS?

Question

I have a Signup form that takes a date as input.

The code of my date input is:

birthDate: new Date(),

this.handleSubmit = this.handleSubmit.bind(this);
this.handledChange = this.handledChange.bind(this);


handledChange(date) {
  this.setState({
    birthDate: date
  });
}

<ControlLabel>Date de naissance</ControlLabel>
  <FormGroup controlId="birthDate" bsSize="large">
    <FormControl
      autoFocus
      type="date"
      value={this.state.birthDate}
      onChange={this.handledChange}
    />
  </FormGroup>

When I submit it, the input date is undefined on the console.

I want it in the format : YYYY-MM-DD

How can I fix that please?

Hemadri Dasari · Accepted Answer · 2019-01-18 21:44:00Z

4

You won't get selected date directly it should be through event target

Change

handledChange(date) {
    this.setState({
      birthDate: date
    });
  }

To

handledChange(event) {
    this.setState({
      birthDate: event.target.value
    });
  }

edited Jan 18, 2019 at 21:44

answered Jan 18, 2019 at 21:33

Hemadri Dasari

34.2k41 gold badges125 silver badges166 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Ichrak Mansour Over a year ago

It is still the same issue, it is undefined

L Dorado · Accepted Answer · 2019-01-18 21:59:04Z

1

You can also extract the input value of your form using its Id, after submission.
You can try using like this in your submit method:

let selectedDate = document.getElementById('birthDate')

BirthDate here refers to controlId of FormGroup

answered Jan 18, 2019 at 21:59

L Dorado

513 bronze badges

2 Comments

Ichrak Mansour Over a year ago

it is the same issue

L Dorado Over a year ago

Just a small question that I can think of from the top of my head. Did you make sure whether your submit handler is being called upon submission?

Aravind Reddy · Accepted Answer · 2020-06-08 16:26:18Z

1

This works like a gem. please try it out if you are still facing the issue

             <input
                type="date"
                name="expiration date"
                value={this.state.expiration_date}
                onChange={event => this.setState({expiration_date: event.target.value})} 
              />

onChange = (key, value) => {
    this.setState({
      [key]: value
    })
  }

answered Jun 8, 2020 at 16:26

Aravind Reddy

3636 silver badges18 bronze badges

2 Comments

Jason Aller Over a year ago

What are the advantages of this over the accepted answer? When adding answers to older questions with accepted answers it is really important to point out what new aspect of the question your answer addresses. Code only answers can almost always be improved by the addition of some explanation of how and why they work.

msqar Over a year ago

@JasonAller what accepted answer? There's no accepted answer at all and OP says those answers are not working for him. In fact, Aravind's way is the correct way.

Collectives™ on Stack Overflow

How to get the value of the date input in ReactJS?

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related