Bootstrap datetimepicker glyphicon calendar не открывается

Question

Я пытаюсь использовать Bootstrap 3 datetimepicker. Но календарь глификона не открывается. Смотрите эту скрипку: 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" }, 
 
\t \t { title: "DatePicker", width: 200, dataType: "string", dataIndx: "date",editable:false, 
 
\t \t render : function(){ 
 
\t \t 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>'; 
 
\t \t                                          
 
\t \t return date; 
 
\t \t } 
 
\t \t }, 
 
     { title: "Revenues ($ millions)", width: 150, dataType: "float", align: "right", dataIndx: "revenues" }, 
 
     
 
    ]; 
 
\t 
 
\t $('body').on('mouseover','.input-group',function() { \t \t 
 
\t 
 
\t \t $("#datetimepicker123").datetimepicker(); 
 
\t }); 
 
\t 
 
    obj.dataModel = { data: data }; 
 
\t 
 
    $("#grid_json").pqGrid(obj); 
 
\t 
 
}); 
 
    \t

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

Answer 1

Я вижу три проблемы:

• У вас есть несколько элементов HTML с тем же ID (# datetimepicker123): Пожалуйста, избегайте его!
• Вместо $("#datetimepicker123").datetimepicker(); вы должны использовать $(".input-group.date").datetimepicker();, чтобы добавить timepicker к каждому вводу даты.

• Появляется сообщение timepicker, но оно усекается с помощью HTML-соты (вы можете видеть стрелку под полем ввода). Некоторые CSS настройки может потребоваться:

  .pq-grid-cell{ 
      overflow:visible; 
  } 
  

Результат: http://jsfiddle.net/vqsss5fx/3/