0

Tengo el siguiente inconveniente utilizando un input datetime-local me di cuenta que los usuarios se equivocan a veces colocando mal la fecha , precisamente el año, en este tipo de control se puede ingresar más de 4 dígitos, es posible delimitar el formato del control para evitar que se ingrese en forma errónea más dígitos en el año. El control permite hasta 6 dígitos Desde ya Gracias

    <div class="col-md-4">
    
                  <label class="control-label">Fecha de Ingreso</label>
                  <input style="max-height: 40px;" type="datetime-local"      class="form-control form-control-danger"  name= "fechain" id="fechain" title="Por favor ingrese fecha"     required>
    
              </div>

4
  • No entiendo, ¿cómo vas a capturar solo el año en un input de tipo datetime-local? Sería más fácil utilizar un input de tipo number que permita el ingreso de 4 dígitos entre un rango. Ve esta respuesta stackoverflow.com/a/40662109/6119009 el 22 ene. 2020 a las 22:33
  • Normalmente los controles para introducir fechas no son bien soportados por los navegadores. Pero en este caso creo que puedes usar el atributo pattern, para especificar una expresión regular. entonces si lo que introduzca el usuario no coincide con ese patrón, la entrada sera incorrecta. Si el elemento con type="datetime-local" no es soportado por el navegador es probable que aparezca un campo de texto normal y no sea interpretado como un campo para fechas. el pattern seguiría funcionando, pero perderías accesibilidad en parte. el 22 ene. 2020 a las 22:42
  • Para tener algo de accesibilidad puedes usar atributos WAI-ARIA que por ejemplo haría que tu elemento pueda ser representado como un campo de fecha en vez de un input normal en un screen reader. el 22 ene. 2020 a las 22:45
  • En realidad solo estoy utilizando Chrome ya que este control no es compatible en firefox y IE.
    – Julio
    el 22 ene. 2020 a las 22:46

1 respuesta 1

2

No puedo responder arriba, creo que es un error que se puede solucionar agregando el atributo max, de esta manera.

<div class="col-md-4">
  <label class="control-label">Fecha de Ingreso</label>
  <input max="9999-12-31T23:59" style="max-height: 40px;" type="datetime-local"      class="form-control form-control-danger"  name= "fechain" id="fechain" title="Por favor ingrese fecha"required>
</div>

Si usas type="date", pues podrias colocar

<input type="date" max="2999-12-31">

2
  • Felipe, una repuesta simple que funciona Gracias....
    – Julio
    el 22 ene. 2020 a las 23:29
  • Qué bueno!, slds. el 22 ene. 2020 a las 23:31

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.