feat(datepicker): add support for dynamic min-mode and max-mode

- This adds support for dynamic `min-mode` and `max-mode` Closes #3843 Fixes #2618
angular-ui · Aug 7, 2015 · f3d263e · f3d263e
1 parent abfd26c
commit f3d263e
Show file tree

Hide file tree

Showing 2 changed files with 53 additions and 6 deletions.
diff --git a/src/datepicker/datepicker.js b/src/datepicker/datepicker.js
@@ -29,8 +29,8 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
 
   // Configuration attributes
   angular.forEach(['formatDay', 'formatMonth', 'formatYear', 'formatDayHeader', 'formatDayTitle', 'formatMonthTitle',
-                   'minMode', 'maxMode', 'showWeeks', 'startingDay', 'yearRange', 'shortcutPropagation'], function( key, index ) {
-    self[key] = angular.isDefined($attrs[key]) ? (index < 8 ? $interpolate($attrs[key])($scope.$parent) : $scope.$parent.$eval($attrs[key])) : datepickerConfig[key];
+                   'showWeeks', 'startingDay', 'yearRange', 'shortcutPropagation'], function( key, index ) {
+    self[key] = angular.isDefined($attrs[key]) ? (index < 6 ? $interpolate($attrs[key])($scope.$parent) : $scope.$parent.$eval($attrs[key])) : datepickerConfig[key];
   });
 
   // Watchable date attributes
@@ -45,8 +45,22 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
     }
   });
 
+  angular.forEach(['minMode', 'maxMode'], function( key ) {
+    if ( $attrs[key] ) {
+      $scope.$parent.$watch($parse($attrs[key]), function(value) {
+        self[key] = angular.isDefined(value) ? value : $attrs[key];
+        $scope[key] = self[key];
+        if ((key == 'minMode' && self.modes.indexOf( $scope.datepickerMode ) < self.modes.indexOf( self[key] )) || (key == 'maxMode' && self.modes.indexOf( $scope.datepickerMode ) > self.modes.indexOf( self[key] ))) {
+          $scope.datepickerMode = self[key];
+        }
+      });
+    } else {
+      self[key] = datepickerConfig[key] || null;
+        $scope[key] = self[key];
+    }
+  });
+
   $scope.datepickerMode = $scope.datepickerMode || datepickerConfig.datepickerMode;
-  $scope.maxMode = self.maxMode;
   $scope.uniqueId = 'datepicker-' + $scope.$id + '-' + Math.floor(Math.random() * 10000);
 
   if(angular.isDefined($attrs.initDate)) {
@@ -562,7 +576,7 @@ function ($compile, $parse, $document, $rootScope, $position, dateFilter, datePa
       }
 
       scope.watchData = {};
-      angular.forEach(['minDate', 'maxDate', 'datepickerMode', 'initDate', 'shortcutPropagation'], function( key ) {
+      angular.forEach(['minMode', 'maxMode', 'minDate', 'maxDate', 'datepickerMode', 'initDate', 'shortcutPropagation'], function( key ) {
         if ( attrs[key] ) {
           var getAttribute = $parse(attrs[key]);
           scope.$parent.$watch(getAttribute, function(value){

diff --git a/src/datepicker/test/datepicker.spec.js b/src/datepicker/test/datepicker.spec.js
@@ -2171,7 +2171,8 @@ describe('datepicker directive', function () {
       beforeEach(inject(function() {
         $rootScope.date = new Date('August 11, 2013');
         $rootScope.mode = 'month';
-        element = $compile('<datepicker ng-model="date" min-mode="month" datepicker-mode="mode"></datepicker>')($rootScope);
+        $rootScope.minMode = 'month';
+        element = $compile('<datepicker ng-model="date" min-mode="minMode" datepicker-mode="mode"></datepicker>')($rootScope);
         $rootScope.$digest();
       }));
 
@@ -2181,13 +2182,25 @@ describe('datepicker directive', function () {
         expect(getTitle()).toBe('2013');
         clickTitleButton();
         expect(getTitle()).toBe('2001 - 2020');
+        $rootScope.minMode = 'year';
+        $rootScope.$digest();
+        clickOption( 5 );
+        expect(getTitle()).toBe('2001 - 2020');
+      });
+
+      it('updates current mode if necessary', function() {
+        expect(getTitle()).toBe('2013');
+        $rootScope.minMode = 'year';
+        $rootScope.$digest();
+        expect(getTitle()).toBe('2001 - 2020');
       });
     });
 
     describe('`max-mode`', function () {
       beforeEach(inject(function() {
         $rootScope.date = new Date('August 11, 2013');
-        element = $compile('<datepicker ng-model="date" max-mode="month"></datepicker>')($rootScope);
+        $rootScope.maxMode = 'month';
+        element = $compile('<datepicker ng-model="date" max-mode="maxMode"></datepicker>')($rootScope);
         $rootScope.$digest();
       }));
 
@@ -2197,6 +2210,12 @@ describe('datepicker directive', function () {
         expect(getTitle()).toBe('2013');
         clickTitleButton();
         expect(getTitle()).toBe('2013');
+        clickOption( 10 );
+        expect(getTitle()).toBe('November 2013');
+        $rootScope.maxMode = 'day';
+        $rootScope.$digest();
+        clickTitleButton();
+        expect(getTitle()).toBe('November 2013');
       });
 
       it('disables the title button at it', function() {
@@ -2205,6 +2224,20 @@ describe('datepicker directive', function () {
         expect(getTitleButton().prop('disabled')).toBe(true);
         clickTitleButton();
         expect(getTitleButton().prop('disabled')).toBe(true);
+        clickOption( 10 );
+        expect(getTitleButton().prop('disabled')).toBe(false);
+        $rootScope.maxMode = 'day';
+        $rootScope.$digest();
+        expect(getTitleButton().prop('disabled')).toBe(true);
+      });
+
+      it('updates current mode if necessary', function() {
+        expect(getTitle()).toBe('August 2013');
+        clickTitleButton();
+        expect(getTitle()).toBe('2013');
+        $rootScope.maxMode = 'day';
+        $rootScope.$digest();
+        expect(getTitle()).toBe('August 2013');
       });
     });