Display leading zeros in input fields

Question

I have two input fields representing hours and minutes.

 <input type="number" min="0" max="24" step="1" value="00" class="hours"> <input type="number" min="0" max="0.60" step="0.01" value="00" class="minutes"> 

Which display:

 0:0 

Or:

 5:3 

Is there any way to display it as:

 00:00 

Or:

 05:03 

ie in a 24-hour data format (before people tell me this, I cannot use type = "time").

Answer 1

You can add the onchange attribute to your input tag, which calls the javascript function.

  <script> function MyFunction() { var minuteValue = document.getElementById("minutes").value; if (minuteValue.toString().length < 2) { minuteValue = "0" + minuteValue; } alert(minuteValue); } </script> <input id="minutes" onchange="MyFunction()"/> 

Answer 2

  function formatNums(num){ if (nums < 10){ return "0" + num; } } var formattedHours = formatNums(hours); var formattedMinutes = formatNums(minutes); 

---

NOTE. This method uses type="text" , so be sure to convert back to a number if necessary. Number(formattedHours);