Question

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

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

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

Answer 2

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

Datetimepicker日历未在正确的位置打开

2 个答案: