2015-10-19 110 views
5

我正在使用Angular和UI Bootstrap Datepicker(https://angular-ui.github.io/bootstrap/),我正在嘗試更新day類以顯示使用現有customClass在特定日期發生的事情。當傳遞的日期是同步而不是使用$資源異步時,這可以正常工作。Angular Bootstrap datepicker自定義類

HTML

<uib-datepicker custom-class="getDayClass(date, mode)" ng-model="dt" min-date="minDate" show-weeks="false" starting-day="1" class="well well-sm" ng-change="selectDateChange()"></uib-datepicker> 

JS

$scope.getDayClass = function (date, mode) { 

    if ($scope.myCalendarEvents.length > 0) { 

     if (mode === 'day') { 

      var dayToCheck = new Date(date).setHours(0, 0, 0, 0); 

      for (var i = 0; i < $scope.myCalendarEvents.length; i++) { 

      var currentDay = new Date($scope.myCalendarEvents[i].startDate).setHours(0, 0, 0, 0); 

      if (dayToCheck === currentDay) { 

       return "full"; 

      } 
     } 

    } 

    return ''; 
}    

}; 

見例子異步調用時(PS。這不是我的Plnkr):

http://plnkr.co/edit/h8PxWfxSEtZuVCct00mD?p=preview

回答

4

我有同樣的問題,爲了解決它,我把一個ng-if =「變量」放在包含uib-d的元素中atepicker。

「變量」應該是myCalendarEvents,並顯示UIB,日期選擇器,當數據可用

+0

你能發佈您的代碼顯示方面呢?我有同樣的問題。 –