2

tengo un input con un type fecha y lo que quiero lograr es que solo se permita ingresar la fecha por el calendario que trae el navegador para este tipo de input y no que sea modificable con los números del teclado ni las flechas. Este es mi código pero no quiere funcionar el preventDefault, ¿Alguna sugerencia?

Se presenta este error en firefox.

HTML (Es una modal):

<div class="modal-body">
        <form id="formulario_modal_finalizar_solicitud" method="POST">

          <!-- Content form -->
          <div class="row" id="form_labels_modal_finalizar_solicitud"></div>
          <!-- /Content form -->

          <!-- Content form -->
          <div class="row" id="form_inputs_modal_finalizar_solicitud">
            </div>
            <div class="col-lg-12 text-left f-s-14" id="div_dtm_fecha_finalizar">
              <div class="form-group">
                <label class="form-label font-weight-bold">Fecha finalizar <i class="fas fa-asterisk fa-xs text-danger"></i>
                
                </label>
              <input type="date" class="form-control input-lg f-s-14" name="dtm_fecha_finalizar" id="dtm_fecha_finalizar" value="" tabindex="1" max="2024-02-13">
              </div>
            </div>
        </form>
      </div>

JavaScript:

document.addEventListener("click", function (e) {
  /* --- Valida fecha inicial solicitud, gestionar solicitud y finalizar solicitud de un proceso  --- */
  if (e.target.id === 'dtm_fecha_iniciar' || e.target.id === 'dtm_fecha_iniciar_editar' || e.target.id === 'dtm_fecha_finalizar' || e.target.id === 'dtm_fecha_gestion') {
    const id = e.target.id

    //Aqui tengo otras validaciones por eso es necesario el primer evento click (uso la constante id), no los muestro para no alargar el código

    const inputFecha = document.getElementById(id)

    inputFecha.addEventListener('keydown', (event) => {
      if (event.key === 'ArrowUp' || event.key === 'ArrowDown' || (event.key >= '0' && event.key <= '9')) {
        event.preventDefault();
      }
    })
  }
});
6
  • Deberias agregar tu HTML
    – alanfcm
    Commented el 13 feb. a las 15:28
  • 1
    Si quieres evitar el ' keydown' porqué lo filtras? basta con hacer la función: input.addEventListener('keydown', (e) => e.preventDefault()); eso evita cualquier keydown o es que buscas un keydown específico? Commented el 13 feb. a las 16:01
  • @MauricioContreras si tienes razón gracias por tu aporte, aunque no se por que no logra funcionar el preventDefault en firefox. Commented el 13 feb. a las 16:06
  • 2
    Desde Firefox 65, los eventos keydown y keyup ahora se activan durante la composición del IME, para mejorar la compatibilidad entre navegadores para los usuarios de CJKT (error 354358 en Firefox). Evento KeyDown Commented el 13 feb. a las 16:31
  • 1
    Confirmo que no funciona en Firefox. La verdadera pregunta es: ¿por qué querrías romper la accesibilidad? ¿Y si el usuario se maneja mejor con el teclado que con el mouse?
    – padaleiana
    Commented el 13 feb. a las 18:57

1 respuesta 1

3

Una solución rápida

<input type="date" onkeydown="return false;" />
<input type="datetime-local" onkeydown="return false;" />

6
  • No funciono de esta forma amigo, lo realice así: <input type="date" class="form-control input-lg f-s-14" name="dtm_fecha_finalizar" id="dtm_fecha_finalizar" value="" tabindex="1" onkeydown="return false" max="2024-02-13"> Commented el 13 feb. a las 15:41
  • @JuanRincon qué es lo que no funciona? La respuesta que te han dado evita el uso del teclado en los componentes de fecha y sólo permite la interacción con el mouse. Commented el 13 feb. a las 15:50
  • @MauricioContreras el código sigue permitiendo las entrada del teclado como flechas y números, intenta comprobarlo con el ejecutar de stackoverflow. Commented el 13 feb. a las 15:52
  • @JuanRincon Pues lo ejecuto y no me lo permite, entonces será un tema de navegador. Uso Brave browser. Qué navegador estás usando? Aclara tu pregunta con esos detalles. Commented el 13 feb. a las 15:53
  • @MauricioContreras tienes razón en chrome funciona pero uso firefox como principal y ahí es donde falla. Commented el 13 feb. a las 16:01

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.