Twitter Bootstrap Datepicker dentro de la ventana modal

83

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

  <div class="modal hide in" id="newMember" style="display: block; " aria-hidden="false">
        <div class="modal-header">
          <button class="close" data-dismiss="modal" type="button">×</button>
          <h3>New Member Form</h3>
        </div>
        <form accept-charset="UTF-8" action="/players" class="form-horizontal" id="new_user" method="post"><div style="margin:0;padding:0;display:inline"><input name="utf8" type="hidden" value="✓"><input name="authenticity_token" type="hidden" value="KdL6cc2Vb53qeMY+PpBUS70myT4HX1uWofMUBolLea8="></div>
          <div class="modal-body">
            <div class="widget-content nopadding">
              <div class="control-group">
                <label class="control-label" for="user_role">Role</label>
                <div class="controls">
                  <select id="user_role" name="user[role]" style="display: none; " class="chzn-done"><option value="">Select member role</option>
                  <option value="1">Player</option>
                  <option value="2">Coach</option>
                  <option value="3">Parent</option>
                  <option value="4">Manager</option>
                  <option value="5">Non-player</option></select><div id="user_role_chzn" class="chzn-container chzn-container-single" style="width: 222px; "><a href="javascript:void(0)" class="chzn-single"><span>Select member role</span><div><b></b></div></a><div class="chzn-drop" style="left: -9000px; width: 220px; top: 0px; "><div class="chzn-search" style=""><input type="text" autocomplete="off" style="width: 212px; "></div><ul class="chzn-results"><li id="user_role_chzn_o_0" class="active-result result-selected" style="">Select member role</li><li id="user_role_chzn_o_1" class="active-result" style="">Player</li><li id="user_role_chzn_o_2" class="active-result" style="">Coach</li><li id="user_role_chzn_o_3" class="active-result" style="">Parent</li><li id="user_role_chzn_o_4" class="active-result" style="">Manager</li><li id="user_role_chzn_o_5" class="active-result" style="">Non-player</li></ul></div></div>
                </div>
              </div>
              <div class="control-group">
                <label class="control-label" for="user_full_name">Full name</label>
                <div class="controls">
                  <input id="user_first_name" name="user[first_name]" placeholder="First Name" size="30" type="text">
                </div>
              </div>
              <div class="control-group">
                <label class="control-label" for="user_last_name">Last name</label>
                <div class="controls">
                  <input id="user_last_name" name="user[last_name]" placeholder="Last Name" size="30" type="text">
                </div>
              </div>
              <div class="control-group">
                <label class="control-label" for="user_email">Email</label>
                <div class="controls">
                  <input id="user_email" name="user[email]" placeholder="Email Address" size="30" type="text">
                </div>
              </div>
              <div class="control-group">
                <label class="control-label" for="user_date_of_birth">Date of birth</label>
                <div class="controls">
                  <input class="datepicker" data-date-format="dd/mm/yyyy" id="user_dob" name="user[dob]" placeholder="dd/mm/yyyy" readonly="readonly" size="30" type="text">
                </div>
              </div>
              <div class="control-group">
                <label class="control-label" for="user_gender">Gender</label>
                <div class="controls">
                  <select id="user_gender" name="user[gender]" style="display: none; " class="chzn-done"><option value="">Select gender</option>
                  <option value="Male">Male</option>
                  <option value="Female">Female</option></select><div id="user_gender_chzn" class="chzn-container chzn-container-single" style="width: 222px; "><a href="javascript:void(0)" class="chzn-single"><span>Select gender</span><div><b></b></div></a><div class="chzn-drop" style="left: -9000px; width: 220px; top: 0px; "><div class="chzn-search" style=""><input type="text" autocomplete="off" style="width: 212px; "></div><ul class="chzn-results"><li id="user_gender_chzn_o_0" class="active-result result-selected" style="">Select gender</li><li id="user_gender_chzn_o_1" class="active-result" style="">Male</li><li id="user_gender_chzn_o_2" class="active-result" style="">Female</li></ul></div></div>
                </div>
              </div>
              <div class="control-group">
                <label class="control-label" for="user_team">Team</label>
                <div class="controls">
                  <select id="user_team_id" name="user[team_id]" style="display: none; " class="chzn-done"><option value="">None</option>
                  <option value="4">Metro 3 East</option>
                  <option value="1">State League 3</option>
                  <option value="2">State League 4</option>
                  <option value="3">Metro 3 South</option>
                  <option value="5">Pennant E</option>
                  <option value="6">Under 9 White</option>
                  <option value="7">Under 9 Navy</option>
                  <option value="8">Under 13 Pennant South East</option>
                  <option value="9">Under 17 Pennant South East</option>
                  <option value="10">Under 15 South (1)</option>
                  <option value="11">Under 11 Pennant South East</option>
                  <option value="12">Under 11 South</option></select><div id="user_team_id_chzn" class="chzn-container chzn-container-single" style="width: 222px; "><a href="javascript:void(0)" class="chzn-single"><span>None</span><div><b></b></div></a><div class="chzn-drop" style="left: -9000px; width: 220px; top: 0px; "><div class="chzn-search" style=""><input type="text" autocomplete="off" style="width: 212px; "></div><ul class="chzn-results"><li id="user_team_id_chzn_o_0" class="active-result result-selected" style="">None</li><li id="user_team_id_chzn_o_1" class="active-result" style="">Metro 3 East</li><li id="user_team_id_chzn_o_2" class="active-result" style="">State League 3</li><li id="user_team_id_chzn_o_3" class="active-result" style="">State League 4</li><li id="user_team_id_chzn_o_4" class="active-result" style="">Metro 3 South</li><li id="user_team_id_chzn_o_5" class="active-result" style="">Pennant E</li><li id="user_team_id_chzn_o_6" class="active-result" style="">Under 9 White</li><li id="user_team_id_chzn_o_7" class="active-result" style="">Under 9 Navy</li><li id="user_team_id_chzn_o_8" class="active-result" style="">Under 13 Pennant South East</li><li id="user_team_id_chzn_o_9" class="active-result" style="">Under 17 Pennant South East</li><li id="user_team_id_chzn_o_10" class="active-result" style="">Under 15 South (1)</li><li id="user_team_id_chzn_o_11" class="active-result" style="">Under 11 Pennant South East</li><li id="user_team_id_chzn_o_12" class="active-result" style="">Under 11 South</li></ul></div></div>
                </div>
              </div>
              <div class="control-group">
                <label class="control-label" for="user_mobile">Mobile</label>
                <div class="controls">
                  <input id="user_mobile" maxlength="10" name="user[mobile]" placeholder="i.e 0421813529" size="10" type="tel">
                  <span class="help-block">
                    <input name="user[private_mobile]" type="hidden" value="0"><div class="checker" id="uniform-user_private_mobile"><span><div class="checker" id="uniform-user_private_mobile"><span><input id="user_private_mobile" name="user[private_mobile]" type="checkbox" value="1" style="opacity: 0; "></span></div></span></div>
                    <a href="javascript:void(0)" class="tip-bottom" data-original-title="Normally, all members of the team can see this information. If you don't want teammates to see this information, just click this checkbox. (Note: Team managers will always see this information.)">Private</a>
                  </span>
                </div>
              </div>
              <div class="control-group">
                <label class="control-label" for="user_manager_access">Manager access</label>
                <div class="controls">
                  <input name="user[manager]" type="hidden" value="0"><div class="checker" id="uniform-user_manager"><span><div class="checker" id="uniform-user_manager"><span><input id="user_manager" name="user[manager]" type="checkbox" value="1" style="opacity: 0; "></span></div></span></div>
                </div>
              </div>
              <div class="control-group">
                <label class="control-label" for="user_admin_access">Admin access</label>
                <div class="controls">
                  <input name="user[admin]" type="hidden" value="0"><div class="checker" id="uniform-user_admin"><span><div class="checker" id="uniform-user_admin"><span><input id="user_admin" name="user[admin]" type="checkbox" value="1" style="opacity: 0; "></span></div></span></div>
                </div>
              </div>
            </div>
          </div>
          <div class="modal-footer">
            <div class="pull-right">
              <input class="btn btn-primary" name="commit" type="submit" value="Create User">
              <a class="btn btn-danger" data-dismiss="modal" href="#">Cancel</a>
            </div>
          </div>
        </form>
      </div>
