question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Can't manually change time in input

See original GitHub issue

Expected behavior

Change time to the one I entered.

Actual behavior

Time does not change. Mar-18-2019 18-14-15

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

Issue Analytics

  • State:closed
  • Created 5 years ago
  • Reactions:15
  • Comments:9 (3 by maintainers)

github_iconTop GitHub Comments

2reactions
pepijnoliviercommented, May 8, 2019

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

1reaction
mxsmirnoffcommented, May 28, 2019

@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);
  }
};
Read more comments on GitHub >

github_iconTop Results From Across the Web

HTML5 input type time setting values not working
I have a form with input type time.
Read more >
<input type="time"> - HTML: HyperText Markup Language | MDN
<input> elements of type time create input fields designed to let the user easily enter a time (hours and minutes, and optionally seconds)....
Read more >
Unable to change Date & Time - Microsoft Community
I have opened Settings > Time & Language >Date & Time. Turned off Set time automatically. Then click Change. Then I selected a...
Read more >
If you can't change the time or time zone on your Apple device
Open Date & Time settings and make sure that the option to set time and date automatically, as well as the option to...
Read more >
ion-datetime
Ionic's API Datetime input component easily displays a preferred format, ... Setting time-date will have the calendar picker appear after the time picker....
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found