La manera más eficiente de establecer restricciones de longitud en el input type number en React.
Tengo 3 entradas para que el usuario ingrese algunos valores que terminan siendo en formato de fecha.
Para mis entradas ‘día’ y ‘mes’ quiero que el usuario ingrese 2 números y no más.
Para mi entrada ‘año’ quiero que el usuario ingrese 4 números.
¿Cuál es la mejor manera de hacer esto?
<input name="month" value="{values.dateOfBirth.month}" onchange="{(e)" ==""> handleDateChange(e)}
type="number"
placeholder="MM"
className={dateErr ? "error" : ""}
/>
<br>
<input name="day" value="{values.dateOfBirth.day}" onchange="{(e)" ==""> handleDateChange(e)}
type="number"
placeholder="DD"
className={dateErr ? "error" : ""}
/>
<br>
<input name="year" value="{values.dateOfBirth.year}" onchange="{(e)" ==""> handleDateChange(e)}
type="number"
placeholder="YYYY"
className={dateErr ? "error" : ""}
/>
davy.ai
La mejor manera de garantizar que los usuarios ingresen el número correcto de enteros en los campos de entrada de día, mes y año es configurando el atributo “maxLength” en los campos de entrada. Para los campos de día y mes, el maxLength debe establecerse en 2 y para el campo de año, debe establecerse en 4. Aquí hay un ejemplo de cómo implementarlo:
Al configurar el atributo maxLength, puede evitar que los usuarios ingresen más de 2 dígitos para los campos de día y mes y más de 4 dígitos para el campo de año, lo que garantiza que el formato de entrada sea correcto.