Datetimepicker 日历未在正确位置打开答案

【问题标题】：Datetimepicker calendar is not open in correct placeDatetimepicker 日历未在正确位置打开
【发布时间】：2015-06-18 08:54:46
【问题描述】：

Bootstrap datetimepicker 日历在网格外部打开。它没有在正确的位置打开。请看看小提琴，告诉我该怎么做。我希望日历在正确的位置打开，如果需要，日历也可以在网格外可见。我不会在任何时候隐藏日历。请帮我做这件事

http://jsfiddle.net/rtzxsa3e/11/

$(function () {
    var data = [

        { rank: 1, company: 'Exxon Mobil', DatePicker: '04/04/1990 00:00', revenues: '339938.0', profits: '36130.0' },

        { rank: 2, company: 'Wal-Mart Stores', DatePicker: '05/03/2014 00:00', revenues: '315654.0', profits: '11231.0' },
        { rank: 1, company: 'Exxon Mobil', DatePicker: '04/04/1990 00:00', revenues: '339938.0', profits: '36130.0' },

        { rank: 2, company: 'Wal-Mart Stores', DatePicker: '05/03/2014 00:00', revenues: '315654.0', profits: '11231.0' },
        { rank: 1, company: 'Exxon Mobil', DatePicker: '04/04/1990 00:00', revenues: '339938.0', profits: '36130.0' },

        { rank: 2, company: 'Wal-Mart Stores', DatePicker: '05/03/2014 00:00', revenues: '315654.0', profits: '11231.0' },
        { rank: 1, company: 'Exxon Mobil', DatePicker: '04/04/1990 00:00', revenues: '339938.0', profits: '36130.0' },

        { rank: 2, company: 'Wal-Mart Stores', DatePicker: '05/03/2014 00:00', revenues: '315654.0', profits: '11231.0' },
 ];
     var obj = { 
        height:300,
         title: "ParamQuery Grid with JSON Data",
        scrollModel:{autoFit:true, theme:true}
    };

    obj.colModel = [

        { title: "Rank", width: 100, dataType: "integer", dataIndx: "rank" },
        { title: "Company", width: 200, dataType: "string", dataIndx: "company" },
        { title: "DatePicker", width: 200, dataType: "string", dataIndx: "date",editable:false, 
         render : function(){
          var date = '<div class="form-group" style="width:150px;text-align:center"><div class="input-group date" id="datetimepicker123"><input type="text" value="04/05/2012 00:00" class="form-control"><span class="input-group-addon"><span class="glyphicon-calendar glyphicon"></span></span></div></div>';                                                                                                                                                                             

          return date;
        }
         },
        { title: "Revenues ($ millions)", width: 150, dataType: "float", align: "right", dataIndx: "revenues" },
    ];   

     $('body').on('mouseover','.input-group',function() { 

     $(".input-group.date").datetimepicker();

     });    

    obj.dataModel = { data: data };   

    $("#grid_json").pqGrid(obj);
});

span.input-group-addon {
  width: 27px;
}
.pq-grid td.pq-grid-cell{overflow:visible}

&lt;div id="grid_json" style="margin:100px;"&gt;&lt;/div&gt;

【问题讨论】：

日期选择器元素的 margin-left 属性默认设置为 50 px。见this picture。
jsfiddle.net/rtzxsa3e/12
检查这个小提琴。我已经删除了左边距。我问，日历没有在正确的位置打开。

标签： javascript jquery css twitter-bootstrap calendar

【解决方案1】：

Hochas 是对的，因为您的样式会影响 Bootstrap 中的样式。要覆盖它们并将日期选择器保留在表格单元格中，您可以应用这些 CSS 样式：

.form-group {
    margin-left: 0px !important;
    width: 100% !important;
}

【讨论】：

请打开小提琴。我也使用这个 css，但它不起作用。查看小提琴并打开第 5 行或第 6 行。日历隐藏在网格内。我无法选择时间。
@kalidass 在这种情况下，您需要使用 jQuery 增加 .datepicker 类的 z-index。

【解决方案2】：

This thread 处理与您描述的相同的问题。您可以设置日历弹出窗口打开时的 z-index，也可以添加带有 !important 标志的 css 规则并将索引设置为非常高的值，如图所示。

【讨论】：

在同样的小提琴中我该怎么办？它不工作。我也尝试了设置超时功能。日历不会溢出到表格之外。它仅在网格内。我需要不隐藏地显示整个日历。
@ZeroRequiem 打开的日历窗口没有一个名为 datepicker 的类
看看这个小提琴。在这里它正在工作。但日历在左角打开。如何固定在正确的位置。
请看这个小提琴。并帮助我如何做到这一点？
@hochas 正在使用的库通过 JavaScript 添加它。