feat(datepicker): disable today button if invalid

- Disable today button if current date is before `min-date` or after `max-date`
angular-ui · Aug 13, 2015 · 1f39227 · 1f39227
1 parent dccd619
commit 1f39227
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 2 deletions.
diff --git a/src/datepicker/datepicker.js b/src/datepicker/datepicker.js
@@ -513,14 +513,28 @@ function($compile, $parse, $document, $rootScope, $position, dateFilter, datePar
           appendToBody = angular.isDefined(attrs.datepickerAppendToBody) ? scope.$parent.$eval(attrs.datepickerAppendToBody) : datepickerPopupConfig.appendToBody,
           onOpenFocus = angular.isDefined(attrs.onOpenFocus) ? scope.$parent.$eval(attrs.onOpenFocus) : datepickerPopupConfig.onOpenFocus,
           datepickerPopupTemplateUrl = angular.isDefined(attrs.datepickerPopupTemplateUrl) ? attrs.datepickerPopupTemplateUrl : datepickerPopupConfig.datepickerPopupTemplateUrl,
-          datepickerTemplateUrl = angular.isDefined(attrs.datepickerTemplateUrl) ? attrs.datepickerTemplateUrl : datepickerPopupConfig.datepickerTemplateUrl;
+          datepickerTemplateUrl = angular.isDefined(attrs.datepickerTemplateUrl) ? attrs.datepickerTemplateUrl : datepickerPopupConfig.datepickerTemplateUrl,
+          cache = {};
 
       scope.showButtonBar = angular.isDefined(attrs.showButtonBar) ? scope.$parent.$eval(attrs.showButtonBar) : datepickerPopupConfig.showButtonBar;
 
       scope.getText = function(key) {
         return scope[key + 'Text'] || datepickerPopupConfig[key + 'Text'];
       };
 
+      scope.isDisabled = function(date) {
+        if (date === 'today') {
+          date = new Date();
+        }
+
+        return !((scope.watchData.minDate && scope.compare(date, cache.minDate) < 0) ||
+          (scope.watchData.maxDate && scope.compare(date, cache.maxDate) > 0));
+      };
+
+      scope.compare = function(date1, date2) {
+        return (new Date(date1.getFullYear(), date1.getMonth(), date1.getDate()) - new Date(date2.getFullYear(), date2.getMonth(), date2.getDate()));
+      };
+
       var isHtml5DateInput = false;
       if (datepickerPopupConfig.html5Types[attrs.type]) {
         dateFormat = datepickerPopupConfig.html5Types[attrs.type];
@@ -591,6 +605,9 @@ function($compile, $parse, $document, $rootScope, $position, dateFilter, datePar
           var getAttribute = $parse(attrs[key]);
           scope.$parent.$watch(getAttribute, function(value) {
             scope.watchData[key] = value;
+            if (key === 'minDate' || key === 'maxDate') {
+              cache[key] = new Date(value);
+            }
           });
           datepickerEl.attr(cameltoDash(key), 'watchData.' + key);
 

diff --git a/src/datepicker/test/datepicker.spec.js b/src/datepicker/test/datepicker.spec.js
@@ -1906,6 +1906,26 @@ describe('datepicker directive', function() {
             expect(buttons.eq(2).text()).toBe('CloseME');
           });
 
+          it('should disable today button if before min date', function() {
+            $rootScope.minDate = new Date().setDate(new Date().getDate() + 1);
+            var wrapElement = $compile('<div><input ng-model="date" datepicker-popup min-date="minDate" is-open="true"><div>')($rootScope);
+            $rootScope.$digest();
+            assignElements(wrapElement);
+            assignButtonBar();
+
+            expect(buttons.eq(0).prop('disabled')).toBe(true);
+          });
+
+          it('should disable today button if after max date', function() {
+            $rootScope.maxDate = new Date().setDate(new Date().getDate() - 2);
+            var wrapElement = $compile('<div><input ng-model="date" datepicker-popup max-date="maxDate" is-open="true"><div>')($rootScope);
+            $rootScope.$digest();
+            assignElements(wrapElement);
+            assignButtonBar();
+
+            expect(buttons.eq(0).prop('disabled')).toBe(true);
+          });
+
           it('should remove bar', function() {
             $rootScope.showBar = false;
             var wrapElement = $compile('<div><input ng-model="date" datepicker-popup show-button-bar="showBar" is-open="true"><div>')($rootScope);

diff --git a/template/datepicker/popup.html b/template/datepicker/popup.html
@@ -2,7 +2,7 @@
 	<li ng-transclude></li>
 	<li ng-if="showButtonBar" style="padding:10px 9px 2px">
 		<span class="btn-group pull-left">
-			<button type="button" class="btn btn-sm btn-info" ng-click="select('today')">{{ getText('current') }}</button>
+			<button type="button" class="btn btn-sm btn-info" ng-click="select('today')" ng-disabled="!isDisabled('today')">{{ getText('current') }}</button>
 			<button type="button" class="btn btn-sm btn-danger" ng-click="select(null)">{{ getText('clear') }}</button>
 		</span>
 		<button type="button" class="btn btn-sm btn-success pull-right" ng-click="close()">{{ getText('close') }}</button>