jquery  twitter-bootstrap  datepicker 
— Jefe Nass
fuente
1
¿Puedes poner tu código en un jsFiddle ? Hará que sea más fácil para las personas probarlo.
— Sara
No he tenido ningún problema para que estos diversos complementos de JQuery y marcos de JavaScript funcionen juntos: jsfiddle.net/mccannf/xekuW/9
— mccannf
@Sara aquí está el jsfiddle jsfiddle.net/h7cMa
— Boss Nass
@mccannf después de investigar un poco mi problema, parece que el css está causando el problema. cuando la ventana está cargada, el índice Z, creo que es, no permite que se muestre la información sobre herramientas o el selector de fechas
— Boss Nass
1
@ Paul'Whippet'McGuane, te recomiendo que mires tu CSS y JS bootstrap. Su modal se establece en un valor de índice z muy alto (99999). Simplemente compare mi jsfiddle anterior con el suyo.
— mccannf

Respuestas:

243

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

agregue algo como esto en la página o css 

<style>
.datepicker{z-index:1151 !important;}
</style>
— Sujay sreedhar
fuente
1
Sin embargo, funciona si cierro el modal y lo vuelvo a abrir, arroja un error.
— Jnanaranjan
Ha pasado mucho tiempo y ya lo he olvidado. ¡Lo siento!
— Jnanaranjan
@Sujaysreedhar solo pregunta: ¿por qué el índice 1151? Lo cambié a 1000000, luego todavía funcionó, pero esta vez mostró solo una esquina superior izquierda adicional cuando se ejecuta el script
— smoothumut
La dosis no importa mientras esté por encima de 1150, ya que el índice z de la ventana modal es 1150 .. El índice z determina qué capa mostrar en la parte superior, siempre que esté arriba en su caso 1000000, funcionará
— Sujay sreedhar
4
Si usa bootstrap-datetimepicker.js, el selector correcto es.ui-datepicker
— jim smith
60

