How to display input value of html number input with exactly 2 digits?

Question

I would like to have something like this:

<input id="seconds" type="number" value="0" min="0" max="59" />

The only thing I would like to add here is to always show the numbers as 2-digit numbers at all times (showing 0 as '00', 7 as '07' and 53 as '53').

I've looked for plenty of solutions on SO, but none really does the job for me. In particular, hooking up the onChange eventHandler or blur() in jQuery to alter the number doesn't seem to do the job for me (I'm guessing this is because of the min-max-validation which I'm using, but I'm not sure).

In the bigger scheme, I would like make a simple and easy-to-change time control, using number inputs to easily change the hours/minutes/seconds. Isn't there any standard thing I could use ? The HTML time controls don't seem to be supported in all major browsers....

try this: http://stackoverflow.com/questions/3605214/javascript-add-leading-zeroes-to-date — Daniel Cheung, Mar 10 '15 at 14:26

score 0 · Answer 1 · answered Mar 10 '15 at 14:35

0

Somethig like This?

$( document ).ready(function() {
    $('#seconds').on('input', function() { 
    var n = $(this).val();
    if(n<10){
      $(this).val(0+""+n);
    }
  });
});

answered Mar 10 '15 at 14:35

ZetCoby

588
1
4
14

as mentioned in the question, I tried exactly that with my version of Firefox (36.0.1) and I can see that it doesn't work, even with your sample. Debugging didn't really help either but I'm assuming that because of the validation, the browser doesn't accept values like '01'. – Matt Ko Mar 10 '15 at 14:39
i`ll try on firefox and try to think on something – ZetCoby Mar 10 '15 at 14:42
yeah u were right, I also think that, that problem is browser related – ZetCoby Mar 10 '15 at 14:49

How to display input value of html number input with exactly 2 digits?

1 Answers1