I have input for entering hours. To make it clear for the user that the number is an hour, I want to pad single digit hours with leading zero, e.g. show "02" instead of "2". Is that possible with HTML <input type="number" />? When I give it value="02" it renders 2 instead of 02. So far the only solution I found is using <input type="text" /> instead.
Asked
Active
Viewed 1,636 times
1
Robert Kusznier
- 4,696
- 7
- 33
- 62
-
javascript. no native html or css way to do this – DCR Jun 13 '18 at 16:22
-
Possible duplicate of [Force leading zero in number input](https://stackoverflow.com/questions/20684737/force-leading-zero-in-number-input) – Capricorn Jun 14 '18 at 18:03
1 Answers
2
According to the HTML5 definitions there is no option for specifying a format for the number. Nowadays latest browsers do not treat the number input the same anyway (see "Known issues" at https://caniuse.com/#feat=input-number).
I fear the only option to force a given pattern in the input involves JavaScript.
Sources: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/number, https://www.w3.org/TR/html5/sec-forms.html#number-state-typenumber, https://www.w3.org/TR/html5/infrastructure.html#valid-floating-point-number
Capricorn
- 1,919
- 5
- 20
- 28
-
-
It seems it's not possible even with JavaScript: https://stackoverflow.com/questions/14650932/set-value-to-currency-in-input-type-number – Robert Kusznier Jun 14 '18 at 06:59