Support AM/PM format in time picker

app/scripts/datePicker.js

@@ -83,7 +83,7 @@ Module.directive('datePicker', ['datePickerConfig', 'datePickerUtils', function
         isNow,
         inValidRange;
 
-      datePickerUtils.setParams(tz, firstDay);
+      datePickerUtils.setParams({ zone: tz, fd: firstDay });
 
       if (!scope.model) {
         selected.minute(Math.ceil(selected.minute() / step) * step).second(0);
@@ -147,7 +147,7 @@ Module.directive('datePicker', ['datePickerConfig', 'datePickerUtils', function
 
       function update() {
         var view = scope.view;
-        datePickerUtils.setParams(tz, firstDay);
+        datePickerUtils.setParams({ zone: tz, fd: firstDay });
 
         if (scope.model && !arrowClick) {
           scope.date = createMoment(scope.model);
@@ -169,6 +169,7 @@ Module.directive('datePicker', ['datePickerConfig', 'datePickerUtils', function
             break;
           case 'hours':
             scope.hours = datePickerUtils.getVisibleHours(date);
+            scope.hoursFormat = (scope.hours.isAmPmFormat ? 'hh:mm a' : 'HH:mm');
             break;
           case 'minutes':
             scope.minutes = datePickerUtils.getVisibleMinutes(date, step);
@@ -200,7 +201,7 @@ Module.directive('datePicker', ['datePickerConfig', 'datePickerUtils', function
           classes = [], classList = '',
           i, j;
 
-        datePickerUtils.setParams(tz, firstDay);
+        datePickerUtils.setParams({ zone: tz, fd: firstDay });
 
         if (view === 'date') {
           var weeks = scope.weeks, week;

app/scripts/datePickerUtils.js

@@ -1,6 +1,6 @@
 'use strict';
 angular.module('datePicker').factory('datePickerUtils', function () {
-  var tz, firstDay;
+  var tz, firstDay, isAmPmFormat;
   var createNewDate = function (year, month, day, hour, minute) {
     var utc = Date.UTC(year | 0, month | 0, day | 0, hour | 0, minute | 0);
     return tz ? moment.tz(utc, tz) : moment(utc);
@@ -125,7 +125,7 @@ angular.module('datePicker').factory('datePickerUtils', function () {
         }
         hours.push(pushedDate);
       }
-
+      hours.isAmPmFormat = isAmPmFormat;
       return hours;
     },
     isAfter: function (model, date) {
@@ -149,9 +149,10 @@ angular.module('datePicker').factory('datePickerUtils', function () {
     isSameMinutes: function (model, date) {
       return this.isSameHour(model, date) && model.minutes() === date.minutes();
     },
-    setParams: function (zone, fd) {
-      tz = zone;
-      firstDay = fd;
+    setParams: function (params) {
+      tz = angular.isDefined(params.zone) ? params.zone : tz;
+      firstDay = angular.isDefined(params.fd) ? params.fd : firstDay;
+      isAmPmFormat = angular.isDefined(params.isAmPmFormat) ? params.isAmPmFormat : isAmPmFormat;
     },
     scopeSearch: function (scope, name, comparisonFn) {
       var parentScope = scope,

app/scripts/dateRange.js

@@ -54,7 +54,7 @@ Module.directive('dateRange', ['$compile', 'datePickerUtils', 'dateTimeConfig',
         });
       }
 
-      datePickerUtils.setParams(attrs.timezone);
+      datePickerUtils.setParams({zone: attrs.timezone});
 
       scope.start = createMoment(scope.start);
       scope.end = createMoment(scope.end);

app/scripts/input.js

@@ -69,6 +69,8 @@ Module.directive('dateTime', ['$compile', '$document', '$filter', 'dateTimeConfi
         shownOnce = false,
         template;
 
+      datePickerUtils.setParams({ isAmPmFormat: format.match(/[aA]/) });
+
       if (index === -1) {
         views.splice(index, 1);
       }

app/styles/style.less

@@ -105,6 +105,13 @@
       line-height: 54px;
     }
   }
+
+  [ng-switch-when="hours"], [ng-switch-when="minutes"] {
+    span.am-pm{
+      width: 45%;
+    }
+  }
+
   [ng-switch-when="date"]{
     td {
       padding: 0;

app/templates/datepicker.html

@@ -77,7 +77,7 @@
         <td colspan="7">
           <span ng-repeat="hour in hours"
                 ng-class="classes[$index]"
-                ng-click="selectDate(hour)" ng-bind="hour|mFormat:'HH:mm':tz"></span>
+                ng-click="selectDate(hour)" ng-bind="hour|mFormat:hoursFormat:tz"></span>
         </td>
       </tr>
       </tbody>
@@ -98,7 +98,7 @@
           <span ng-repeat="minute in minutes"
                 ng-class="classes[$index]"
                 ng-click="selectDate(minute)"
-                ng-bind="minute|mFormat:'HH:mm':tz"></span>
+                ng-bind="minute|mFormat:'hoursFormat:tz"></span>
         </td>
       </tr>
       </tbody>

dist/angular-datepicker.css

@@ -211,6 +211,10 @@
   height: 54px;
   line-height: 54px;
 }
+[date-picker] [ng-switch-when="hours"] span.am-pm,
+[date-picker] [ng-switch-when="minutes"] span.am-pm {
+  width: 45%;
+}
 [date-picker] [ng-switch-when="date"] td {
   padding: 0;
 }