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

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 as:

0:0

Or:

5:3

Is there a way to display it as:

00:00

Or:

05:03

i.e in 24-hour data format (before people suggest it, I can't use type="time").

• javascript
• jquery
• html
• css

• Check out this thread stackoverflow.com/questions/14638018/…. It's not exactly what you're doing but the JavaScript formatting for hours and minutes should work. – Andy B Commented Apr 1, 2016 at 15:03
• 1 duplicated? stackoverflow.com/questions/20684737/… – Javier Conde Commented Apr 1, 2016 at 15:04
• Actually this: stackoverflow.com/questions/6312993/… – Andy B Commented Apr 1, 2016 at 15:06

4 Answers 4

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

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

    <input id="minutes" onchange="myFunction()"/>

 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 needed. Number(formattedHours);

Add a leading zero with a JavaScript function.

const hours = document.getElementById("hours");
const minutes = document.getElementById("minutes");

function addLeadingZero(value) {
  return value.length < 2 ? "0" + value : value;
}

hours.addEventListener("input", function() {
  hours.value = addLeadingZero(hours.value);
});

minutes.addEventListener("input", function() {
  minutes.value = addLeadingZero(minutes.value);
});

<input type="number" min="0" max="24" value="00" id="hours" class="hours">
<input type="number" min="0" max="59" value="00" id="minutes" class="minutes">

simple is the best

`${number}`.padStart(2, '0')