para mí solo funcionó con! importante en css

.datepicker {z-index: 1151 !important;}
— cwirz
fuente
7
Solo me funciona con! Important si se agrega al archivo css. Sin embargo, si coloca el estilo directamente en el encabezado de la página, parece funcionar bien sin agregar! Important, pero esto no es excelente si el selector de fecha se va a utilizar en diferentes páginas.
— burbujeante
¡Perfecto! Lo agregué en datepicker.css y funciona como un encanto
— javaboygo
11

Yo suelo: 

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

De esta manera: si el modal no está abierto y desea que el selector de fechas esté en el índice z normal (en mi caso, necesitaba que estuviera debajo del menú desplegable, que tiene un índice z de 1000), funciona.

Si el modal está abierto, el body.modal-openselector de fechas debe estar sobre el índice z modal (1040 o 1050), así que use el selector.

Estoy usando Bootstrap 3.1.1

— Sean
fuente
8

Según 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 ...

— jconstantino
fuente
7

Agregue z-indez en la clase ui-datepicker 

<style>
    .ui-datepicker{ z-index:1151 !important; }
</style>
— g_arrabal
fuente
6

Como dijo mccannf en su comentario :

Te recomiendo que mires tu CSS y JS bootstrap. Su modal se establece en un valor de índice z muy alto (99999). Solo compara mi jsfiddle anterior con el tuyo

