Twitter Bootstrap Datepicker w oknie modalnym

83

Obecnie używam frameworka Twitter Bootstrap i podczas korzystania z okien modalnych nie mogę uzyskać dostępu do elementów js, aby działały jak datepicker lub walidacja, chociaż są prawidłowo wybrane i jednolite renderowanie. zobacz moje okno modalne poniżej:

  <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
źródło
1
Czy możesz umieścić swój kod w jsFiddle ? Ułatwi to ludziom testowanie tego.
— Sara
Nie miałem żadnego problemu ze współpracą tych różnych wtyczek JQuery i frameworków JavaScript: jsfiddle.net/mccannf/xekuW/9
— mccannf
@Sara, tutaj jest jsfiddle jsfiddle.net/h7cMa
— Boss Nass
@mccannf Po dokładnym zbadaniu mojego problemu wydaje się, że przyczyną problemu jest css. kiedy okno jest ładowane, indeks Z, jak sądzę, nie pozwala na wyświetlanie podpowiedzi lub selektora daty
— Boss Nass
1
@ Paul'Whippet'McGuane, polecam przyjrzeć się swoim bootstrapom CSS i JS. Twój modal jest ustawiany na bardzo wysoką wartość indeksu z (99999). Po prostu porównaj mój jsfiddle powyżej z twoim.
— mccannf

Odpowiedzi:

243

dodaj indeks z powyżej 1051 w klasie datepicker

dodaj coś takiego na stronie lub w css 

<style>
.datepicker{z-index:1151 !important;}
</style>
— Sujay sreedhar
źródło
1
Działa jednak, jeśli zamknę modal i ponownie otworzę, a następnie wyrzuca błąd.
— Jnanaranjan
Minęło dużo czasu i już o tym zapomniałem. Przepraszam!
— Jnanaranjan
@Sujaysreedhar tylko pytanie: dlaczego indeks 1151? Zmieniłem to na 1000000, ale nadal działało, ale tym razem wyświetlało się tylko dodatkowy lewy górny róg, gdy skrypt działa
— smoothumut
Nie ma to znaczenia, o ile jest powyżej 1150, ponieważ indeks z okna modalnego wynosi 1150 .. z-index określa, która warstwa ma być wyświetlana na górze, tak długo, jak powyżej w
— twoim
4
Jeśli używasz bootstrap-datetimepicker.js, prawidłowym selektorem jest.ui-datepicker
— jim smith
60

dla mnie działało tylko z! ważne w css

.datepicker {z-index: 1151 !important;}
— cwirz
źródło
7
U mnie działa tylko z! Ważne, jeśli zostanie dodane do pliku css. Jeśli jednak umieścisz styl bezpośrednio w nagłówku strony, wydaje się, że działa dobrze bez dodawania! Ważne, ale to nie jest świetne, jeśli datapicker ma być używany na różnych stronach.
— prawdopodobnie
Doskonały! Dodałem go w datepicker.css i działa jak urok
— javaboygo
11

Używam: 

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

W ten sposób: jeśli modal nie jest otwarty i chcesz, aby datapicker znajdował się w normalnym indeksie z (w moim przypadku potrzebowałem go pod menu rozwijanym, które ma indeks z 1000), to działa.

Jeśli modal jest otwarty, datepicker musi znajdować się powyżej modalnego indeksu z (1040 lub 1050), więc użyj body.modal-openselektora.

Używam Bootstrap 3.1.1

— Sean
źródło
8

Według http://www.daterangepicker.com/ (opcje)

