2

Estoy dando soporte a una aplicación que usa AngularJS y Bootstrap v3.3.7, estoy agregando un datetime-picker a un formulario que esta en un modal, pero el datetime-picker se ejecuta detras del modal, Se vé así:

introducir la descripción de la imagen aquí

Este es el código que tengo en el modal para el datetime-picker:

                        <div class="input-group date" >
                             <label>Fecha Visita</label><br>
                                <input style="width:130px" type="text" name="fechaVisita" id="fechaVisita" class="btn btn-default btn-xs ng-pristine ng-valid ng-touched" ng-model="visitaSel.fechaVisita" placeholder="Fecha Visita" datetime-picker="" date-format="yyyy-MM-dd"> <i class="fa fa-calendar fa-fw"></i>
                        </div>

claro esta que este bloque esta dentro del class="modal-body"

Saludos cordiales

5
  • 3
    te sugiero usar el z-index: "z-index: 2000!important" el 1 abr. 2019 a las 21:21
  • @Diego Avila gracias voy a leer de este tema por que no lo he usado. Gracias! el 1 abr. 2019 a las 21:25
  • 2
    ¿Estas utlizando alguna libreria para datepicker?
    – cjara
    el 1 abr. 2019 a las 21:43
  • @cjara estoy usando angularjs-datetime-picker.min.js y angularjs-datetime-picker.css el 2 abr. 2019 a las 11:52
  • Éste es un issue abierto en la libreria github.com/kineticsocial/angularjs-datetime-picker/issues/31, uno de los comentarios aconseja usar z-index, te recomiendo en caso de querer migrar usar una libreria con mas actualizaciones y comunidad como angular-ui.github.io/bootstrap, espero te sirva. Saludos
    – cjara
    el 2 abr. 2019 a las 14:29

2 respuestas 2

1

Como lo menciono @Diego Avila, agregue estas líneas en el CSS del datatime-piker.css y funcionó:

.ui-timepicker-container{ 
     z-index:1151 !important; 
}

Muchas gracias a todos por sus aportes.

0

Recuerda que por defecto bootstrap utiliza z-index: 1055.

Tienes que poner uno más arriba (un número más grande). Asi lo hice yo usando un datepicker angular material

::ng-deep .cdk-overlay-container {

  z-index: 2000 !important; //cualquier z-index: por encima de 1055 sirve
}

Te toca con el inspector mirar bien el modal.

Tu Respuesta

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

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