React-datepicker: Can't manually change time in input

[mxsmirnoff]

Expected behavior

Change time to the one I entered.

Actual behavior

Time does not change.

Steps to reproduce

react-datepicker v2.0.0

import DatePicker from 'react-datepicker';
...
<DatePicker
  id={code}
  selected={value}
  onChange={(date) => { this.setState({ value: date }); }}
  showTimeSelect
  timeFormat="HH:mm"
  dateFormat="dd/MM/yyyy HH:mm:ss"
/>

[csebranek]

try using onChangeRaw

<DatePicker
  id={code}
  selected={value}
  onChange={(date) => { this.setState({ value: date }); }}
  onChangeRaw={(date) => { this.setState({ value: date }); }}
  showTimeSelect
  timeFormat="HH:mm"
  dateFormat="dd/MM/yyyy HH:mm:ss"
/>

[mxsmirnoff]

onChangeRaw returns event, not date.
And I think it should act the same way when you change one number in time (now it does not work) and when you change the whole time (everything works).

[kjellski]

If someone can point me in the right direction, I would try fixing this. It seems like the picker is currently really broken to users.

[jekatigr]

Maybe it will be useful: in my case i've made a mistake in dateFormat prop, so manual input was broken although choosing dates in dropdown worked.

[Explomat]

On official page https://reactdatepicker.com there are all examples have same functional.
And i found one decision to use onChangeRaw

[mxsmirnoff]

In official page you can't change time manually. But you can change date manually. I think it's strange when one part of input works fine and the other works not fine.

[pepijnolivier]

@martijnrusschen Are there plans to fix this issue ? By when can we expect this to be resolved ?

[jdahdah]

As @mxsmirnoff mentions, all of the examples on the official website are broken. Changing the time manually on any of those resets to the previous value. This is particularly obvious (and bad UX) when using showTimeSelectOnly, and I have to explain to users that they need to use the popover for now. I'd love to create a PR but unfortunately it's beyond my current skillset. I'd be super grateful for a fix!

Does anyone have a workaround for now? onChangeRaw does not work for me.

[mxsmirnoff]

@jdahdah I did something like this with onChangeRaw to solve this

<DatePicker
  id={code}
  selected={value}
  onChange={(date, event) => {
    if (!(event && event.target.value)) {
      this.handleChange(code, date);
    }
  }}
  onChangeRaw={(event) => {
     this.handleChangeRaw(code, dateFormat, dateTimeFormat, event.target.value);
  }}
  showTimeSelect
  timeFormat="HH:mm"
  dateFormat={dateTimeFormat}
/>

...

handleChangeRaw = (code, dateFormat, dateTimeFormat, value) => {
  if (isValid(parse(value, dateTimeFormat, new Date()))) {
    this.handleChange(code, parse(value, dateTimeFormat, new Date()));
  } else if (isValid(parse(value, dateFormat, new Date()))) {
    this.handleChange(code, parse(value, dateFormat, new Date()));
  } else {
    this.handleChange(code, null);
  }
};