Leading zeroes in React input form

Question

I'm new to React and I would like to know how can I insert leading zeroes if the input number is less then 10. I mean, the defaultValue is 00 and, if I type 1, I want a zero to be automatically inserted in front of 1, having 01 in the input tag field. I'm using React Hook Form to manipulate the form.

<input
         type="number"                    
         name="Number"
         defaultValue="00"
         ref={register({ required: true })}
 />

Do you guys have any idea how to do this?

Thank you all!

Your question will be answered in here: https://stackoverflow.com/questions/8043026/how-to-format-numbers-by-prepending-0-to-single-digit-numbers — Phil, Nov 03 '20 at 10:58

score -1 · Answer 1 · answered Nov 03 '20 at 10:59

-1

You can use onChnage event of input element, and manipulate the value in order to add leading zero to your number.

answered Nov 03 '20 at 10:59

Milan Milicevic

124
5

score -1 · Answer 2 · answered Nov 03 '20 at 11:00

-1

01 is not exactly a number, it is a string. Maybe you should use a text input and not a numeric one.

answered Nov 03 '20 at 11:00

Balázs Herczeg

109
6

Leading zeroes in React input form

2 Answers2