javascript - How to get the value of the date input in ReactJS? - Stack Overflow

admin管理员组

文章数量:1293916

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?

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?

• javascript
• reactjs
• input
• datepicker
• date-format

Share Follow edited Jan 18, 2019 at 22:40 user933941 asked Jan 18, 2019 at 21:31 Ichrak MansourIchrak Mansour 1,9421212 gold badges3737 silver badges6464 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 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
    });
  }

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

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

本文标签： javascriptHow to get the value of the date input in ReactJSStack Overflow