From dc3e5d74f7c27715b6ea834fa8f250063df762eb Mon Sep 17 00:00:00 2001
From: Kevin Locke <kevin@kevinlocke.name>
Date: Mon, 24 Nov 2014 15:44:21 -0700
Subject: [PATCH] fix(datepicker): disable title button when in max mode

When the calendar is in the maximum configured mode, clicking the title
button has no effect.  To convey this to users, make the non-functional
button non-clickable, and take the button out of focus order, disable
the button when in the maximum mode.

Signed-off-by: Kevin Locke <kevin@kevinlocke.name>
---
 src/datepicker/datepicker.js           |  1 +
 src/datepicker/test/datepicker.spec.js | 16 ++++++++++++++--
 template/datepicker/day.html           |  2 +-
 template/datepicker/month.html         |  2 +-
 template/datepicker/year.html          |  2 +-
 5 files changed, 18 insertions(+), 5 deletions(-)

diff --git a/src/datepicker/datepicker.js b/src/datepicker/datepicker.js
index 05784947d0..8a803b43a7 100644
--- a/src/datepicker/datepicker.js
+++ b/src/datepicker/datepicker.js
@@ -43,6 +43,7 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.dateparser', 'ui.bootst
   });
 
   $scope.datepickerMode = $scope.datepickerMode || datepickerConfig.datepickerMode;
+  $scope.maxMode = self.maxMode;
   $scope.uniqueId = 'datepicker-' + $scope.$id + '-' + Math.floor(Math.random() * 10000);
   this.activeDate = angular.isDefined($attrs.initDate) ? $scope.$parent.$eval($attrs.initDate) : new Date();
 
diff --git a/src/datepicker/test/datepicker.spec.js b/src/datepicker/test/datepicker.spec.js
index b673d162da..2717cb87e6 100644
--- a/src/datepicker/test/datepicker.spec.js
+++ b/src/datepicker/test/datepicker.spec.js
@@ -12,12 +12,16 @@ describe('datepicker directive', function () {
     $rootScope.date = new Date('September 30, 2010 15:30:00');
   }));
 
+  function getTitleButton() {
+    return element.find('th').eq(1).find('button').first();
+  }
+
   function getTitle() {
-    return element.find('th').eq(1).find('button').first().text();
+    return getTitleButton().text();
   }
 
   function clickTitleButton() {
-    element.find('th').eq(1).find('button').first().click();
+    getTitleButton().click();
   }
 
   function clickPreviousButton(times) {
@@ -1710,5 +1714,13 @@ describe('datepicker directive', function () {
       clickTitleButton();
       expect(getTitle()).toBe('2013');
     });
+
+    it('disables the title button at it', function() {
+      expect(getTitleButton().prop('disabled')).toBe(false);
+      clickTitleButton();
+      expect(getTitleButton().prop('disabled')).toBe(true);
+      clickTitleButton();
+      expect(getTitleButton().prop('disabled')).toBe(true);
+    });
   });
 });
diff --git a/template/datepicker/day.html b/template/datepicker/day.html
index ca212a391a..16537c00c8 100644
--- a/template/datepicker/day.html
+++ b/template/datepicker/day.html
@@ -2,7 +2,7 @@
   <thead>
     <tr>
       <th><button type="button" class="btn btn-default btn-sm pull-left" ng-click="move(-1)" tabindex="-1"><i class="glyphicon glyphicon-chevron-left"></i></button></th>
-      <th colspan="{{5 + showWeeks}}"><button id="{{uniqueId}}-title" role="heading" aria-live="assertive" aria-atomic="true" type="button" class="btn btn-default btn-sm" ng-click="toggleMode()" tabindex="-1" style="width:100%;"><strong>{{title}}</strong></button></th>
+      <th colspan="{{5 + showWeeks}}"><button id="{{uniqueId}}-title" role="heading" aria-live="assertive" aria-atomic="true" type="button" class="btn btn-default btn-sm" ng-click="toggleMode()" ng-disabled="datepickerMode === maxMode" tabindex="-1" style="width:100%;"><strong>{{title}}</strong></button></th>
       <th><button type="button" class="btn btn-default btn-sm pull-right" ng-click="move(1)" tabindex="-1"><i class="glyphicon glyphicon-chevron-right"></i></button></th>
     </tr>
     <tr>
diff --git a/template/datepicker/month.html b/template/datepicker/month.html
index 539219004b..c59a7be7ac 100644
--- a/template/datepicker/month.html
+++ b/template/datepicker/month.html
@@ -2,7 +2,7 @@
   <thead>
     <tr>
       <th><button type="button" class="btn btn-default btn-sm pull-left" ng-click="move(-1)" tabindex="-1"><i class="glyphicon glyphicon-chevron-left"></i></button></th>
-      <th><button id="{{uniqueId}}-title" role="heading" aria-live="assertive" aria-atomic="true" type="button" class="btn btn-default btn-sm" ng-click="toggleMode()" tabindex="-1" style="width:100%;"><strong>{{title}}</strong></button></th>
+      <th><button id="{{uniqueId}}-title" role="heading" aria-live="assertive" aria-atomic="true" type="button" class="btn btn-default btn-sm" ng-click="toggleMode()" ng-disabled="datepickerMode === maxMode" tabindex="-1" style="width:100%;"><strong>{{title}}</strong></button></th>
       <th><button type="button" class="btn btn-default btn-sm pull-right" ng-click="move(1)" tabindex="-1"><i class="glyphicon glyphicon-chevron-right"></i></button></th>
     </tr>
   </thead>
diff --git a/template/datepicker/year.html b/template/datepicker/year.html
index 978d80c232..98d47f0054 100644
--- a/template/datepicker/year.html
+++ b/template/datepicker/year.html
@@ -2,7 +2,7 @@
   <thead>
     <tr>
       <th><button type="button" class="btn btn-default btn-sm pull-left" ng-click="move(-1)" tabindex="-1"><i class="glyphicon glyphicon-chevron-left"></i></button></th>
-      <th colspan="3"><button id="{{uniqueId}}-title" role="heading" aria-live="assertive" aria-atomic="true" type="button" class="btn btn-default btn-sm" ng-click="toggleMode()" tabindex="-1" style="width:100%;"><strong>{{title}}</strong></button></th>
+      <th colspan="3"><button id="{{uniqueId}}-title" role="heading" aria-live="assertive" aria-atomic="true" type="button" class="btn btn-default btn-sm" ng-click="toggleMode()" ng-disabled="datepickerMode === maxMode" tabindex="-1" style="width:100%;"><strong>{{title}}</strong></button></th>
       <th><button type="button" class="btn btn-default btn-sm pull-right" ng-click="move(1)" tabindex="-1"><i class="glyphicon glyphicon-chevron-right"></i></button></th>
     </tr>
   </thead>