feat(timepicker): default meridian labels based on locale

Closes #1150
angular-ui · Nov 29, 2013 · 8b1ab79 · 8b1ab79
1 parent 79f836c
commit 8b1ab79
Show file tree

Hide file tree

Showing 3 changed files with 24 additions and 5 deletions.
diff --git a/src/timepicker/docs/readme.md b/src/timepicker/docs/readme.md
@@ -21,8 +21,8 @@ All settings can be provided as attributes in the `<timepicker>` or globally con
  	Whether to display 12H or 24H mode.
 
  * `meridians`
- 	_(Defaults: ['AM', 'PM'])_ :
- 	 Meridian labels
+ 	_(Defaults: null)_ :
+ 	 Meridian labels based on locale. To override you must supply an array like ['AM', 'PM'].
 
  * `readonly-input`
  	_(Defaults: false)_ :

diff --git a/src/timepicker/test/timepicker.spec.js b/src/timepicker/test/timepicker.spec.js
@@ -578,6 +578,24 @@ describe('timepicker directive', function () {
     });
   });
 
+  describe('`meridians` attribute', function() {
+    beforeEach(inject(function() {
+      $rootScope.meridiansArray = ['am', 'pm'];
+      element = $compile('<timepicker ng-model="$parent.time" meridians="meridiansArray"></timepicker>')($rootScope);
+      $rootScope.$digest();
+    }));
+
+    it('displays correctly', function () {
+      expect(getTimeState()[2]).toBe('pm');
+    });
+
+    it('toggles correctly', function () {
+      $rootScope.time = newTime(2, 40);
+      $rootScope.$digest();
+      expect(getTimeState()[2]).toBe('am');
+    });
+  });
+
   describe('setting timepickerConfig steps', function() {
     var originalConfig = {};
     beforeEach(inject(function(_$compile_, _$rootScope_, timepickerConfig) {

diff --git a/src/timepicker/timepicker.js b/src/timepicker/timepicker.js
@@ -4,12 +4,12 @@ angular.module('ui.bootstrap.timepicker', [])
   hourStep: 1,
   minuteStep: 1,
   showMeridian: true,
-  meridians: ['AM', 'PM'],
+  meridians: null,
   readonlyInput: false,
   mousewheel: true
 })
 
-.directive('timepicker', ['$parse', '$log', 'timepickerConfig', function ($parse, $log, timepickerConfig) {
+.directive('timepicker', ['$parse', '$log', 'timepickerConfig', '$locale', function ($parse, $log, timepickerConfig, $locale) {
   return {
     restrict: 'EA',
     require:'?^ngModel',
@@ -21,7 +21,8 @@ angular.module('ui.bootstrap.timepicker', [])
         return; // do nothing if no ng-model
       }
 
-      var selected = new Date(), meridians = timepickerConfig.meridians;
+      var selected = new Date(),
+          meridians = angular.isDefined(attrs.meridians) ? scope.$parent.$eval(attrs.meridians) : timepickerConfig.meridians || $locale.DATETIME_FORMATS.AMPMS;
 
       var hourStep = timepickerConfig.hourStep;
       if (attrs.hourStep) {