Bootstrap datetimepicker glyphicon 日历打不开

Question

我正在尝试使用 Bootstrap 3 日期时间选择器。但是字形日历打不开。看到这个 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

我看到三个问题：

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

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

Bootstrap datetimepicker glyphicon 日历打不开

Bootstrap datetimepicker glyphicon calendar doesn't open

html

css

jquery-ui

twitter-bootstrap

bootstrap-datetimepicker