Twitter Bootstrap Datepicker dentro de la ventana modal

Actualmente estoy usando el marco Twitter Bootstrap, y cuando uso las ventanas modales no puedo superar los elementos js para que funcionen como datepicker o validación, aunque los elegidos y los uniformes rinden correctamente. por favor vea mi ventana modal a continuación:

 

agregue el índice Z por encima de 1051 en la clase datepicker

agregue algo como esto en la página o css

  

para mí solo funcionó con! important en css

 .datepicker {z-index: 1151 !important;} 

Yo suelo:

 body.modal-open .datepicker { z-index: 1200 !important; } 

De esta forma: si el modal no está abierto, y quiere que el datepicker esté en el índice z normal (en mi caso, lo necesitaba en el menú desplegable del menú, que tiene un índice Z de 1000), funciona.

Si el modal está abierto, el datepicker necesita estar sobre el índice z modal (1040 o 1050), entonces use el selector body.modal-open .

Estoy usando Bootstrap 3.1.1

Como Mccannf dijo en su comentario :

Te recomiendo que mires tu bootstrap CSS y JS. Su modal se establece en un valor de índice Z muy alto (99999). Simplemente compare mi jsfiddle de arriba con los suyos

Agregar z-indez en la clase ui-datepicker

  

De acuerdo con http://www.daterangepicker.com/ (opciones)

 $('#dispatch_modal').on('shown.bs.modal', function() { $('input:text:visible:first').focus(); // prepare datepicker $('.form_datepicker').daterangepicker({ singleDatePicker: true, showDropdowns: true, parentEl: '#dispatch_modal' }); }); 

`

parentEl resolvió mi problema …

Prueba con esta pieza de código.

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

resolverá el problema cuando estés usando bootstrap V3

Creo que es mejor cambiar la función lógica en el complemento. Alrededor de la fila 552 cambio esto:

  var zIndex = parseInt(this.element.parents().filter(function(){ return $(this).css('z-index') !== 'auto'; }).first().css('z-index'))+10; 

dentro de esto:

  var zIndex = parseInt(this.element.parents().filter(function(){ return $(this).css('z-index') !== 'auto'; }).first().css('z-index')) + 10 * 1000; //think is enought 

Tuve este error porque me desplacé hacia abajo. Datepicker tenía la posición superior incorrecta en fijo. Solo lo uso ahora como:

 $('#myModal').on('show.bs.modal', function (e) { $(document).scrollTop(0); }); 

y está funcionando bien ahora.

puedes cambiar en tu archivo css bootstrap-timepicker/css/bootstrap-timepicker.css

de

 .bootstrap-timepicker-widget.dropdown-menu.open { display: inline-block; } 

a

 .bootstrap-timepicker-widget.dropdown-menu.open { display: inline-block; z-index:1151; } 

si usa bootstrap V3 intente esto.

.bootstrap-datetimepicker-widget { z-index: 1200 !important; }
.bootstrap-datetimepicker-widget { z-index: 1200 !important; } 

Para BootsTrap Calender usa esto

/ The Calender Index CSS /

 .bootstrap-datetimepicker-widget { z-index:99999 !important; } 

Para Bootstrap 3.x y Ace Template wrapbootstrap

Datepicker y Timepicker dentro de un Modal

  
 $('#effective_to').datepicker({ dateFormat: "dd-mm-yyyy", changeMonth: true, changeYear: true, beforeShow: function() { $('#ui-datepicker-div').addClass('datepicker'); } }); 

CSS

 .datepicker { z-index: 100000 !important; display: block; } 

Esto funciona de mi. Aunque llamé a la modelo a través de ajax

Estas soluciones funcionaron perfectamente para mí para representar el datepicker sobre el modal de arranque.

http://jsfiddle.net/cmpgtuwy/654/

HTML

 
Some content goes here
Some more content.

Javascript

 $('#dtp').datetimepicker({ format: 'MMM D, YYYY', widgetParent: 'body'}); $('#dtp').on('dp.show', function() { var datepicker = $('body').find('.bootstrap-datetimepicker-widget:last'); if (datepicker.hasClass('bottom')) { var top = $(this).offset().top + $(this).outerHeight(); var left = $(this).offset().left; datepicker.css({ 'top': top + 'px', 'bottom': 'auto', 'left': left + 'px' }); } else if (datepicker.hasClass('top')) { var top = $(this).offset().top - datepicker.outerHeight(); var left = $(this).offset().left; datepicker.css({ 'top': top + 'px', 'bottom': 'auto', 'left': left + 'px' }); } }); 

CSS

 .wrapper { height: 100px; overflow: auto;} body { position: relative; } 

Intente cambiar el valor del índice .modal para .modal y .modal-backdrop menos que .datepicker z-index value.

Deja que te ayude,

puedes actualizar tu bootstrap.min.css

en el menú desplegable de clase puede cambiar el valor del índice z en 2000

entonces aparece el selector de fecha

intenta usar este código, funciona para mí. por cierto vino de este sitio https://github.com/eternicode/bootstrap-datepicker/issues/464 .

 $('#datepicker').datepicker().on('show', function () { var modal = $('#datepicker').closest('.modal'); var datePicker = $('body').find('.datepicker'); if (!modal.length) { $(datePicker).css('z-index', 'auto'); return; } var zIndexModal = $(modal).css('z-index'); $(datePicker).css('z-index', zIndexModal + 1); }); 

Fwiw. Necro pero aún

para

lo necesitaba

  

en la CABEZA del documento para que acepte la anulación

Intenté la mayoría de las otras soluciones aquí antes de recurrir a eso.

 // re initialze datepicker $(".bootstrap-datepicker").bsdatepicker({ format: "yyyy-mm-dd", autoclose: true, }).on('changeDate', function (ev) { $(this).bsdatepicker('hide'); }); // $(".dropdown-menu").css({'z-index':'1100'}); 

prueba esto

 #ui-datepicker-div { z-index: 100000; }