CODEWITHSUNDEEP
htmlcssreactjs
catherine
catherine

Reputation: 11

Datefield holding its value, but not displaying it

I have a date field in my project for paid date. When I first enter a date, it takes the input date value and displays it in the field.

After submitting the value I retrieve it again from API fetch, but the date field does not display it. I think the problem is in date format. Format to submit the date is DD-mm-yyyy. Please help me to fix it.

handlePaidDateChange = (e) =>
  {
    this.setState({ paidDate: e.target.value });
    console.log(this.state.paidDate);

  }

----------------

<div className="row">
  <div className="col m4 s4">
    <h6>Paid Date:</h6>
  </div>
  <div className="col m8 s8">
    <input id="paidDate" type="date" onChange={ this.handlePaidDateChange } value={ this.state.paidDate } />
  </div>
</div>

Upvotes: 0

Views: 61

Answers (2)

nmak18
nmak18

Reputation: 1169

please make sure that the value (this.state.paidDate) is in the proper date format mentioned here -> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date

const jsx = (
<div className="row">
  <div className="col m4 s4">
    <h6>Paid Date:</h6>
  </div>
  <div className="col m8 s8">
    <input id="paidDate" type="date"  value={ '2005-06-07' } />
  </div>
</div>
  );

ReactDOM.render(jsx, document.getElementById("app"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Upvotes: 0

Arun B S
Arun B S

Reputation: 76

use type text instead of date:

<div className="col m8 s8">
   <input id="paidDate" type="text" onChange={ this.handlePaidDateChange } value={ this.state.paidDate } />
</div>

This actually has nothing to do with React. for values, Chrome expects the value of the date to be in YYYY-MM-DD format.

Upvotes: 1

Related Questions