Ad
DatePicker Does Not Display The Date In Input When Editing
//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
Related Questions
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad