DatePicker does not display the date in input when editing

user_9974904 0
Viewed 1235

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

    )
  }
}
reactjs javascript
4 Answers

I think I've found your mistake.

index.js line 29:

<DatePicker
          selected={this.props.date}
          onChange={this.props.handleChange}
          showTimeSelect
          customInput={<CustomInput />}
          timeFormat="HH:mm"
          value={this.props.startDate}
          dateFormat="yy-MM-dd, hh:mm"
          timeCaption="time"
        />

value should be selected

Fix: https://stackblitz.com/edit/react-p7czys

For reference see the documentation: https://reactdatepicker.com/#example-43

user_10999450

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.

user_92763290

There are some problems in your code

  1. In Todo component, you are passing date={this.date} which is wrong. this.date is undefined. You probably mean to pass only date. i.e. date={date}.

  2. You are modifying the time in the parent component render function, which is executed every time you change something on input. So, either remove it or move it somewhere other than render method,

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

Working example here https://stackblitz.com/edit/react-qnlbq9?embed=1&file=index.js

So, basically you are passing same value with two different props - startDate and date.

user_49084150

You are lucky I had writen it earlier and found it in my old project.

DateInput.jsx

import React, { Component } from "react";
import DatePicker from "react-datepicker";

class DateInput extends Component {
    setDate = date => {
        this.props.onChange(this.props.name, date);
    };

    render() {
       const { name, value } = this.props;
       return (
           <DatePicker
           id={name}
           name={name}
           selected={value}
           onChange={this.setDate}
         />
       );
    }
}

export default DateInput;

App.js (How to use it)

import React, { Component } from "react";
import DateInput from './DateInput';

class App extends Component {
  state = {
    data : {
       dateToday : new Date()
       //other properties
    }
  }
  handleDate = (name, date) => {
      const data = this.state.data;
      data[name] = date;
      this.setState({ data });
    };

  render() {
    const {data} = this.state;
    return (
       <DateInput
       name="dateToday"
       value={data.dateToday}
       onChange={this.handleDate}
       />
    );
  }
}

Important: name is a string (key) of your variable, value is the new Date() (value) of your variable.

See Demo here on CodeSandBox

user_20134030
Related