Question

我正在尝试使用Bootstrap 3 datetimepicker。但是glyphicon日历不会打开。看到这个小提琴： 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);
	
});

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

Answer 1

我看到三个问题：

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

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

Bootstrap datetimepicker glyphicon日历不会打开

1 个答案: