bootstrap datetimepicker inside jqgrid - le contrôle n'est pas visible complètement

Question

J'utilise le contrôle bootstrap datetimepicker à l'intérieur de jqgrid. Le contrôle datetimepicker n'est pas visible correctement.

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

Please help 

Answer 1

Vous démo utilisé vieux jqGrid 4.6, ce qui est compatible avec Bootstrap. Je vous suggère d'utiliser free jqGrid 4.13.6 à la place. De plus, bootstrap-datetimepicker a un problème si le champ d'édition est à l'intérieur du bloc, qui n'a pas de style position: relative. Ainsi, je vous suggère de placer la grille à l'intérieur du div extérieur:

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

Le problème suivant: vos données d'entrée sont au format data: "01/01/2015 03:30". Vous devez ajouter srcformat: 'd/m/Y H:i' pour informer le formatter: "date" à ce sujet.

Le code pourrait être finalement

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

Voir la démo http://jsfiddle.net/OlegKi/duooa5oy/1/