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/