Twitter Bootstrap Datepicker в модальном окне

83

В настоящее время я использую платформу Twitter Bootstrap, и при использовании модальных окон я не могу заставить элементы js работать как datepicker или проверка, хотя выбранный и однородный рендеринг выполняется правильно. пожалуйста, посмотрите мое модальное окно ниже:

  <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>
Босс Насс
источник
1
Можете ли вы поместить свой код в jsFiddle ? Людям будет проще его протестировать.
Сара
У меня не было проблем с совместной работой
mccannf
@Sara, вот и jsfiddle jsfiddle.net/h7cMa
Boss
@mccannf после небольшого исследования моей проблемы кажется, что проблема возникает из-за css. когда окно загружается, z-index, я думаю, это не позволяет отображать всплывающие подсказки или датупикер
Босс Насс,
1
@ Paul'Whippet'McGuane, я рекомендую вам взглянуть на ваш начальный CSS и JS. Для вашего модального окна установлено очень высокое значение z-index (99999). Просто сравните мой jsfiddle выше с вашим.
mccannf

Ответы:

243

добавить z-index выше 1051 в класс datepicker

добавить что-то подобное на странице или css

<style>
.datepicker{z-index:1151 !important;}
</style>
Суджай Сридхар
источник
1
Однако он работает, если я закрою модальное окно и открою его снова, тогда он выдает ошибку.
Джнанаранджан
Прошло много времени, и я уже забыл об этом. Сожалею!
Джнанаранджан
@Sujaysreedhar просто вопрос: почему индекс 1151? Я изменил его на 1000000, тогда он все еще работал, но на этот раз он отображал только дополнительный левый верхний угол при
запуске
Это не имеет значения, пока оно выше 1150, поскольку z-index модального окна составляет 1150 .. z-index определяет, какой слой показывать наверху, пока он выше в случае ur 1000000, он будет работать
Суджай Сридхар
4
При использовании bootstrap-datetimepicker.js правильный селектор.ui-datepicker
jim smith
60

для меня это работало только с! important в css

.datepicker {z-index: 1151 !important;}
Cwirz
источник
7
У меня это работает только с! Important, если он добавлен в файл css. Однако, если вы поместите стиль непосредственно в заголовок страницы, он, похоже, будет работать нормально без добавления! Important, но это не очень хорошо, если средство выбора даты будет использоваться на разных страницах.
alsobubbly
Отлично! Я добавил его в datepicker.css и работает как шарм
javaboygo
11

Я использую:

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

Таким образом: если модальное окно не открыто, и вы хотите, чтобы датапикер находился с обычным z-индексом (в моем случае мне нужно, чтобы он находился в раскрывающемся меню с z-индексом 1000), оно работает.

Если модальный является открытой, DatePicker должен быть более модальное Z-индекс (1040 или 1050), поэтому использовать body.modal-openселектор.

Я использую Bootstrap 3.1.1

Шон
источник
8

Согласно http://www.daterangepicker.com/ (варианты)

$('#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 решил мою проблему ...

jconstantino
источник
7

Добавить z-indez в класс ui-datepicker

<style>
    .ui-datepicker{ z-index:1151 !important; }
</style>
g_arrabal
источник
6

Как сказал Макканнф в своем комментарии :

Я рекомендую вам взглянуть на свой начальный CSS и JS. Для вашего модального окна установлено очень высокое значение z-index (99999). Просто сравните мой jsfiddle выше с вашим

Босс Насс
источник
4

Попробуйте использовать этот фрагмент кода.

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

решит проблему, когда вы используете bootstrap V3

Данило Колассо
источник
1
.ui-datepickerработал у меня там, где .datepickerне работал .
Тим Людвински 05
3

Думаю, лучше изменить логическую функцию в плагине. В строке 552 я меняю это:

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

в это:

            var zIndex = parseInt(this.element.parents().filter(function(){
                return $(this).css('z-index') !== 'auto';
            }).first().css('z-index')) + 10 * 1000; //think is enought
Андреа
источник
3

У меня была эта ошибка, потому что я прокручивал вниз. У Datepicker фиксировалось неправильное верхнее положение. Я просто использую это сейчас как:

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

и теперь он работает нормально.

Себег
источник
Это сработало для меня как временное решение. Большое спасибо. Но я хотел бы найти окончательное решение, чтобы мой datepicker отображался правильно, независимо от положения прокрутки. Попробую найти позже. Еще раз спасибо !!
Geziel Carvalho
1

вы можете изменить свой файл css bootstrap-timepicker/css/bootstrap-timepicker.css

из

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

к

.bootstrap-timepicker-widget.dropdown-menu.open {
  display: inline-block;
  z-index:1151;
}
Сильвио Троя
источник
1

если вы используете bootstrap V3, попробуйте это.


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

Конрад
источник
1

Для Bootstrap 3.x и Ace Template wrapbootstrap

Datepicker и Timepicker внутри модального окна

<style>
    body.modal-open .datepicker {
        z-index: 1050 !important;
    }
    body.modal-open .bootstrap-timepicker-widget {
        z-index: 1050 !important;
    }
</style>
Der Schwarze König
источник
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;
}

Это работает у меня. Хотя я вызвал модель через ajax

Суба
источник
1

Эти решения отлично сработали для меня, чтобы отобразить datepicker поверх модального окна начальной загрузки.

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;
}
Аднан Бута
источник
Это для bootstrap-datetimepicker, но все же полезно.
Ben Trewern
0

Попробуйте изменить значение г-индексный .modalи .modal-backdropменьше , чем .datepickerзначение Z-индекс.

Степан Захаров
источник
0

Для каландра BootsTrap используйте это

/ Календарный указатель CSS /

.bootstrap-datetimepicker-widget {
   z-index:99999 !important;
}
DropAndTrap
источник
0

попробуйте использовать этот код, он работает для меня. кстати, он пришел с этого сайта 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);
            });
Я хочу учиться
источник
0

Fwiw. Некро но все же.

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

мне было нужно

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

в HEAD документа, чтобы он принял переопределение

Я пробовал почти все другие решения, прежде чем прибегать к этому.

два боба
источник
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'});
Феми Руфус
источник
2
Спасибо за этот фрагмент кода, который может оказать некоторую немедленную помощь. Надлежащее объяснение будет значительно улучшить свою долгосрочную ценность, показывая , почему это является хорошим решением проблемы и сделает его более полезным для читателей будущих с другими подобными вопросами. Пожалуйста , измените свой ответ , чтобы добавить некоторые объяснения, в том числе допущений , которые вы сделали.
Козерог
-1

попробуй это

#ui-datepicker-div {
  z-index: 100000;
}
Маджид Гольшади
источник
-1

давай я тебе помогу,

вы можете обновить свой bootstrap.min.css

в раскрывающемся меню класса вы можете изменить значение z-index на 2000

так что датапикер появится

Аншар Фирман
источник
-1

Оберните код JavaScript вашего датапикера внутрь

function pageLoad() {}
Герман Зун
источник