javascript - Add/pad 0 beside num when num > 10 in number input using React

Question

I researched and took a look at questions like this but I can't find anything that involves the input number type. I just want to pad 0 whenever the number inside input is less than 10, and I want it to pad 0 even if I am still scrolling. Here's my code:

import React from 'react';

const SetTimer = () => {
    return (
        <div className='grid-inputs'>
            <div>
                <label htmlFor='hours'>Hours</label>
                <input
                    name='hours'
                    type='number'
                    min='0'
                    max='99'
                    // onChange={(e) => setHours(e.target.value)}
                />
            </div>
            <div>
                <label htmlFor='minutes'>Minutes</label>
                <input
                    name='minutes'
                    type='number'
                    min='0'
                    max='59'
                    // onChange={(e) => setMinutes(e.target.value)}
                />
            </div>
            <div>
                <label htmlFor='seconds'>Seconds</label>
                <input
                    name='seconds'
                    type='number'
                    min='0'
                    max='59'
                    // onChange={(e) => setSeconds(e.target.value)}
                />
            </div>
        </div>
    );
};

export default SetTimer;

I can do this outside the input field, for example, like this for minutes (this is just an excerpt from a different component by the way):

<h1>{minutes < 10 ? `0${minutes}` : minutes}</h1>

But I can't do this inside the input number field while still scrolling for number value. Please help.

question from:https://stackoverflow.com/questions/65932725/add-pad-0-beside-num-when-num-10-in-number-input-using-react

Answer 1

Convert your inputs to be controlled inputs and pad the input's value prop.

value={hours.padStart(2, '0')}

Code

const SetTimer = () => {
  const [hours, setHours] = useState("");
  const [minutes, setMinutes] = useState("");
  const [seconds, setSeconds] = useState("");
  return (
    <div className="grid-inputs">
      <div>
        <label htmlFor="hours">Hours</label>
        <input
          name="hours"
          type="number"
          min="0"
          max="99"
          value={hours.padStart(2, "0")}
          onChange={(e) => setHours(e.target.value)}
        />
      </div>
      <div>
        <label htmlFor="minutes">Minutes</label>
        <input
          name="minutes"
          type="number"
          min="0"
          max="59"
          value={minutes.padStart(2, "0")}
          onChange={(e) => setMinutes(e.target.value)}
        />
      </div>
      <div>
        <label htmlFor="seconds">Seconds</label>
        <input
          name="seconds"
          type="number"
          min="0"
          max="59"
          value={seconds.padStart(2, "0")}
          onChange={(e) => setSeconds(e.target.value)}
        />
      </div>
    </div>
  );
};