How to correctly use "time" input element?

Question

I have a react component that renders the following html:

        <input
          type="time"
          step="1"
          value={this.state.time}
          className="form-control"
          placeholder="Time"
          onChange={(ev) => {this.setState({time:ev.target.value})}
        />

This "sort of" works, but the problem is that I can't type double digit numbers in the input field. Let's say I want to type 00:23:00. I start out with a time field that looks like this:

00:00:00

next I click with the mouse on the middle pair of zeros. I push '2' on the keyboard. Now it will look like this:

00:02:00

However when I type '3' (no matter how fast I do this), what happens is my value looks like this:

00:03:00

while I would expect it to look like this:

00:23:00

If I remove the value attribute it all works as expected, but in that case I can't set a start value in my time field, which is rather annoying when editing existing content.

I guess the setState triggers a rerender of the component, making it behave weirdly.

Any ideas on how to fix this?

If you introduce delaying the calling of setState in the onChange callback, does it work as intended? — enjoylife
– enjoylife, Commented Dec 31, 2015 at 17:30

Joris · Accepted Answer · 2016-01-05 09:52:58Z

5

Fixed it myself. I was converting the 00:00:00 string (or whatever value it sent back to the code) in an integer representing a timestamp. In the value attribute I converted that integer back to the 00:00:00 representation. That seemed to generated the behaviour I described. If I just store the string as-is all works as expected.

answered Jan 5, 2016 at 9:52

Joris

6,3217 gold badges45 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

nafg Over a year ago

Can anyone explain why this would be so? For instance, aren't two equal strings equal?

nafg Over a year ago

(In my case, it turned out the strings weren't the same.)

Luc Over a year ago

In my experience, this is because the time input returns a value of HH:MM, and when the value gets parsed and changed to HH:MM:00, the time input doesn't keep track of multiple sequential keypresses.

Cindy Meister · Accepted Answer · 2015-12-31 18:08:11Z

0

I tested your code in jsbin, but can not reproduce your problem.

Demo is here: http://jsbin.com/vujixe/edit?html,js,output

You can test it.

By the way, if you want to set a start value in your field, the commendatory method is getInitState, just like my code in jsbin. Second, setState does trigger a rerender of the component.

edited Dec 31, 2015 at 18:08

Cindy Meister

25.8k21 gold badges36 silver badges45 bronze badges

answered Dec 31, 2015 at 18:02

youngwind

4754 silver badges5 bronze badges

4 Comments

Joris Over a year ago

Good point. I tried adding some stuff and changing the code to look more like mine, but I can't get it reproduced either. Must be a combination of things (this is an input field in a table, shown in a bootstrap modal) that causes this. Hard to reproduce indeed :/

Joris Over a year ago

I think I found the problem. My onChange method converts the string to a number of seconds. In my value= attribute I reconvert this, this seems to cause the behavior.

nafg Over a year ago

I don't see any inputs in that demo

Joris Over a year ago

Indeed. Seems that jsbin thing is editable by anyone and it has been overwritten by something completely irrelevant

ChrisW · Accepted Answer · 2022-05-01 08:45:20Z

0

In my case the problem because I was also passing min and max attributes to the element, and changing one of those attribute values on the fly.

What it is that the HTML element implement has internal state (required to implement typing double digits); and that state is lost if the element is recreated.

So:

It's OK if the thing is re-rendered (as a result of using setState)
It's not OK if the thing is re-created (as a result of changing one of its parameter values)

answered May 1, 2022 at 8:45

ChrisW

56.4k14 gold badges125 silver badges236 bronze badges

Collectives™ on Stack Overflow

How to correctly use "time" input element?

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related