bootstrap datetimepicker里面的jqgrid - 控制不可见完全

Question

我在jqgrid内使用引导datetimepicker控制。 datetimepicker控件无法正常显示。

http://jsfiddle.net/cmpgtuwy/103/

Please help 

Answer 1

你演示中使用的jqGrid老4.6，这是不符合引导兼容。我建议你改用free jqGrid 4.13.6。此外，如果编辑字段位于块的内部，bootstrap-datetimepicker会有问题，该块没有position: relative样式。因此，我建议给电网将外div中：

<div id="outer" style="position: relative"> 
    <table id='grid'></table> 
</div> 

下一个问题：你的输入数据的格式为data: "01/01/2015 03:30"。您应该添加srcformat: 'd/m/Y H:i'以通知formatter: "date"。

的最终代码可能是

var mydata = [ 
    { 
     data: "01/01/2015 03:30", 
     status: "OPEN" 
    }, 
    { 
     data: "02/02/2015 03:45", 
     status: "ENTERED" 
    }]; 

$("#grid").jqGrid({ 
    data: mydata, 
    colModel: [ 
     { name: 'act', template: "actions" }, 
     { 
      name: 'data', 
      editrules: { required: true }, 
      formatter: 'date', 
      formatoptions: { 
       srcformat: 'd/m/Y H:i', 
       newformat: 'd/m/Y H:i' 
      }, 
      editable: true, 
      editoptions: { 
       dataInit: function (el) { 
        $(el).datetimepicker({ 
         locale: 'en-GB', 
         //debug: true, 
         widgetPositioning: { 
          horizontal: 'auto', 
          vertical: 'auto' 
         }, 
         widgetParent: '#outer' 
        }); 
        // fix the position of the datetimepicker 
        $(el).bind("dp.show", function() { 
         var $datepicker = $("#outer .bootstrap-datetimepicker-widget"); 
         if ($datepicker.length > 0) { 
          $datepicker.css("top", 
           this.getBoundingClientRect().top + 
           window.pageYOffset + 
           $(this).outerHeight()); 
         } 
        }); 
       } 
      } 
     }, 
     { 
      name: 'status', 
      width: 180 
     } 
    ], 
    iconSet: "fontAwesome", 
    guiStyle: "bootstrap", 
    hoverrows: false, 
    pager: true 
}); 

观看演示http://jsfiddle.net/OlegKi/duooa5oy/1/