How do I force seconds to appear on an HTML5 "time" input control?

Question

When I use JavaScript to set the value of an HTML5 "time" object, like this:

document.getElementById("settime").value = "13:24:59";

It will show a time control with "13:24:59" on it, and I can change everything. But if I do this:

document.getElementById("settime").value = "13:25:00";

It hides the seconds, showing just "13:25" with no seconds. How do I force the "00" seconds to appear in this case?

(This is in Google Chrome, by the way.)

Solution

Set the step attribute.

Ex: <input id="settime" type="time" step="1" />

document.getElementById("settime").value = "13:24:00";

<input id="settime" type="time" step="1" />

A note about the step attribute:

The step attribute can be used with a numerical input value to dictate how granular the values you can input are. For example, you might want users to enter a particular time, but only in 30 minute increments. In this case, we can use the step attribute, keeping in mind that for time inputs the value of the attribute is in seconds. For example, a 30 minute increment would have a step value of 1800. <input type="time" step="1800">

Comments

[feeela]

Have you checked that in different clients?

[feeela]

Works, but an explanation of that behavior would be fine. Seems illogical to me.

[Joe Z.]

Setting "step" forces intervals of 1 second to be available, meaning that the seconds must show up. If "step" was set to "60" instead, it would restrict the granularity of the control to minutes. Similarly, setting it to "3600" would only allow the change of hours.

[j08691]

@feeela - A note about the step attribute added.

[Yevgeniy Afanasyev]

Thanks for "canIuse" link, It is not supported by IE11 and still not supported by Safari. That is sad

[Marius]

This doesn't work in Chrome 83. <input id="settime" type="time" step="600" /> still shows every minute in dropdown, instead of just every 10 minutes

[Marius]

Filed a bug: bugs.chromium.org/p/chromium/issues/detail?id=1105339 Please edit this answer to have step > 1, eg 300 or 600, so "Run code snippet" shows something different than default.

[Nicofisi]

Your answer isn't really an answer to the question, it's just a comment about another answer. Please simply use the comment feature on the other answer, or elaborate some more instead :) When exactly does it not work in Chrome and iOS? What about other browsers than Safari on iOS? On what browsers does it work?

[Mirko]

While this works, setting the seconds to any value will show "00" in Android when the time picker opens again, despite the seconds' actual value. Tested in Android 11, 10, 9. The seconds are actually set, just reopening the time picker again, it will be set to 00 in the popup.