Comment utiliser bootstrap datepicker à l'intérieur de ng-grille

Je suis en train d'utiliser bootstrap datepicker (via angulart ui bootstrap) à l'intérieur d'un ng-grille.

Je suis réglage de la grille avec:

$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" />' }
        ]
};

Et il fonctionne, lorsque je clique sur une cellule, il se transforme en un datepicker - mais - le calendrier popup est fixé par les limites de la cellule, ce qui signifie que je ne peux voir que la partie de la fenêtre contextuelle qui s'inscrit dans la cellule (la bordure du haut)

De quoi ai-je besoin de mettre à permettre le contrôle datepicker popup apparaisse en haut de la grille, au lieu d'être attaché à la cellule?

Mise à jour: essayé de commutation Angulaires UI bootstrap pour angulaires-sangle, maintenant, le datepicker fonctionne, mais j'ai exactement le même problème avec le timepicker

OriginalL'auteur Nir | 2014-01-07

8

Utilisation datepicker-ajouter-à-corps=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" />' }
    ]
```
};

après avoir sélectionner la date... est-ce le changement normal de l'étiquette de contrôle... ce qui implique un changement de défaut cellTemplate...
merci! Je ne peux pas le faire fonctionner via le datepicker-objet d'options comme le site le dit.
Erreur : [ngModel:nonassign] l'Expression de la grille.getCellValue(ligne, col)' n'est pas transférable. Élément: <input type="text" datepicker-popup="dd/MM/yyyy" datepicker-ajouter-à-corps="true" ng-model="grid.getCellValue(ligne, col)" class="ng-vierge ng-intacte ng-valide ng-portée ng-isoler-champ">
en italie, par exemple sur les Ti faccio de l'onu monumento ! merci beaucoup un copain 🙂

OriginalL'auteur lmyers

J'ai effectivement eu le même problème et finalement venu avec cette solution. Semble bien fonctionner. L'idée de base ici est de crochet sur le datetimepicker spectacle (dp.montrer), détacher, d'où que parent, il peut avoir, de le joindre pour le corps à la position=absolu et de définir son emplacement juste en dessous de l'élément cible.

Noter que le code ci-dessous est tiré d'une directive d'emballage le bootstrap datetimepicker, cependant, la même solution devrait s'appliquer n'importe où aussi longtemps que vous pouvez obtenir une poignée sur le sélecteur d'élément.

Espère que ça aide quelqu'un 🙂

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

OriginalL'auteur Zacky Pickholz

0

Aller dans le ng-grille.fichier css et commentez le texte suivant:
```
.ngCell {
  /*overflow: hidden;*/
  position: absolute;
  top: 0;
  bottom: 0;
  background-color: inherit;
}
```
Ce qui a fonctionné pour moi pour l'affichage des messages de validation et pour mon application j'ai vu pas d'effets secondaires.

Cela fait une barre de défilement horizontale couverture de la dernière ligne de la grille et le timepicker popup (voir mise à jour dans la question de savoir pourquoi timepicker et pas datepicker) est toujours coupé par la cellule

OriginalL'auteur Rob

Utilisation suivantes cellTemplate pour la cellule où vous souhaitez ajouter un datepicker. :

 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>';

OriginalL'auteur Akash Nigam

Remplacer le ng-entrée dans le editableCellTemplate avec votre propre directive.

Plunker

le point critique de cette directive est la ngGridEventEndCellEdit. Au lieu de l'émission "onBlur", tu émets quand datepicker de isOpen est définie sur false:

            scope.isOpen = true;

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

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

La fonction editableCellTemplate (note de mon entrée à la place de ng-entrée):

 '<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"/>';

OriginalL'auteur renegone

Vous devez vous connecter pour publier un commentaire.