From f6dabd2e8b996b97ee3c91f0d2b0a6dfc6ebc6d3 Mon Sep 17 00:00:00 2001
From: Wesley Cho <wesley.cho@gmail.com>
Date: Tue, 15 Mar 2016 11:35:30 -0700
Subject: [PATCH] feat(timepicker): add pad-hours support

- Add support for optionally padding hours
---
 src/timepicker/docs/readme.md          |  5 ++++
 src/timepicker/test/timepicker.spec.js | 32 ++++++++++++++++++++++++++
 src/timepicker/timepicker.js           | 11 +++++----
 3 files changed, 43 insertions(+), 5 deletions(-)

diff --git a/src/timepicker/docs/readme.md b/src/timepicker/docs/readme.md
index d14fc6d113..7815c1ee37 100644
--- a/src/timepicker/docs/readme.md
+++ b/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>
diff --git a/src/timepicker/test/timepicker.spec.js b/src/timepicker/test/timepicker.spec.js
index 21ccfeabd8..f1810779b9 100644
--- a/src/timepicker/test/timepicker.spec.js
+++ b/src/timepicker/test/timepicker.spec.js
@@ -986,6 +986,38 @@ describe('timepicker directive', function() {
     });
   });
 
+  describe('`pad-hours` attribute', function() {
+    function triggerInput(elem, val) {
+      var event = $.Event('input');
+      elem.val(val);
+      elem.trigger(event);
+    }
+
+    it('should not 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) {
diff --git a/src/timepicker/timepicker.js b/src/timepicker/timepicker.js
index e969d05126..6a6171d2eb 100644
--- a/src/timepicker/timepicker.js
+++ b/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);
       }