角引導日期選擇器得到可見日期（日模式）

Question

如果模式是日，我需要從日期選擇器中獲取可見日期。

例子：

在這種情況下，我需要讓這些42天。此外，如果用戶更改月份，我應該刷新Datepicker控制器視圖並獲得新的42天。

Answer 1

所以我設法解決這個問題。 我們需要擴展uibDatepickerDirective

angular.module('ui.bootstrap.datepicker') 
.config(function ($provide) { 
    $provide.decorator('uibDatepickerDirective', function ($delegate, $timeout) { 
     var directive = $delegate[0]; 
     var link = directive.link; 


     angular.extend(directive.scope, { 
      visibleDates: '=?' 
     }); 


     directive.compile = function() { 
      return function (scope, element, attrs, ctrls) { 
       link.apply(this, arguments); 

       var datepickerCtrl = ctrls[0]; 

       datepickerCtrl.getVisibleDates = function() { 
        var year = this.activeDate.getFullYear(), 
        month = this.activeDate.getMonth(), 
        firstDayOfMonth = new Date(this.activeDate); 

        firstDayOfMonth.setFullYear(year, month, 1); 

        var difference = this.startingDay - firstDayOfMonth.getDay(), 
         numDisplayedFromPreviousMonth = difference > 0 ? 
         7 - difference : -difference, 
         firstDate = new Date(firstDayOfMonth); 

        if (numDisplayedFromPreviousMonth > 0) { 
         firstDate.setDate(-numDisplayedFromPreviousMonth + 1); 
        } 
        return this.getDates(firstDate, 42);; 
       } 

       var firstTime = true; 

       $timeout(function() { 
        scope.$watch("activeDt", function() { 
         var newValues = datepickerCtrl.getVisibleDates(); 
         if (firstTime) { 
          scope.visibleDates = newValues; 
          firstTime = false; 
          return; 
         } 
         if (newValues[0].getYear() !== scope.visibleDates[0].getYear() || 
          newValues[0].getMonth() !== scope.visibleDates[0].getMonth() || 
          newValues[0].getDate() !== scope.visibleDates[0].getDate()) { 
          scope.visibleDates = newValues; 
         } 
        }); 
       }); 


      } 
     }; 
     return $delegate; 
    }); 
}); 

而且在指令本身，我們需要屬性附加傷害可見日期和點傳遞到我們想去的地方保存這些42天變量。

<span uib-datepicker visible-dates="visibleDates" datepicker- ng-model="datePicked"></span> 

這種方式，我們將更新visibleDates（其中42）如果我們改變月份日期選擇器，但如果我們在同月（同可見日期）更改activeDate（scope.activeDt），它會保持不變。