角引导日期选择器得到可见日期（日模式）

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），它会保持不变。