From 8cd457bd6cd314655c394a0efcd7d3d39fdd725c Mon Sep 17 00:00:00 2001
From: Frank McCown <fmccown@harding.edu>
Date: Thu, 13 Aug 2015 14:46:22 -0500
Subject: [PATCH 1/3] Added ability to handle empty model

Model can be empty so user must type values into the hour and minute
text boxes.
---
 src/timepicker/timepicker.js        | 80 +++++++++++++++++++----------
 template/timepicker/timepicker.html |  4 +-
 2 files changed, 56 insertions(+), 28 deletions(-)

diff --git a/src/timepicker/timepicker.js b/src/timepicker/timepicker.js
index 01502258a7..be49b13ee6 100644
--- a/src/timepicker/timepicker.js
+++ b/src/timepicker/timepicker.js
@@ -143,6 +143,9 @@ angular.module('ui.bootstrap.timepicker', [])
   }
 
   function pad(value) {
+    if (value === null) {
+      return '';
+    }
     return (angular.isDefined(value) && value.toString().length < 2) ? '0' + value : value.toString();
   }
 
@@ -218,12 +221,15 @@ angular.module('ui.bootstrap.timepicker', [])
       var hours = getHoursFromTemplate(),
         minutes = getMinutesFromTemplate();
 
-      if (angular.isDefined(hours) && angular.isDefined(minutes)) {
-        selected.setHours(hours);
-        if (selected < min || selected > max) {
-          invalidate(true);
-        } else {
-          refresh('h');
+      if (angular.isDefined(hours)) {
+        if (angular.isDefined(minutes)) {
+          selected.setHours(hours);
+          selected.setMinutes(minutes);
+          if (selected < min || selected > max) {
+            invalidate(true);
+          } else {
+            refresh('h');
+          }
         }
       } else {
         invalidate(true);
@@ -231,9 +237,12 @@ angular.module('ui.bootstrap.timepicker', [])
     };
 
     hoursInputEl.bind('blur', function(e) {
-      if (!$scope.invalidHours && $scope.hours < 10) {
+      ngModelCtrl.$setTouched();
+      if ($scope.hours === null || $scope.hours === "") {
+        invalidate(true);
+      } else if (!$scope.invalidHours && $scope.hours < 10) {
         $scope.$apply(function() {
-          $scope.hours = pad($scope.hours);
+        $scope.hours = pad($scope.hours);
         });
       }
     });
@@ -242,12 +251,15 @@ angular.module('ui.bootstrap.timepicker', [])
       var minutes = getMinutesFromTemplate(),
         hours = getHoursFromTemplate();
 
-      if (angular.isDefined(minutes) && angular.isDefined(hours)) {
-        selected.setMinutes(minutes);
-        if (selected < min || selected > max) {
-          invalidate(undefined, true);
-        } else {
-          refresh('m');
+      if (angular.isDefined(minutes)) {
+        if (angular.isDefined(hours)) {
+          selected.setHours(hours);
+          selected.setMinutes(minutes);
+          if (selected < min || selected > max) {
+            invalidate(undefined, true);
+          } else {
+            refresh('m');
+          }
         }
       } else {
         invalidate(undefined, true);
@@ -255,7 +267,10 @@ angular.module('ui.bootstrap.timepicker', [])
     };
 
     minutesInputEl.bind('blur', function(e) {
-      if (!$scope.invalidMinutes && $scope.minutes < 10) {
+      ngModelCtrl.$setTouched();
+      if ($scope.minutes === null) {
+        invalidate(undefined, true);
+      } else if (!$scope.invalidMinutes && $scope.minutes < 10) {
         $scope.$apply(function() {
           $scope.minutes = pad($scope.minutes);
         });
@@ -300,17 +315,23 @@ angular.module('ui.bootstrap.timepicker', [])
   }
 
   function updateTemplate(keyboardChange) {
-    var hours = selected.getHours(), minutes = selected.getMinutes();
-
-    if ($scope.showMeridian) {
-      hours = (hours === 0 || hours === 12) ? 12 : hours % 12; // Convert 24 to 12 hour system
-    }
+    if (ngModelCtrl.$modelValue == null) {
+      $scope.hours = null;
+      $scope.minutes = null;
+	  $scope.meridian = meridians[0];
+	} else {
+      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);
-    if (keyboardChange !== 'm') {
-      $scope.minutes = pad(minutes);
-    }
-    $scope.meridian = selected.getHours() < 12 ? meridians[0] : meridians[1];
+      $scope.hours = keyboardChange === 'h' ? hours : pad(hours);
+      if (keyboardChange !== 'm') {
+        $scope.minutes = pad(minutes);
+      }
+      $scope.meridian = selected.getHours() < 12 ? meridians[0] : meridians[1];
+	}
   }
 
   function addMinutes(date, minutes) {
@@ -353,8 +374,15 @@ angular.module('ui.bootstrap.timepicker', [])
   };
 
   $scope.toggleMeridian = function() {
+    var minutes = getMinutesFromTemplate(),
+        hours = getHoursFromTemplate();
+    
     if (!$scope.noToggleMeridian()) {
-      addMinutesToSelected(12 * 60 * (selected.getHours() < 12 ? 1 : -1));
+      if (angular.isDefined(minutes) && angular.isDefined(hours)) {
+        addMinutesToSelected(12 * 60 * (selected.getHours() < 12 ? 1 : -1));
+      } else {
+        $scope.meridian = $scope.meridian == meridians[0] ? meridians[1] : meridians[0];
+      }
     }
   };
 }])
diff --git a/template/timepicker/timepicker.html b/template/timepicker/timepicker.html
index f09963333d..adff098240 100644
--- a/template/timepicker/timepicker.html
+++ b/template/timepicker/timepicker.html
@@ -8,11 +8,11 @@
     </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-readonly="::readonlyInput" maxlength="2">
+        <input style="width:50px;" type="text" placeholder="HH" ng-model="hours" ng-change="updateHours()" class="form-control text-center" ng-readonly="::readonlyInput" 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" placeholder="MM" ng-model="minutes" ng-change="updateMinutes()" class="form-control text-center" ng-readonly="::readonlyInput" maxlength="2">
       </td>
       <td ng-show="showMeridian"><button type="button" ng-class="{disabled: noToggleMeridian()}" class="btn btn-default text-center" ng-click="toggleMeridian()">{{meridian}}</button></td>
     </tr>

From 6cb0ea6182f7477769133ad10f1c52934db841ab Mon Sep 17 00:00:00 2001
From: Franz Torghele <ftorghele@eurofunk.com>
Date: Mon, 5 Oct 2015 14:30:31 +0200
Subject: [PATCH 2/3] Added ability to handle empty model - fixed PR

---
 src/timepicker/timepicker.js | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/timepicker/timepicker.js b/src/timepicker/timepicker.js
index be49b13ee6..6ba133e87b 100644
--- a/src/timepicker/timepicker.js
+++ b/src/timepicker/timepicker.js
@@ -238,7 +238,7 @@ angular.module('ui.bootstrap.timepicker', [])
 
     hoursInputEl.bind('blur', function(e) {
       ngModelCtrl.$setTouched();
-      if ($scope.hours === null || $scope.hours === "") {
+      if ($scope.hours === null || $scope.hours === '') {
         invalidate(true);
       } else if (!$scope.invalidHours && $scope.hours < 10) {
         $scope.$apply(function() {
@@ -318,8 +318,8 @@ angular.module('ui.bootstrap.timepicker', [])
     if (ngModelCtrl.$modelValue == null) {
       $scope.hours = null;
       $scope.minutes = null;
-	  $scope.meridian = meridians[0];
-	} else {
+      $scope.meridian = meridians[0];
+    } else {
       var hours = selected.getHours(), minutes = selected.getMinutes();
 
       if ($scope.showMeridian) {
@@ -331,7 +331,7 @@ angular.module('ui.bootstrap.timepicker', [])
         $scope.minutes = pad(minutes);
       }
       $scope.meridian = selected.getHours() < 12 ? meridians[0] : meridians[1];
-	}
+    }
   }
 
   function addMinutes(date, minutes) {
@@ -376,12 +376,12 @@ angular.module('ui.bootstrap.timepicker', [])
   $scope.toggleMeridian = function() {
     var minutes = getMinutesFromTemplate(),
         hours = getHoursFromTemplate();
-    
+
     if (!$scope.noToggleMeridian()) {
       if (angular.isDefined(minutes) && angular.isDefined(hours)) {
         addMinutesToSelected(12 * 60 * (selected.getHours() < 12 ? 1 : -1));
       } else {
-        $scope.meridian = $scope.meridian == meridians[0] ? meridians[1] : meridians[0];
+        $scope.meridian = $scope.meridian === meridians[0] ? meridians[1] : meridians[0];
       }
     }
   };

From 00e6d2e95f0654362c7a9c41dcf6dca47595251a Mon Sep 17 00:00:00 2001
From: Franz Torghele <ftorghele@eurofunk.com>
Date: Tue, 6 Oct 2015 13:31:58 +0200
Subject: [PATCH 3/3] chore(timepicker): Added ability to handle empty model -
 fixed tests

---
 src/timepicker/timepicker.js | 34 +++++++++++++++-------------------
 1 file changed, 15 insertions(+), 19 deletions(-)

diff --git a/src/timepicker/timepicker.js b/src/timepicker/timepicker.js
index 6ba133e87b..65889be278 100644
--- a/src/timepicker/timepicker.js
+++ b/src/timepicker/timepicker.js
@@ -221,15 +221,13 @@ angular.module('ui.bootstrap.timepicker', [])
       var hours = getHoursFromTemplate(),
         minutes = getMinutesFromTemplate();
 
-      if (angular.isDefined(hours)) {
-        if (angular.isDefined(minutes)) {
-          selected.setHours(hours);
-          selected.setMinutes(minutes);
-          if (selected < min || selected > max) {
-            invalidate(true);
-          } else {
-            refresh('h');
-          }
+      if (angular.isDefined(hours) && angular.isDefined(minutes)) {
+        selected.setHours(hours);
+        selected.setMinutes(minutes);
+        if (selected < min || selected > max) {
+          invalidate(true);
+        } else {
+          refresh('h');
         }
       } else {
         invalidate(true);
@@ -242,7 +240,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);
         });
       }
     });
@@ -251,15 +249,13 @@ angular.module('ui.bootstrap.timepicker', [])
       var minutes = getMinutesFromTemplate(),
         hours = getHoursFromTemplate();
 
-      if (angular.isDefined(minutes)) {
-        if (angular.isDefined(hours)) {
-          selected.setHours(hours);
-          selected.setMinutes(minutes);
-          if (selected < min || selected > max) {
-            invalidate(undefined, true);
-          } else {
-            refresh('m');
-          }
+      if (angular.isDefined(minutes) && angular.isDefined(hours)) {
+        selected.setHours(hours);
+        selected.setMinutes(minutes);
+        if (selected < min || selected > max) {
+          invalidate(undefined, true);
+        } else {
+          refresh('m');
         }
       } else {
         invalidate(undefined, true);