Twitter Bootstrap Datepicker im modalen Fenster

83

Ich verwende derzeit das Twitter Bootstrap-Framework, und wenn ich die modalen Fenster verwende, kann ich nicht über js-Elemente hinwegkommen, um wie Datepicker oder Validierung zu funktionieren, obwohl ausgewählt und einheitlich korrekt gerendert. Bitte sehen Sie mein modales Fenster unten:

  <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 
— Boss Nass
quelle
1
Können Sie Ihren Code in eine jsFiddle einfügen ? Es wird den Leuten das Testen erleichtern.
— Sara
Ich hatte kein Problem damit, dass diese verschiedenen JQuery-Plugins und JavaScript-Frameworks zusammenarbeiten: jsfiddle.net/mccannf/xekuW/9
— mccannf
@ Sara hier ist die jsfiddle jsfiddle.net/h7cMa
— Boss Nass
@mccannf Nachdem ich ein bisschen nach meinem Problem gesucht habe, scheint es, dass das CSS das Problem verursacht. Wenn das Fenster geladen ist, lässt der Z-Index, von dem ich denke, dass er es ist, nicht zu, dass die Tooltips oder der Datepicker angezeigt werden
— Boss Nass
1
@ Paul'Whippet'McGuane, ich empfehle Ihnen, sich Ihr Bootstrap-CSS und JS anzusehen. Ihr Modal wird auf einen sehr hohen Z-Index-Wert (99999) eingestellt. Vergleichen Sie einfach meine jsfiddle oben mit Ihrer.
— McCannf

Antworten:

243

Fügen Sie den Z-Index über 1051 in der Datumsauswahl der Klasse hinzu

füge so etwas in page oder css hinzu 

<style>
.datepicker{z-index:1151 !important;}
</style>
— Sujay Sreedhar
quelle
1
Es funktioniert jedoch, wenn ich das Modal schließe und wieder öffne, dann wirft es einen Fehler aus.
— Jnanaranjan
Es ist lange her und ich habe es bereits vergessen. Es tut uns leid!
— Jnanaranjan
@ Sujaysreedhar nur Frage: Warum ist Index 1151? Ich habe es auf 1000000 geändert, dann hat es immer noch funktioniert, aber dieses Mal wurde nur eine zusätzliche linke obere Ecke
— angezeigt,
Es spielt keine Rolle, solange es über 1150 liegt, da der Z-Index des
— Modalfensters
4
Wenn Sie bootstrap-datetimepicker.js verwenden, ist der richtige Selektor.ui-datepicker
— Jim Smith
60

für mich hat es nur geklappt mit! wichtig in css

.datepicker {z-index: 1151 !important;}
— Cwirz
quelle
7
Es funktioniert nur bei mir mit! Wichtig, wenn es in die CSS-Datei aufgenommen wird. Wenn Sie den Stil jedoch direkt in den Kopf der Seite einfügen, scheint er ohne Hinzufügen von! Wichtig zu funktionieren. Dies ist jedoch nicht besonders gut, wenn der Datepicker auf verschiedenen Seiten verwendet werden soll.
— Alsobubbly
Perfekt! Ich habe es in datepicker.css hinzugefügt und funktioniert wie ein Zauber
— javaboygo
11

Ich benutze: 

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

So: Wenn das Modal nicht geöffnet ist und Sie möchten, dass der Datepicker den normalen Z-Index hat (in meinem Fall musste er sich in der Dropdown-Liste des Menüs befinden, die einen Z-Index von 1000 hat). Es klappt.

Wenn die modal ist offen, auf den Bedürfnisse picker über seinen den modalen z-index (1040 oder 1050), so verwendet diebody.modal-open Wähler.

Ich verwende Bootstrap 3.1.1

— Sean
quelle
8

Laut http://www.daterangepicker.com/ (Optionen)

$('#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 hat mein Problem gelöst ...

— jconstantino
quelle
7

Fügen Sie z-indez in der Klasse ui-datepicker hinzu 

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

Wie McCannf in seinem Kommentar sagte :

Ich empfehle Ihnen, sich Ihr Bootstrap-CSS und JS anzusehen. Ihr Modal wird auf einen sehr hohen Z-Index-Wert (99999) eingestellt. Vergleichen Sie einfach meine jsfiddle oben mit Ihrer

— Boss Nass
quelle
4

Versuchen Sie es mit diesem Code.

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

wird das Problem lösen, wenn Sie Bootstrap V3 verwenden

— Danilo Colasso
quelle
1
.ui-datepickerarbeitete für mich wo .datepickernicht.
— Tim Ludwinski
3

Ich denke, es ist besser, die logische Funktion im Plugin zu ändern. Um Zeile 552 ändere ich dies:

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

das mögen:

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

Ich hatte diesen Fehler, weil ich unten gescrollt habe. Datepicker hatte eine falsche Spitzenposition in fest. Ich benutze es jetzt einfach wie:

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

und es funktioniert jetzt gut.

— Sebeg
quelle
Es hat bei mir als vorübergehende Lösung funktioniert. Vielen Dank. Aber ich möchte eine endgültige Lösung finden, damit mein Datepicker korrekt angezeigt wird, unabhängig von der Bildlaufposition. Ich werde versuchen, es später zu finden. Danke nochmal!!
— Geziel Carvalho
1

können Sie in Ihrer CSS-Datei ändern bootstrap-timepicker/css/bootstrap-timepicker.css

von 

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

zu

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

Wenn Sie Bootstrap V3 verwenden, versuchen Sie dies.


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

Für Bootstrap 3.x und Ace Template Wrapbootstrap

Datepicker und Timepicker in einem 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
quelle
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;
}

Das funktioniert von mir. Obwohl ich Model via Ajax angerufen habe

— Suba
quelle
1

Diese Lösung funktionierte perfekt für mich, um den Datepicker über Bootstrap modal zu rendern.

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
quelle
Dies ist für Bootstrap-DatetimePicker, aber immer noch nützlich.
— Ben Trewern
0

Versuchen Sie, den Z-Index-Wert für .modalund .modal-backdropunter den .datepickerZ-Index-Wert zu ändern .

— Stepan Zakharov
quelle
0

Verwenden Sie dies für den BootsTrap-Kalender

/ Der Kalenderindex CSS /

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

Versuchen Sie, diesen Code zu verwenden, der für mich funktioniert. Übrigens kam es von dieser Seite 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);
            });
— Ich will lernen
quelle
0

Fwiw. Nekro aber immer noch.

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

ich brauchte

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

im HEAD des Dokuments, damit es die Überschreibung akzeptiert

Ich habe hier fast jede andere Lösung ausprobiert, bevor ich darauf zurückgegriffen habe.

— Twobob
quelle
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
quelle
2
Vielen Dank für dieses Code-Snippet, das möglicherweise nur begrenzte und sofortige Hilfe bietet. Eine richtige Erklärung würde ihren langfristigen Wert erheblich verbessern, indem sie zeigt, warum dies eine gute Lösung für das Problem ist, und es für zukünftige Leser mit anderen, ähnlichen Fragen nützlicher machen. Bitte bearbeiten Sie Ihre Antwort, um eine Erklärung hinzuzufügen, einschließlich der von Ihnen getroffenen Annahmen.
— Steinbock
-1

Lass mich dir helfen,

Sie können Ihre bootstrap.min.css aktualisieren

Im Dropdown-Menü der Klasse können Sie den Z-Index-Wert in 2000 ändern

Der Datepicker wird also angezeigt

— Anshar Firman
quelle
-1

Wickeln Sie Ihren Datenpicker-JavaScript-Code ein 

function pageLoad() {}
— Herman Zun
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.