react-datepicker not editable when passing in selected date

Question

When using react-datepicker and passing in a date I am not able to edit the date.

  _updateStartDate = (value) => {

    this.setState({ startDate: value });
  }



<DatePicker 
    selected={startDate ? moment(startDate, 'DD-MM-YYYY') : moment()}
    onSelect={(value) => {this._updateStartDate(moment(value).format('YYYY-MM-DD HH:mm:ss')) }} 
    onChange={(value) => { this._updateStartDate(moment(value).format('YYYY-MM-DD HH:mm:ss')) }}
 />

did you deconstruct `startDate` from your state object?? cause from your ternary operator, it'll always resort to `moment()` since `startDate` will be `undefined` — Balanced02, Sep 25 '18 at 17:23

score 2 · Accepted Answer · answered Sep 25 '18 at 18:00

The startDate is not defined. If you are passing this in you might want to try something like this.

_renderEffectiveStartDateCell = (startDate) => {
    return (<DatePicker 
              selected={startDate ? moment(startDate, 'DD-MM-YYYY') : moment()}
              onSelect={(value) => {this._updateStartDate(moment(value).format('YYYY-MM-DD HH:mm:ss')) }} 
              onChange={(value) => {this._updateStartDate(moment(value).format('YYYY-MM-DD HH:mm:ss')) }}
          />);  }

This will allow the datepicker to use the startDate passed in or just current date is nothing is passed in.

Without passing in this value as an argument you are going to get undefined for startDate.

score 0 · Answer 2 · answered Sep 25 '18 at 17:19

It seems like you have a slight typo

Did you mean to reference this.state.startDate?

<DatePicker 
    selected={this.state.startDate ? moment(this.state.startDate, 'DD-MM-YYYY') : moment()}
    onSelect={(value) => {this._updateStartDate(moment(value).format('YYYY-MM-DD HH:mm:ss')) }} 
    onChange={(value) => { this._updateStartDate(moment(value).format('YYYY-MM-DD HH:mm:ss')) }}
 />

react-datepicker not editable when passing in selected date

2 Answers2