부트 스트랩 datetimepicker가 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 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/