La situación con la que estoy lidiando es: cuando un usuario ingresa un número de un solo dígito inferior a 10 en un campo de mes o día, quiero agregar un 0 al frente para que la fecha se pueda mostrar MM o DD. He leído tantas soluciones a este problema y traté de implementarlas como se sugiere, pero todo lo que he intentado hasta ahora tiene muchos errores.

El error con el que estoy lidiando en este momento es que, aunque mi campo de entrada está configurado en una maxLength de 2 cuando intento escribir una nueva fecha, el 0 nunca se cae, así que termino con un valor de 3 dígitos en el campo.

Mi entrada de fecha. Omitiré las últimas 2, tienen todos los mismos atributos... TENGA EN CUENTA que hay 3 entradas separadas para la fecha, no solo una:

 <div className="nh-date"> <Input onChange={onDateInputChange("month")} value={date.month} className={`nh-mon ${error.includes("month") ? "error" : ""}`} name="month" id="mon" placeholder="00" maxLength={2} type="number" selectTextOnFocus={true} /> <span className="sep">/</span> ...

Mi función onChange:

 const onDateInputChange = (field: string) => (e: any) => { let d = e.target.value; if ((field === "month" || field === "day") && d.length === 1) { d = "0" + d; setInputDate({ ...inputDate, [field]: d }); setError([]); } if ((field === "month" && d > 12) || (field === "day" && d > 31)) { setError([field]); } if (field === "year" && d.length === 0) { setError([field]); } else if (d.length > 2) { // d = d.replace(/^0+/, ""); setInputDate({ ...inputDate, [field]: d }); setError([]); }

Creo que mi problema principal es que nunca puedo borrar los 0's campo. Una vez que agrego un valor al campo, no se puede modificar. Todo mi objetivo es simplemente validar 3 campos de entrada para obtener una fecha con el formato MM/DD/YY . Cualquier consejo sería muy útil.