6

最新の両方のバージョンであるAngular UI Bootstrapを使用します。Angular UI Bootprap datepicker、ビューが変更されたときのコールバック

ビューが変更されたとき、つまり5月から6月に切り替えると、コールバックが大好きです。次のシナリオのために必要です:

私のdatepickerは、利用可能な日付と利用できない日付をcustomClass関数で表示します。 今月の空き状況をすべて取得しますが、次または前をクリックすると、新しい空き状況を取得するためのコールバックがありません。

また、datepickerで多くのタイミング問題が発生するので、私は非同期呼び出しを42回(各クラスに1つずつ)したくありません。 私は誰かがこれを達成する方法を知っていることを願っています。

マイHTML:$ scope.dpOptionsで

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

(日付ピッカーオプション)私はカスタムクラスがあることを必要とするものを定義している:

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

答えて

5

私の同僚は、角を使用して解決策を見つけました$ provide.decorator関数! これは既存のディレクティブにいくつかの追加機能を追加します。今私は、日付ピッカーで任意のコントローラにこれを追加することができる機能を呼び出すために

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

$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. 

     }); 
関連する問題