6

Ich benutze die Angular UI Bootstrap, beide die neuesten Versionen.Angular UI Bootstrap Datepicker, Callback bei Änderung der Ansicht

Ich würde gerne einen Rückruf haben, wenn sich meine Sicht ändert, also wenn ich von Mai auf Juni umstelle. Ich brauche das wegen des folgenden Szenarios:

Mein Datepicker zeigt verfügbare und nicht verfügbare Daten mit der customClass-Funktion an. Ich hole alle Verfügbarkeiten des aktuellen Monats, aber wenn ich auf Next oder Next klicke, habe ich keinen Callback, um die neuen Verfügbarkeiten zu holen.

Ich möchte auch nicht einen asynchronen Anruf 42 Mal (eins für jede Klasse), weil Sie auch viele Timing-Probleme in De Datepicker bekommen. Ich hoffe, jemand weiß einen Weg, dies zu erreichen, ich habe jetzt sehr lange nach einer Lösung gesucht.

Mein HTML:

<div class="input-group"> 
     <span class="input-group-addon" ng-click="vm.OpenDatepicker($event,'1')"><i class="ti-calendar"></i></span> 
     <input type="text" class="form-control" datepicker-options="dpOptions" readonly style="cursor:pointer; background-color:white;" 
      uib-datepicker-popup="dd-MMMM-yyyy" min-date="minDate" show-weeks="true" ng-model="selectedDate" 
      is-open="vm.$scope.datepickers[1]" show-button-bar="false" ng-click="vm.OpenDatepicker($event,'1')" /> 
</div> 

In den $ scope.dpOptions (Datepicker Optionen) Ich habe definiert, was die benutzerdefinierten Klassen sein müssen:

$scope.dpOptions.customClass= function (data) { 
//Here are my availabilities of the first month fetched 
//When I change the month in my view, I first want to have the other availabilities 
//so I can return the new red/green classes 
}; 

Antwort

5

Mein Kollege einen Winkel eine Lösung gefunden, mit $ provide.decorator Funktion! Dies wird einige zusätzliche Funktionen zu jeder bestehenden Direktive hinzufügen.

$provide.decorator('uibDatepickerDirective', function ($delegate) { 
     var directive = $delegate[0]; 
     var directiveCompile = directive.compile; 

     directive.compile = function() { 
      var link = directiveCompile.apply(this, arguments); 

      return function (scope) { 
       link.apply(this, arguments); 

       var oldMove = scope.move; 
       scope.move = function (direction) { 
        oldMove.apply(this, arguments); 
        scope.$emit('datepicker.monthChanged', this.rows); 
       } 
      } 
     }; 
     return $delegate; 
    }); 

Um eine Funktion jetzt nenne ich diese an jede Steuerung mit einem Datumsauswahl hinzufügen:

$scope.$on('datepicker.monthChanged', function (event, rows) { 

      let startDate = rows[0][0].date; 
      let endDate = rows[5][6].date; 
      //Do anything you want! 
      //To add customClass, every column has a customClass attribute you can set. 

     });