react datetime can't select time

Question

Using react datetime out-of-the-box. It's rendering perfectly and passing data just fine.

The problem is that while I am able to choose a date, the time input is not working properly.

As you know it's an arrow up/down input for changing hour, minutes or am/pm. PROBLEM is that the values revert to default '12:00 AM' the instant I try to change them.

Some code:

<Datetime type="text" className="form-control" id="meeting-name" placeholder="Meeting Time & Date" name="meetingTimestamp" value={this.state.meetingTimestamp} onChange={this.onPickDateTime} />

onPickDateTime(moment) {
  let time = moment.format("YYYY-MM-DD HH:mm:ss");
  this.setState({
    meetingTimestamp: time,
    })
}

I am also referencing the doc's-recommended styling.

Any clues??

@brendangibson there you go. It's truly out of the box apart from some of the classNames. The onChange grabs the value from the picker and sets it to state. Thanks for looking! — 208_man, Apr 05 '18 at 23:59
You shouldn't use format and assign it back to the meetingTimestamp. Format generates a string. meetingTimestamp should either be a Date instance or moment instance. I think you can just remove the line this.setState.... — Peter Bartels, Apr 07 '18 at 03:34

Peter Bartels · Answer 1 · 2018-04-07T06:05:22.063

0

Don't use format, it will be invalid.

<Datetime type="text" className="form-control" id="meeting-name" placeholder="Meeting Time & Date" name="meetingTimestamp" value={this.state.meetingTimestamp} onChange={this.onPickDateTime} />

onPickDateTime(moment) {
  this.setState({
    meetingTimestamp: moment,
  })
}

edited Apr 07 '18 at 06:05

answered Apr 07 '18 at 04:03

Peter Bartels

1,474
1
12
20

Thank you @Peter Bartels, but if I don't the format will be invalid for the db. Any way of changing format as defined above without format? – 208_man Apr 07 '18 at 22:19
1

Your code here doesn't include the database processing. But I guess you need to call moment.format(...) at the point where you are actually calling the api for adding it to the database. – Peter Bartels Apr 08 '18 at 02:14

react datetime can't select time

1 Answers1