0

Tengo mi modal pero al escoger una fecha, la fecha esta por detras del modal y me di cuenta que es por el z-index del datepicker introducir la descripción de la imagen aquí

Esta es mi funcion con el datepicker el cual hago que al dar click en el input pueda escoger la fecha pero la fecha sale por detras del formulario.

/*=============================
EDITAR FECHA FIN PERIODO LECTIVO
=============================*/
$('#editarFechaFinPeriodoLectivo').datepicker({
    format: "yyyy-mm-dd",
    language: "es-ES",
    startView: 2
});

y este es mi modal

<!--================================
MODAL EDITAR PERIODO LECTIVO
=================================-->
<div class="modal fade"
     id="modalEditarPeriodoLectivo"
     tabindex="-1"
     role="dialog"
     aria-hidden="true">
    <div class="modal-dialog modal-sm"
         role="document">
        <div class="modal-content">
            <form method="post">
                <div class="modal-header">
                    <h5 class="modal-title">Editar Año Lectivo</h5>
                    <button type="button"
                            class="close"
                            data-dismiss="modal"
                            aria-label="Cerrar">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="position-relative form-group">
                        <label for="editarPeriodoLectivo">Año Lectivo</label>
                        <input type="text"
                               name="editarPeriodoLectivo"
                               id="editarPeriodoLectivo"
                               class="form-control"
                               placeholder="2020-2021"
                               required>
                        <input type="hidden"
                               name="editarIDPeriodoLectivo"
                               id="editarIDPeriodoLectivo"
                               required>
                    </div>
                    <div class="position-relative form-group">
                        <label for="editarFechaInicioPeriodoLectivo">Fecha de Inicio del Año
                                                                     Lectivo</label>
                        <input type="text"
                               name="editarFechaInicioPeriodoLectivo"
                               id="editarFechaInicioPeriodoLectivo"
                               class="form-control"
                               placeholder="2020-12-31"
                               required>
                    </div>
                    <div class="position-relative form-group">
                        <label for="editarFechaFinPeriodoLectivo">Fecha de Finalización del Año
                                                                   Lectivo</label>
                        <input type="text"
                               name="editarFechaFinPeriodoLectivo"
                               id="editarFechaFinPeriodoLectivo"
                               class="form-control"
                               placeholder="2020-12-31"
                               required>
                    </div>
                </div>
                <div class="modal-footer justify-content-center">
                    <button type="button"
                            class="btn btn-danger"
                            data-dismiss="modal">Cerar
                    </button>
                    <button type="submit"
                            class="btn btn-primary">Guardar Cambios
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>

quiero saber como puedo hacer que la fecha salga para poder escogerla por delante del modal y ya no por detras ya que asi obviamente no puedo ocuparla, por favor ayudenme con eso.

1
  • Posiblemente el z-index de la clase .modal sea superior al que se está asignando en el datepicker. ¿que valor tiene esta? Commented el 18 abr. 2020 a las 20:53

1 respuesta 1

0

Listo lo solucione con una clase del mismo datepicker la cual es la siguiente

zIndex:

por lo cual me quedaria la funcion asi

$('#editarFechaFinPeriodoLectivo').datepicker({
    format: "yyyy-mm-dd",
    language: "es-ES",
    zIndex: 1111,
    startView: 2
});

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.