Wie Bootstrap Datepicker in ng-Grid zu verwenden

Question

Ich versuche Bootstrap Datepicker (über angulart ui bootstrap) in einem ng-grid zu verwenden.

Ich gründe das Gitter mit:

$scope.gridSettings = { 
    data: "myData", 
    enableCellSelection: true, 
    enableRowSelection: false, 
    enableCellEditOnFocus: true, 
    columnDefs: 
     [ 
      { field: "StartDate", displayName: "Date", 
       editableCellTemplate: '<input type="text" datepicker-popup="dd/MM/yyyy" ng-model="COL_FIELD" />' } 
     ] 
}; 

Und es funktioniert, wenn ich eine Zelle klicken, um es in eine Datepicker ändert - aber - der Kalender Popup durch die Zellgrenzen abgeschnitten wird - dies bedeutet, dass ich kann nur den Teil des Popups sehen, der in die Zelle passt (der obere Rand)

Was muss ich einstellen, damit das Datepicker-Popup oberhalb des Rasters erscheint und nicht in die Zelle geschnitten wird?

Update: versucht, den Wechsel von Angular UI Bootstrap Winkelband, jetzt die Datepicker funktioniert, aber ich habe genau das gleiche Problem mit dem Timepicker

Answer 1

ng-grid.css Datei gehen und kommentieren Sie die folgenden:

.ngCell { 
    /*overflow: hidden;*/ 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    background-color: inherit; 
} 

Dies hat für mich für die Anzeige von Validierungsnachrichten funktioniert und für meine Anwendung habe ich keine Nebenwirkungen gesehen.

Answer 2

Verwenden Sie das folgende cellTemplate für die Zelle, in der Sie einen Datumsauswahl hinzufügen möchten. :

dateCellTemplateEdit = '<div class="controls input-append"><input id="valueDt{{row.rowIndex}}" class="datepicker" type="date" value="{{row.entity.valuedtstr}}" style ="font-size:13px; width:60%; " data-date-format="mm-dd-yyyy" ng-model="row.entity.valuedtstr" readOnly="true" /><div class="add-on"><i class="icon-calendar" ></i><div>'; 

Answer 3

Verwenden Datumsauswahl-Append-zu-Körper-= true

$scope.gridSettings = { 
data: "myData", 
enableCellSelection: true, 
enableRowSelection: false, 
enableCellEditOnFocus: true, 
columnDefs: 
    [ 
     { field: "StartDate", displayName: "Date", 
      editableCellTemplate: '<input type="text" datepicker-popup="dd/MM/yyyy" datepicker-append-to-body=true ng-model="COL_FIELD" />' } 
    ] 

};

Answer 4

Ersetzen Sie den ng-Eingang im bearbeitbarenCellTemplate durch Ihre eigene Anweisung.

Plunker

der kritische Punkt in dieser Richtlinie ist die ngGridEventEndCellEdit. Statt es zu emittieren "onBlur", strahlen Sie es, wenn isOpen der Datepicker auf false gesetzt ist:

  scope.isOpen = true; 

      scope.$watch('isOpen', function (newValue, oldValue) { 
       if (newValue == false) { 
        scope.$emit('ngGridEventEndCellEdit'); 
       } 
      }); 

      angular.element(elm).bind('blur', function() { 
       //scope.$emit('ngGridEventEndCellEdit'); 
      }); 

Die nach editableCellTemplate (beachten Sie my-Eingang statt ng-Eingang):

'<input ng-class="\'colt\' + col.index" datepicker-popup="dd.MM.yyyy" datepicker-append-to-body=true is-open="isOpen" ng-model="COL_FIELD" my-input="COL_FIELD"/>'; 

Answer 5

ich eigentlich hatte das gleiche Problem und kam schließlich mit dieser Lösung. Scheint gut zu funktionieren. Die Grundidee ist hier, das datetimepicker show -Ereignis (dp.show) anzuhängen, es von wo auch immer Eltern zu lösen, an den Körper mit position = absolute anzuhängen und seine Position direkt unter dem Zielelement festzulegen.

Beachten Sie, dass der folgende Code aus einer Direktive stammt, die den bootstrap datetimepicker umhüllt. Die gleiche Lösung sollte jedoch überall gelten, solange Sie ein Handle für das Auswahlelement erhalten.

Hoffnung, dass jemand hilft :)

function link ($scope, $element, $attrs, ngModelCtrl) { 

    //////////////////////////////////////////////////////////////////////////////// 
    // the following code handles positioning of the datetimepicker widget 
    // just below the target element. This is to avoid the hideous datepicker bug 
    // that causes it to be trimmed when its parent has limited height 
    // Z.P 
    //////////////////////////////////////////////////////////////////////////////// 
    $element.on('dp.show', function(e) { 

     // get the datetimepciker 
     var elem = angular.element('.bootstrap-datetimepicker-widget'); 

     // detach from parent element and append to body 
     angular.element('body').append(elem); 

     // get target element 
     var target = e.currentTarget || e.delegateTarget || e.target; 

     // get bounding rects of parent and element 
     var targetRect = angular.element(target)[0].getBoundingClientRect(); 
     var elemRect = elem[0].getBoundingClientRect(); 

     // do some math 
     var marginTop = 10; 
     var center = targetRect.left + (targetRect.width/2) - (elemRect.width/2); 
     var top = targetRect.bottom + marginTop; 

     // position the widget properly just below parent 
     elem.css('position', 'absolute'); 
     elem.css('z-index', '10000000000000'); 
     elem.css('top', top + 'px'); 
     elem.css('bottom', 'auto'); 
     elem.css('left', center + 'px'); 
    }); 
}