Bootstrap datetimepicker glyphicon 日历未打开答案

【问题标题】：Bootstrap datetimepicker glyphicon calendar doesn't openBootstrap datetimepicker glyphicon 日历未打开
【发布时间】：2015-03-30 10:15:16
【问题描述】：

我正在尝试使用 Bootstrap 3 日期时间选择器。但是字形日历没有打开。看到这个小提琴： http://jsfiddle.net/vqsss5fx/

$(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' },
        
    ];
    var obj = { 
      
        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;margin-left:50px;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() {		
	 
		$("#datetimepicker123").datetimepicker();
	 });
	
    obj.dataModel = { data: data };
	
    $("#grid_json").pqGrid(obj);
	
});

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

【问题讨论】：

标签： html css twitter-bootstrap jquery-ui bootstrap-datetimepicker

【解决方案1】：

我看到三个问题：

您有多个具有相同 ID (#datetimepicker123) 的 HTML 元素：请避免使用它！
您应该使用$(".input-group.date").datetimepicker(); 代替$("#datetimepicker123").datetimepicker(); 为每个日期输入添加时间选择器。
时间选择器出现，但它被 HTML 单元格截断（您可以看到输入字段下方的箭头）。可能需要一些 CSS 自定义：
```
.pq-grid-cell{
    overflow:visible;
}
```

结果：http://jsfiddle.net/vqsss5fx/3/

【讨论】：

我仍然面临同样的问题。日历已打开，但在单元格内被截断。
您可以使用!important 规则来覆盖定义的样式（这就是我使用链接到我的答案中的 jsfiddle 所做的）
这是否可以一直打开日历。
我不明白“打开的缺点”
表示日历显示在单元格上方。我想在单元格的底部显示日历。