Bootstrap datetimepicker glyphicon calendar doesn't open - html

Question

I am trying to use Bootstrap 3 datetimepicker. But the glyphicon calendar doesn't open. See this fiddle:
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

I see three problems:
You have multiple HTML elements with the same ID (#datetimepicker123): please avoid it!
Instead of $("#datetimepicker123").datetimepicker(); you should use $(".input-group.date").datetimepicker(); to add a timepicker to every date input.
The timepicker appears, but it's truncated by the HTML Cell (you can see the arrow under the input field). Some CSS customization might be required:
.pq-grid-cell{
overflow:visible;
}
Result: http://jsfiddle.net/vqsss5fx/3/