Twitter Bootstrap Datepicker w oknie modalnym

Question 1

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>

Question 2

dodaj indeks z powyżej 1051 w klasie datepicker

dodaj coś takiego na stronie lub w css

<style>
.datepicker{z-index:1151 !important;}
</style>

Question 3

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

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

Question 4

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

Question 5

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 ...

Question 6

Dodaj z-indez w class ui-datepicker

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

Question 7

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

Question 8

Spróbuj z tym fragmentem kodu.

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

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

Question 9

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

Question 10

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.

Question 11

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;
}

Question 12

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


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

Question 13

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>

Question 14

$('#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

Question 15

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;
}

Question 16

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

Question 17

W przypadku kalendarza BootsTrap użyj tego

/ Indeks kalendarza CSS /

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

Question 18

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);
            });

Question 19

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.

Question 20

// 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'});

Question 21

Spróbuj tego

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

Question 22

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

Question 23

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

function pageLoad() {}

Answer 1

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>

Answer 2

1

Czy możesz umieścić swój kod w jsFiddle ? Ułatwi to ludziom testowanie tego.

Sara

Answer 3

Nie miałem żadnego problemu ze współpracą tych różnych wtyczek JQuery i frameworków JavaScript: jsfiddle.net/mccannf/xekuW/9

mccannf

Answer 4

@Sara, tutaj jest jsfiddle jsfiddle.net/h7cMa

Boss Nass

Answer 5

@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

Answer 6

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

Answer 7

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

Answer 8

1

Działa jednak, jeśli zamknę modal i ponownie otworzę, a następnie wyrzuca błąd.

Jnanaranjan

Answer 9

Minęło dużo czasu i już o tym zapomniałem. Przepraszam!

Jnanaranjan

Answer 10

@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

Answer 11

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

Answer 12

4

Jeśli używasz bootstrap-datetimepicker.js, prawidłowym selektorem jest.ui-datepicker

jim smith

Answer 13

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

Answer 14

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

Answer 15

Doskonały! Dodałem go w datepicker.css i działa jak urok

javaboygo

Answer 16

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

Answer 17

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 ...

Answer 18

7

Dodaj z-indez w class ui-datepicker

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

g_arrabal
źródło

Answer 19

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

Answer 20

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

Answer 21

1

.ui-datepickerpracował dla mnie, gdzie .datepickernie.

Tim Ludwinski

Answer 22

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

Answer 23

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

Answer 24

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

Answer 25

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;
}

Answer 26

1

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


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

Konrad
źródło

Answer 27

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>

Answer 28

$('#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

Answer 29

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;
}

Answer 30

To jest dla bootstrap-datetimepicker, ale nadal przydatne.

Ben Trewern,

Answer 31

0

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

Stepan Zakharov
źródło

Answer 32

0

W przypadku kalendarza BootsTrap użyj tego

/ Indeks kalendarza CSS /

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

DropAndTrap
źródło

Answer 33

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);
            });

Answer 34

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.

Answer 35

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

Answer 36

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

Answer 37

-1

Spróbuj tego

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

Majid Golshadi
źródło

Answer 38

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

Answer 39

-1

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

function pageLoad() {}

Herman Zun
źródło

Twitter Bootstrap Datepicker w oknie modalnym

Odpowiedzi: