fix(timepicker): Always pad the hours and minutes

The timepicker only padded the minutes and hours when the template first loaded. The hours and minutes are now also padded when the model changes. Fixes angular-ui#2314.
mbuttu · Jun 10, 2014 · 07ac585 · 07ac585
1 parent 5cd6f4a
commit 07ac585
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 7 deletions.
diff --git a/src/timepicker/test/timepicker.spec.js b/src/timepicker/test/timepicker.spec.js
@@ -714,11 +714,39 @@ describe('timepicker directive', function () {
       expect(getModelState()).toEqual([14, 40]);
     });
 
+    it('always pads hours & minutes', function() {
+      // Make sure hours and minutes are padded in 12 hour format
+      $rootScope.meridian = true;
+      element = $compile('<timepicker ng-model="time" show-meridian="meridian"></timepicker>')($rootScope);
+      $rootScope.$digest();
+
+      var hours = getHoursInputEl();
+      var minutes = getMinutesInputEl();
+
+      // Make sure the time is padded when the template is first loaded
+      expect(getTimeState()).toEqual(['02', '40', 'PM']);
+      expect(getModelState()).toEqual([14, 40]);
+
+      changeInputValueTo(hours, 5);
+      changeInputValueTo(minutes, 7);
+      $rootScope.$digest();
+      expect(getTimeState()).toEqual(['05', '07', 'PM']);
+      expect(getModelState()).toEqual([17, 7]);
+
+      // Make sure hours and minutes are padded in 24 hour format
+      $rootScope.meridian = false;
+      changeInputValueTo(hours, 0);
+      changeInputValueTo(minutes, 0);
+      $rootScope.$digest();
+      expect(getTimeState()).toEqual(['00', '00', 'AM']);
+      expect(getModelState()).toEqual([0, 0]);
+    });
+
     it('updates hours & pads on input change & pads on blur', function() {
       var el = getHoursInputEl();
 
       changeInputValueTo(el, 5);
-      expect(getTimeState()).toEqual(['5', '40', 'PM']);
+      expect(getTimeState()).toEqual(['05', '40', 'PM']);
       expect(getModelState()).toEqual([17, 40]);
 
       el.blur();
@@ -730,7 +758,7 @@ describe('timepicker directive', function () {
       var el = getMinutesInputEl();
 
       changeInputValueTo(el, 9);
-      expect(getTimeState()).toEqual(['02', '9', 'PM']);
+      expect(getTimeState()).toEqual(['02', '09', 'PM']);
       expect(getModelState()).toEqual([14, 9]);
 
       el.blur();

diff --git a/src/timepicker/timepicker.js b/src/timepicker/timepicker.js
@@ -188,10 +188,10 @@ angular.module('ui.bootstrap.timepicker', [])
   };
 
   // Call internally when we know that model is valid.
-  function refresh( keyboardChange ) {
+  function refresh() {
     makeValid();
     ngModelCtrl.$setViewValue( new Date(selected) );
-    updateTemplate( keyboardChange );
+    updateTemplate();
   }
 
   function makeValid() {
@@ -200,15 +200,15 @@ angular.module('ui.bootstrap.timepicker', [])
     $scope.invalidMinutes = false;
   }
 
-  function updateTemplate( keyboardChange ) {
+  function updateTemplate() {
     var hours = selected.getHours(), minutes = selected.getMinutes();
 
     if ( $scope.showMeridian ) {
       hours = ( hours === 0 || hours === 12 ) ? 12 : hours % 12; // Convert 24 to 12 hour system
     }
 
-    $scope.hours = keyboardChange === 'h' ? hours : pad(hours);
-    $scope.minutes = keyboardChange === 'm' ? minutes : pad(minutes);
+    $scope.hours = pad( hours );
+    $scope.minutes = pad( minutes );
     $scope.meridian = selected.getHours() < 12 ? meridians[0] : meridians[1];
   }