— Jefe Nass
fuente
4

Prueba con este código.

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

resolverá el problema cuando esté utilizando bootstrap V3

— Danilo Colasso
fuente
1
.ui-datepickertrabajó para mí donde .datepickerno lo hizo.
— Tim Ludwinski
3

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
— Andrea
fuente
3

Tuve este error, porque me desplacé hacia abajo. Datepicker tenía una 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.

— Sebeg
fuente
Me funcionó como una solución temporal. Muchas gracias. Pero me gustaría encontrar una solución final para que mi selector de fechas se muestre correctamente, sin importar la posición de desplazamiento. Intentaré encontrarlo más tarde. ¡¡Gracias de nuevo!!
— Geziel Carvalho
1

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

desde 

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

a

.bootstrap-timepicker-widget.dropdown-menu.open {
  display: inline-block;
  z-index:1151;
}
— Silvio Troia
fuente
1

si usa bootstrap V3, intente esto.


    .bootstrap-datetimepicker-widget 
    {
        z-index: 1200   !important;
    }
— Konrad
fuente
1

Para Bootstrap 3.xy Ace Template, wrapbootstrap

Datepicker y Timepicker dentro de un modal

<style>
    body.modal-open .datepicker {
        z-index: 1050 !important;
    }
    body.modal-open .bootstrap-timepicker-widget {
        z-index: 1050 !important;
    }
</style>
— Der Schwarze König
fuente
1 
$('#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 para mí. Aunque llamé modelo a través de ajax

— Suba
fuente
1

Estas soluciones funcionaron perfectamente para mí para renderizar el selector de fecha sobre el modal de arranque.

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

HTML

<br/>
<div class="wrapper">
Some content goes here<br />
Some more content.
<div class="row">
<div class="col-xs-4">

<!-- padding for jsfiddle -->
<div class="input-group date" id="dtp">
<input type="text" class="form-control" />  
<span class="input-group-addon">
  <span class="glyphicon-calendar glyphicon"></span>
</span>
</div>
</div>
</div>
</div>

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;
}
— Adnan Boota
fuente
Esto es para bootstrap-datetimepicker pero sigue siendo útil.
— Ben Trewern
0

Trate de cambiar el valor del índice Z para .modaly .modal-backdropmenos del .datepickervalor del índice Z.

— Stepan Zakharov
fuente
0

Para BootsTrap Calender use esto

/ El CSS del índice de calendario /

.bootstrap-datetimepicker-widget {
   z-index:99999 !important;
}
— DropAndTrap
fuente
0

intente 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);
            });
— Quiero aprender
fuente
0

Fwiw. Necro pero aún así.

para <link href="https://cdnjs.cloudflare.com/ajax/libs/timepicker/1.3.5/jquery.timepicker.min.css" rel="stylesheet">

lo necesitaba

<style type="text/css">
.ui-timepicker-container {z-index: 1151 !important;}
</style>

en el HEAD del documento para que acepte la anulación

Probé casi todas las demás soluciones aquí antes de recurrir a eso.

— twobob
fuente
0 
// 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'});
— Femi Rufus
fuente
2
Gracias por este fragmento de código, que puede proporcionar ayuda inmediata y limitada. Una explicación adecuada mejoraría enormemente su valor a largo plazo al mostrar por qué es una buena solución al problema y lo haría más útil para futuros lectores con otras preguntas similares. Por favor, editar su respuesta a añadir un poco de explicación, incluyendo los supuestos realizados.
— Capricornio
-1

Deja que te ayude,

puede actualizar su bootstrap.min.css

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

entonces aparecerá el selector de fechas

— Anshar Firman
fuente
-1

Envuelva el código JavaScript de su selector de datos dentro 

function pageLoad() {}
— Herman Zun
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.