feat(timepicker): add pad-hours support

- Add support for optionally padding hours

Closes #4288
Closes #5633

Author: wesleycho

src/timepicker/docs/readme.md

@@ -57,6 +57,11 @@ A lightweight & configurable timepicker directive.
   <i class="glyphicon glyphicon-eye-open"></i> -
   Date object that provides the time state.
 
+* `pad-hours`
+  <small class="badge">$</small>
+  _(Default: true)_ -
+  Whether the hours column is padded with a 0.
+
 * `readonly-input`
   <small class="badge">$</small>
   <small class="badge">C</small>

src/timepicker/test/timepicker.spec.js

@@ -986,6 +986,37 @@ describe('timepicker directive', function() {
     });
   });
 
+  describe('`pad-hours` attribute', function() {
+    function triggerInput(elem, val) {
+      elem.val(val);
+      elem.trigger('input');
+    }
+
+    it('should pad the hours by default', function() {
+      element = $compile('<uib-timepicker ng-model="time"></uib-timepicker>')($rootScope);
+      $rootScope.$digest();
+
+      var inputs = element.find('input');
+      var hoursInput = inputs.eq(0);
+      triggerInput(hoursInput, 4);
+      hoursInput.blur();
+
+      expect(hoursInput.val()).toBe('04');
+    });
+
+    it('should not pad the hours', function() {
+      element = $compile('<uib-timepicker ng-model="time" pad-hours="false"></uib-timepicker>')($rootScope);
+      $rootScope.$digest();
+
+      var inputs = element.find('input');
+      var hoursInput = inputs.eq(0);
+      triggerInput(hoursInput, 4);
+      hoursInput.blur();
+
+      expect(hoursInput.val()).toBe('4');
+    });
+  });
+
   describe('setting uibTimepickerConfig steps', function() {
     var originalConfig = {};
     beforeEach(inject(function(_$compile_, _$rootScope_, uibTimepickerConfig) {

src/timepicker/timepicker.js

@@ -18,7 +18,8 @@ angular.module('ui.bootstrap.timepicker', [])
   var selected = new Date(),
     watchers = [],
     ngModelCtrl = { $setViewValue: angular.noop }, // nullModelCtrl
-    meridians = angular.isDefined($attrs.meridians) ? $scope.$parent.$eval($attrs.meridians) : timepickerConfig.meridians || $locale.DATETIME_FORMATS.AMPMS;
+    meridians = angular.isDefined($attrs.meridians) ? $scope.$parent.$eval($attrs.meridians) : timepickerConfig.meridians || $locale.DATETIME_FORMATS.AMPMS,
+    padHours = angular.isDefined($attrs.padHours) ? $scope.$parent.$eval($attrs.padHours) : true;
 
   $scope.tabindex = angular.isDefined($attrs.tabindex) ? $attrs.tabindex : 0;
   $element.removeAttr('tabindex');
@@ -190,12 +191,12 @@ angular.module('ui.bootstrap.timepicker', [])
     return seconds >= 0 && seconds < 60 ? seconds : undefined;
   }
 
-  function pad(value) {
+  function pad(value, noPad) {
     if (value === null) {
       return '';
     }
 
-    return angular.isDefined(value) && value.toString().length < 2 ?
+    return angular.isDefined(value) && value.toString().length < 2 && !noPad ?
       '0' + value : value.toString();
   }
 
@@ -326,7 +327,7 @@ angular.module('ui.bootstrap.timepicker', [])
         invalidate(true);
       } else if (!$scope.invalidHours && $scope.hours < 10) {
         $scope.$apply(function() {
-          $scope.hours = pad($scope.hours);
+          $scope.hours = pad($scope.hours, !padHours);
         });
       }
     });
@@ -435,7 +436,7 @@ angular.module('ui.bootstrap.timepicker', [])
         hours = hours === 0 || hours === 12 ? 12 : hours % 12; // Convert 24 to 12 hour system
       }
 
-      $scope.hours = keyboardChange === 'h' ? hours : pad(hours);
+      $scope.hours = keyboardChange === 'h' ? hours : pad(hours, !padHours);
       if (keyboardChange !== 'm') {
         $scope.minutes = pad(minutes);
       }