Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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.)

like image 721
Joe Z. Avatar asked Jan 23 '13 19:01

Joe Z.


People also ask

How do you restrict input time in HTML?

To give a limit to the input field, use the min and max attributes, which is to specify a maximum and minimum value for an input field respectively. The max and min attributes are used with number, range, date, datetime, datetime-local, month, time and week input types.

How do you force input in HTML?

By default, HTML 5 input field has attribute type=”number” that is used to get input in numeric format. Now forcing input field type=”text” to accept numeric values only by using Javascript or jQuery. You can also set type=”tel” attribute in the input field that will popup numeric keyboard on mobile devices.


1 Answers

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

like image 138
j08691 Avatar answered Sep 23 '22 21:09

j08691