Twitter Bootstrap Datepicker dans la fenêtre modale

83

J'utilise actuellement le framework Twitter Bootstrap, et lors de l'utilisation des fenêtres modales, je ne peux pas faire en sorte que les éléments js fonctionnent comme le sélecteur de date ou la validation, bien que choisis et rendus uniformes correctement. s'il vous plaît voir ma fenêtre modale ci-dessous:

  <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 Patron Nass
la source
1
Pouvez-vous mettre votre code dans un jsFiddle ? Il sera plus facile pour les gens de le tester.
Sara
Je n'ai eu aucun problème à faire fonctionner ensemble ces différents plugins JQuery et frameworks JavaScript: jsfiddle.net/mccannf/xekuW/9
mccannf
@Sara voici le jsfiddle jsfiddle.net/h7cMa
Boss Nass
@mccannf après avoir fait un peu de recherche sur mon problème, il semble que le css soit à l'origine du problème. lorsque la fenêtre est chargée, le z-index que je pense ne permet pas l'affichage des info-bulles ou du sélecteur de date
Boss Nass
1
@ Paul'Whippet'McGuane, je vous recommande de regarder votre bootstrap CSS et JS. Votre modal est défini sur une valeur d'index z très élevée (99999). Comparez simplement mon jsfiddle ci-dessus avec le vôtre.
mccannf

Réponses:

243

ajouter z-index au-dessus de 1051 dans la classe datepicker

ajouter quelque chose comme ça dans la page ou css 

<style>
.datepicker{z-index:1151 !important;}
</style>
Sujay Sreedhar
la source
1
Cela fonctionne cependant si je ferme le modal et l'ouvre à nouveau, cela génère une erreur.
Jnanaranjan
Cela fait longtemps et je l'ai déjà oublié. Pardon!
Jnanaranjan
@Sujaysreedhar juste question: pourquoi l'indice 1151? Je l'ai changé en 1000000, puis cela fonctionnait toujours, mais cette fois, il n'affiche que le coin supérieur gauche supplémentaire lorsque le script s'exécute
smoothumut
Il dose pas d' importance tant que son plus haut 1150, étant donné que le z-index de fenêtre modale est 1150 .. z-index détermine quelle couche d'afficher sur le dessus de manière aussi longtemps que son plus haut dans ur cas 1000000 il travaillera
Sujay sreedhar
4
Si vous utilisez bootstrap-datetimepicker.js, le sélecteur correct est.ui-datepicker
jim smith
60

pour moi, cela ne fonctionnait qu'avec! important en css

.datepicker {z-index: 1151 !important;}
cwirz
la source
7
Cela ne fonctionne que pour moi avec! Important s'il est ajouté au fichier css. Cependant, si vous mettez le style directement dans l'en-tête de la page, cela semble fonctionner correctement sans ajouter! Important, mais ce n'est pas génial si le sélecteur de date doit être utilisé sur différentes pages.
également
Parfait! Je l'ai ajouté dans datepicker.css et fonctionne comme un charme
javaboygo
11

J'utilise: 

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

De cette façon: si le modal n'est pas ouvert et que vous voulez que le sélecteur de date soit au z-index normal (dans mon cas, j'avais besoin qu'il soit dans le menu déroulant, qui a un z-index de 1000), Ça marche.

Si le modal est ouvert, le sélecteur de date doit être sur le z-index modal (1040 ou 1050), utilisez donc lebody.modal-open sélecteur.

J'utilise Bootstrap 3.1.1

Sean
la source
8

Selon http://www.daterangepicker.com/ (options)

$('#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 a résolu mon problème ...

jconstantino
la source
7

Ajouter z-indez dans la classe ui-datepicker 

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

Comme l'a dit mccannf dans son commentaire :

Je vous recommande de regarder votre bootstrap CSS et JS. Votre modal est défini sur une valeur d'index z très élevée (99999). Comparez simplement mon jsfiddle ci-dessus avec le vôtre

Patron Nass
la source
4

Essayez avec ce morceau de code.

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

résoudra le problème lorsque vous utilisez bootstrap V3

Danilo Colasso
la source
1
.ui-datepickertravaillé pour moi où .datepickerpas.
Tim Ludwinski
3

Je pense qu'il est préférable de changer la fonction logique du plugin. Autour de la rangée 552, je change ceci:

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

dans ceci:

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

J'ai eu cette erreur, car j'ai fait défiler vers le bas. Datepicker avait une mauvaise position supérieure dans fixe. Je l'utilise juste maintenant comme:

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

et son fonctionne bien maintenant.

Sebeg
la source
Cela a fonctionné pour moi comme une solution temporaire. Merci beaucoup. Mais j'aimerais trouver une solution finale pour que mon sélecteur de date s'affiche correctement, quelle que soit la position du défilement. J'essaierai de le retrouver plus tard. Merci encore!!
Geziel Carvalho
1

pouvez-vous changer dans votre fichier css bootstrap-timepicker/css/bootstrap-timepicker.css

de 

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

à

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

si vous utilisez bootstrap V3, essayez ceci.


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

Pour Bootstrap 3.x et Ace Template wrapbootstrap

Datepicker et Timepicker dans 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
la source
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;
}

Cela fonctionne de moi. Même si j'ai appelé model via ajax

Suba
la source
1

Cette solution a parfaitement fonctionné pour moi pour rendre le sélecteur de date par-dessus le modal bootstrap.

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
la source
C'est pour bootstrap-datetimepicker mais toujours utile.
Ben Trewern
0

Essayez de modifier la valeur z-index pour .modalet .modal-backdropinférieure à la .datepickervaleur z-index.

Stepan Zakharov
la source
0

Pour BootsTrap Calender, utilisez ceci

/ L'index du calendrier CSS /

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

essayez d'utiliser ce code cela fonctionne pour moi. d'ailleurs il provenait de ce site 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);
            });
Je veux apprendre
la source
0

Fwiw. Necro mais quand même.

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

J'ai eu besoin

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

dans la tête du document pour qu'il accepte le remplacement

J'ai essayé la plupart des autres solutions ici avant de recourir à cela.

twobob
la source
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
la source
2
Merci pour cet extrait de code, qui pourrait fournir une aide limitée et immédiate. Une explication appropriée améliorerait considérablement sa valeur à long terme en montrant pourquoi c'est une bonne solution au problème et la rendrait plus utile aux futurs lecteurs avec d'autres questions similaires. Veuillez modifier votre réponse pour ajouter des explications, y compris les hypothèses que vous avez formulées.
Capricorne
-1

essaye ça

#ui-datepicker-div {
  z-index: 100000;
}
Majid Golshadi
la source
-1

Laissez-moi vous aider,

vous pouvez mettre à jour votre bootstrap.min.css

dans le menu déroulant de la classe, vous pouvez changer la valeur de l'index z en 2000

donc datepicker apparaîtra

Anshar Firman
la source
-1

Enveloppez votre code JavaScript de datapicker à l'intérieur 

function pageLoad() {}
Herman Zun
la source