feat(timepicker): implement ng-disabled support timepicker

Add support for ng-disabled for timepicker

Author: ggcat

src/timepicker/docs/readme.md

@@ -8,6 +8,10 @@ All settings can be provided as attributes in the `<timepicker>` or globally con
  	:
  	The Date object that provides the time state.
 
+* `ng-disabled` <i class="glyphicon glyphicon-eye-open"></i>
+    :
+    Will disable time picker for user interaction.
+
  * `hour-step` <i class="glyphicon glyphicon-eye-open"></i>
  	_(Defaults: 1)_ :
  	 Number of hours to increase or decrease when using a button.

src/timepicker/test/timepicker.spec.js

@@ -37,7 +37,7 @@ describe('timepicker directive', function () {
   }
 
   function getArrow(isUp, tdIndex) {
-    return element.find('tr').eq( (isUp) ? 0 : 2 ).find('td').eq( tdIndex ).find('a').eq(0);
+    return element.find('tr').eq( (isUp) ? 0 : 2 ).find('td').eq( tdIndex ).find('button').eq(0);
   }
 
   function getHoursButton(isUp) {
@@ -49,7 +49,7 @@ describe('timepicker directive', function () {
   }
 
   function getMeridianButton() {
-    return element.find('button').eq(0);
+    return element.find('tr:nth-child(2) button').eq(0);
   }
 
   function doClick(button, n) {
@@ -93,7 +93,7 @@ describe('timepicker directive', function () {
   it('contains three row & three input elements', function() {
     expect(element.find('tr').length).toBe(3);
     expect(element.find('input').length).toBe(2);
-    expect(element.find('button').length).toBe(1);
+    expect(element.find('button').length).toBe(5);
   });
 
   it('has initially the correct time & meridian', function() {
@@ -156,9 +156,12 @@ describe('timepicker directive', function () {
     expect(getModelState()).toEqual([14, 39]);
   });
 
-  it('meridian button has correct type', function() {
-    var button = getMeridianButton();
-    expect(button.attr('type')).toBe('button');
+  it('all buttons has correct type', function() {
+    var btns = element.find('button[type=button]');
+
+    for (var a=0; a<btns.length; a++) {
+      expect(btns.eq(a).attr('type')).toBe('button');
+    }
   });
 
   it('toggles meridian when button is clicked', function() {
@@ -621,6 +624,30 @@ describe('timepicker directive', function () {
       expect(getModelState()).toEqual([18, 20]);
     });
 
+    describe('`ng-disabled` attribute', function() {
+      var initialTime;
+
+      beforeEach(function() {
+        $rootScope.disabled = true;
+        $rootScope.time = newTime(14, 0);
+        initialTime = angular.copy($rootScope.time);
+        element = $compile('<timepicker ng-model="time" hour-step="hstep" minute-step="mstep" ng-disabled="disabled"></timepicker>')($rootScope);
+        $rootScope.$digest();
+      });
+
+      it('should not allow interact when disabled', function() {
+        expect(element.find('input[disabled]').length).toBe(2);
+        expect(element.find('button[disabled]').length).toBe(4);
+      });
+
+      it('should allow interact after enabling', function() {
+        $rootScope.disabled = false;
+        $rootScope.$digest();
+        expect(element.find('input[disabled]').length).toBe(0);
+        expect(element.find('button[disabled]').length).toBe(0);
+      });
+    });
+
   });
 
   describe('12 / 24 hour mode', function () {

src/timepicker/timepicker.js

@@ -6,6 +6,7 @@ angular.module('ui.bootstrap.timepicker', [])
   showMeridian: true,
   meridians: null,
   readonlyInput: false,
+  disabled: false,
   mousewheel: true,
   arrowkeys: true
 })
@@ -33,6 +34,14 @@ angular.module('ui.bootstrap.timepicker', [])
     }
 
     $scope.readonlyInput = angular.isDefined($attrs.readonlyInput) ? $scope.$parent.$eval($attrs.readonlyInput) : timepickerConfig.readonlyInput;
+    
+    $scope.disabled = timepickerConfig.disabled;
+    if (angular.isDefined($attrs.ngDisabled)) {
+      $scope.$parent.$watch($parse($attrs.ngDisabled), function(value) {
+        $scope.disabled = $scope.$parent.$eval($attrs.ngDisabled);
+      });
+    }
+
     this.setupInputEvents( hoursInputEl, minutesInputEl );
   };
 

template/timepicker/timepicker.html

@@ -1,25 +1,25 @@
 <table>
 	<tbody>
 		<tr class="text-center">
-			<td><a ng-click="incrementHours()" class="btn btn-link"><span class="glyphicon glyphicon-chevron-up"></span></a></td>
+			<td><button type="button" ng-click="incrementHours()" class="btn btn-link" ng-disabled="disabled" tabindex="-1"><span class="glyphicon glyphicon-chevron-up"></span></button></td>
 			<td>&nbsp;</td>
-			<td><a ng-click="incrementMinutes()" class="btn btn-link"><span class="glyphicon glyphicon-chevron-up"></span></a></td>
+			<td><button type="button" ng-click="incrementMinutes()" class="btn btn-link" ng-disabled="disabled" tabindex="-1"><span class="glyphicon glyphicon-chevron-up"></span></button></td>
 			<td ng-show="showMeridian"></td>
 		</tr>
 		<tr>
 			<td class="form-group" ng-class="{'has-error': invalidHours}">
-				<input style="width:50px;" type="text" ng-model="hours" ng-change="updateHours()" class="form-control text-center" ng-mousewheel="incrementHours()" ng-readonly="readonlyInput" maxlength="2">
+				<input style="width:50px;" type="text" ng-model="hours" ng-change="updateHours()" class="form-control text-center" ng-mousewheel="incrementHours()" ng-readonly="readonlyInput" ng-disabled="disabled" maxlength="2">
 			</td>
 			<td>:</td>
 			<td class="form-group" ng-class="{'has-error': invalidMinutes}">
-				<input style="width:50px;" type="text" ng-model="minutes" ng-change="updateMinutes()" class="form-control text-center" ng-readonly="readonlyInput" maxlength="2">
+				<input style="width:50px;" type="text" ng-model="minutes" ng-change="updateMinutes()" class="form-control text-center" ng-readonly="readonlyInput" ng-disabled="disabled" maxlength="2">
 			</td>
 			<td ng-show="showMeridian"><button type="button" class="btn btn-default text-center" ng-click="toggleMeridian()">{{meridian}}</button></td>
 		</tr>
 		<tr class="text-center">
-			<td><a ng-click="decrementHours()" class="btn btn-link"><span class="glyphicon glyphicon-chevron-down"></span></a></td>
+			<td><button type="button" ng-click="decrementHours()" class="btn btn-link" ng-disabled="disabled" tabindex="-1"><span class="glyphicon glyphicon-chevron-down"></span></button></td>
 			<td>&nbsp;</td>
-			<td><a ng-click="decrementMinutes()" class="btn btn-link"><span class="glyphicon glyphicon-chevron-down"></span></a></td>
+			<td><button type="button" ng-click="decrementMinutes()" class="btn btn-link" ng-disabled="disabled" tabindex="-1"><span class="glyphicon glyphicon-chevron-down"></span></button></td>
 			<td ng-show="showMeridian"></td>
 		</tr>
 	</tbody>