模态窗口中的 Twitter Bootstrap Datepicker答案

【问题标题】：Twitter Bootstrap Datepicker within modal window模态窗口中的 Twitter Bootstrap Datepicker
【发布时间】：2012-10-10 07:18:23
【问题描述】：

我目前正在使用 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>

【问题讨论】：

你能把你的代码放到jsFiddle吗？这将使人们更容易对其进行测试。
让这些不同的 JQuery 插件和 JavaScript 框架协同工作没有任何问题：jsfiddle.net/mccannf/xekuW/9
@Sara 这里是 jsfiddle jsfiddle.net/h7cMa
@mccannf 在对我的问题进行了一些研究之后，似乎是 css 导致了问题。加载窗口时，我认为它是 z-index，不允许显示工具提示或日期选择器
@Paul'Whippet'McGuane，我建议你看看你的引导 CSS 和 JS。您的模态被设置为非常高的 z-index 值 (99999)。只需将上面的 jsfiddle 与您的进行比较即可。

标签： jquery twitter-bootstrap datepicker

【解决方案1】：

在类 datepicker 中添加高于 1051 的 z-index

在页面或css中添加类似的东西

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

【讨论】：

它可以工作，但是如果我关闭模式并再次打开它会引发错误。
好久不见了。对不起！
@Sujaysreedhar 只是问题：为什么索引是 1151？我已将其更改为 1000000 然后它仍然有效，但这次它在脚本运行时显示了额外的左上角
只要它高于 1150 就没有关系，因为模态窗口的 z-index 是 1150.. z-index 确定要显示在顶部的图层，只要它在我们的案例中高于 1000000它会工作
如果使用 bootstrap-datetimepicker.js 正确的选择器是.ui-datepicker

【解决方案2】：

对我来说，它只适用于 !important in css

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

【讨论】：

如果添加到 css 文件中，它仅适用于 !important。但是，如果您将样式直接放在页面的头部，它似乎可以在不添加 !important 的情况下正常工作，但如果要在不同页面中使用日期选择器，这并不是很好。
完美！我在 datepicker.css 中添加了它，就像一个魅力

【解决方案3】：

我使用：

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

这样：如果模态没有打开，并且您希望日期选择器处于正常的 z-index（在我的情况下，我需要它位于菜单下拉菜单下，它的 z-index 为 1000），它可以工作。

如果模态打开，则日期选择器需要超过模态 z-index（1040 或 1050），因此请使用 body.modal-open 选择器。

我正在使用 Bootstrap 3.1.1

【讨论】：

【解决方案4】：

根据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 解决了我的问题...

【讨论】：

【解决方案5】：

在类 ui-datepicker 中添加 z-indez

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

【讨论】：

【解决方案6】：

正如mccannf在his comment中所说：

我建议你看看你的引导 CSS 和 JS。您的模态被设置为非常高的 z-index 值 (99999)。把我上面的jsfiddle和你的比较一下

【讨论】：

【解决方案7】：

试试这段代码。

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

会在你使用bootstrap V3

时解决问题

【讨论】：

.ui-datepicker 为我工作，而 .datepicker 没有。

【解决方案8】：

我认为最好更改插件中的逻辑功能。在第 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

【讨论】：

【解决方案9】：

我有这个错误，因为我滚动到底部。日期选择器的顶部位置错误已修复。我现在只是像这样使用它：

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

现在工作正常。

【讨论】：

它作为临时解决方案对我有用。非常感谢。但我想找到一个最终解决方案，让我的日期选择器正确显示，无论滚动位置如何。稍后我会尝试找到它。再次感谢您！

【解决方案10】：

你能改变你的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;
}

【讨论】：

【解决方案11】：

如果你使用 bootstrap V3 试试这个。


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

【讨论】：

【解决方案12】：

对于 Bootstrap 3.x 和 Ace 模板wrapbootstrap

模态框内的日期选择器和时间选择器

<style>
    body.modal-open .datepicker {
        z-index: 1050 !important;
    }
    body.modal-open .bootstrap-timepicker-widget {
        z-index: 1050 !important;
    }
</style>

【讨论】：

【解决方案13】：

$('#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 调用模型

【讨论】：

【解决方案14】：

这个解决方案非常适合我将日期选择器呈现在引导模式之上。

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 但仍然有用。

【解决方案15】：

尝试将.modal 和.modal-backdrop 的z-index 值更改为小于.datepicker z-index 值。

【讨论】：

【解决方案16】：

对于 BootsTrap 日历使用这个

/日历索引 CSS/

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

【讨论】：

【解决方案17】：

尝试使用对我有用的代码。顺便说一句，它来自这个网站 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);
            });

【讨论】：

【解决方案18】：

Fwiw。死灵但仍然。

为<link href="//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 中接受覆盖

在求助之前，我在这里尝试了大多数其他解决方案。

【讨论】：

【解决方案19】：

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

【讨论】：

感谢您提供此代码 sn-p，它可能会提供一些有限的即时帮助。 proper explanation 将通过展示为什么这是解决问题的好方法，并使其对有其他类似问题的未来读者更有用，从而大大提高其长期价值。请edit您的回答添加一些解释，包括您所做的假设。

【解决方案20】：

试试这个

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

【讨论】：

【解决方案21】：

让我帮你，

你可以更新你的 bootstrap.min.css

在类下拉菜单中，您可以将 z-index 值更改为 2000

所以日期选择器会出现

【讨论】：

【解决方案22】：

将你的数据选择器 JavaScript 代码包装在里面

function pageLoad() {}

【讨论】：