$('#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 rozwiązał mój problem ...

— jconstantino
źródło
7

Dodaj z-indez w class ui-datepicker 

<style>
    .ui-datepicker{ z-index:1151 !important; }
</style>
— g_arrabal
źródło
6

Jak powiedział McCannf w swoim komentarzu :

Polecam spojrzeć na swój bootstrap CSS i JS. Twój modal jest ustawiany na bardzo wysoką wartość indeksu z (99999). Po prostu porównaj mój jsfiddle powyżej z twoim

— Boss Nass
źródło
4

Spróbuj z tym fragmentem kodu.

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

rozwiąże problem, gdy używasz bootstrap V3

— Danilo Colasso
źródło
1
.ui-datepickerpracował dla mnie, gdzie .datepickernie.
— Tim Ludwinski
3

Myślę, że lepiej zmienić funkcję logiczną we wtyczce. Wokół wiersza 552 zmieniam to:

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

zaangażowany w to:

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

Miałem ten błąd, bo przewinąłem dół. Datepicker miał nieprawidłową najwyższą pozycję w ustalonej pozycji. Po prostu używam go teraz tak:

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

i teraz działa dobrze.

— Sebeg
źródło
U mnie zadziałało jako tymczasowe rozwiązanie. Dziękuję Ci bardzo. Chciałbym jednak znaleźć ostateczne rozwiązanie, które sprawi, że mój datepicker będzie wyświetlany poprawnie, niezależnie od pozycji przewijania. Spróbuję go później znaleźć. Jeszcze raz dziękuję!!
— Geziel Carvalho
1

czy możesz zmienić w swoim pliku css bootstrap-timepicker/css/bootstrap-timepicker.css

od 

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

do

.bootstrap-timepicker-widget.dropdown-menu.open {
  display: inline-block;
  z-index:1151;
}
— Silvio Troia
źródło
1

jeśli używasz bootstrap V3, spróbuj tego.


    .bootstrap-datetimepicker-widget 
    {
        z-index: 1200   !important;
    }
— Konrad
źródło
1

Dla Bootstrap 3.x i Ace Template wrapbootstrap

Datepicker i Timepicker wewnątrz modalu

<style>
    body.modal-open .datepicker {
        z-index: 1050 !important;
    }
    body.modal-open .bootstrap-timepicker-widget {
        z-index: 1050 !important;
    }
</style>
— Der Schwarze König
źródło
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;
}

U mnie to działa. Mimo że zadzwoniłem do modelu przez ajax

— Suba
źródło
1

To rozwiązanie działało idealnie dla mnie, aby renderować datepicker na szczycie modalu 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
źródło
To jest dla bootstrap-datetimepicker, ale nadal przydatne.
— Ben Trewern,
0

Spróbuj zmienić wartość indeksu z dla .modali .modal-backdropmniejszą niż .datepickerwartość indeksu z.

— Stepan Zakharov
źródło
0

W przypadku kalendarza BootsTrap użyj tego

/ Indeks kalendarza CSS /

.bootstrap-datetimepicker-widget {
   z-index:99999 !important;
}
— DropAndTrap
źródło
0

spróbuj użyć tego kodu, który działa dla mnie. swoją drogą pochodzi z tej strony 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);
            });
— Chcę się uczyć
źródło
0

Fwiw. Necro, ale nadal.

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

potrzebowałem

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

w HEAD dokumentu, aby zaakceptował zastąpienie

Wypróbowałem tutaj prawie wszystkie inne rozwiązania, zanim się do tego zdecydowałem.

— dwa razy
źródło
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
źródło
2
Dziękujemy za ten fragment kodu, który może zapewnić ograniczoną, natychmiastową pomoc. Właściwe wyjaśnienie byłoby znacznie poprawić swoją długoterminową wartość pokazując dlaczego jest to dobre rozwiązanie problemu i byłoby bardziej użyteczne dla czytelników przyszłości z innymi, podobnymi pytaniami. Proszę edytować swoją odpowiedź dodać kilka wyjaśnień, w tym założeń już wykonanych.
— Koziorożec
-1

pozwól że ci pomogę,

możesz zaktualizować plik bootstrap.min.css

w rozwijanym menu klasy możesz zmienić wartość z-index na 2000

więc pojawi się datepicker

— Anshar Firman
źródło
-1

Umieść w środku kod JavaScript modułu datapicker 

function pageLoad() {}
— Herman Zun
źródło
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.