Datetimepicker 日历未在正确位置打开

Posted 2023-05-07

【中文标题】Datetimepicker 日历未在正确位置打开

【英文标题】：Datetimepicker calendar is not open in correct place

【发布时间】：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-celloverflow:visible

<div id="grid_json" style="margin:100px;"></div>

.

【问题讨论】：

日期选择器元素的 margin-left 属性默认设置为 50 px。见this picture。

jsfiddle.net/rtzxsa3e/12

检查这个小提琴。我已经删除了左边距。我问，日历没有在正确的位置打开。

【参考方案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 添加它。