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();
}
})
}
});