bootstrap datetimepicker inside jqgrid - コントロールが完全に表示されない

Question

jqgridの内部にブートストラップdatetimepickerコントロールを使用しています。 datetimepickerコントロールが正しく表示されません。

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

Please help 

Answer 1

あなたはブートストラップと互換性がありません古いjqGrid 4.6、使用デモ。代わりにfree jqGrid 4.13.6を使用することをお勧めします。また、編集フィールドがブロック内にある場合は、position: relativeのスタイルを持たないbootstrap-datetimepickerに問題があります。したがって、私は外側のdivの内側にグリッドを配置することをお勧め：

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

次の問題：あなたの入力データがフォーマットdata: "01/01/2015 03:30"です。あなたはそれについてformatter: "date"に知らせるためにsrcformat: 'd/m/Y H:i'を追加する必要があります。

最後にコードが

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 
}); 

可能性があり、私はあなたのjsfiddleを実行し、コンソールをチェックすると、デモhttp://jsfiddle.net/OlegKi/duooa5oy/1/