Skip to main content
se añadieron 42 caracteres en el cuerpo
Origen Enlace
Juan Rincon
  • 182
  • 1
  • 15

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

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?

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

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();
      }
    })
  }
});
se añadieron 1022 caracteres en el cuerpo
Origen Enlace
Juan Rincon
  • 182
  • 1
  • 15

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?

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

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?

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

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?

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();
      }
    })
  }
});
Origen Enlace
Juan Rincon
  • 182
  • 1
  • 15

No funciona el preventDefault con keydown

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?

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