Ad

DatePicker Does Not Display The Date In Input When Editing

- 1 answer

//Set new date

this.state.startDate = new Date("July 27, 1962 23:30:00")
const date = new Date(this.state.startDate);

//Set hours

date.setHours(0, 0, this.state.second);
date.toTimeString();

When I click edit. I want this date to be displayed in the input. And that it can be edited

Picture: https://imgur.com/OjBEC5u

Example here: https://stackblitz.com/edit/react-cuubsx

Edit

class Edit extends React.Component {
  render() {
    return (
        <DatePicker
          selected={this.props.startDate}
          onChange={this.props.handleChange}
        />
    )
  }
}

Item

class Item extends Component {

  state = {
    startDate: new Date("July 27, 1962 23:30:00"),
    second: 120
  }

  handleChange = (date) => {
    this.setState({
      startDate: date
    });
  }


  render() {

    const date = new Date(this.state.startDate);
    console.log(date)
    date.setHours(0, 0, this.state.second);
    date.toTimeString();

    return (
         <Edit
            handleChange={this.handleChange}
            startDate={date}
            handleDescription={this.handleDescription}
            date = {this.date} 
          />

    )
  }
}
Ad

Answer

There are 2 issues with your code. When you are using customInput, you are not specifying a onChange handler, so selecting a date does not update anything. So add a onChange handler:

<input onClick={this.props.onClick} onChange={this.props.onChange}
className="dateInput" value={this.props.value} type="text" />

And you are passing this.date as a prop to EditForm, which should be date instead. As this.date is undefined, your date input is always blank.

<EditForm
    handleChange={this.handleChange}
    description={this.state.description}
    startDate={date}
    handleDescription={this.handleDescription}
    onSave={this.onSave}
    onCancel={this.onCancel}
    date={date}
/>

The result is in this stackblitz.

Ad
source: stackoverflow.com
Ad