feat(datepicker): add i18n support for bar buttons in popup

Closes angular-ui#777

Author: bekos

src/datepicker/datepicker.js

@@ -253,6 +253,10 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.position'])
 
 .constant('datepickerPopupConfig', {
   dateFormat: 'yyyy-MM-dd',
+  currentText: 'Today',
+  toggleWeeksText: 'Weeks',
+  clearText: 'Clear',
+  closeText: 'Done',
   closeOnDateSelection: true
 })
 
@@ -266,12 +270,25 @@ function ($compile, $parse, $document, $position, dateFilter, datepickerPopupCon
       var closeOnDateSelection = angular.isDefined(attrs.closeOnDateSelection) ? scope.$eval(attrs.closeOnDateSelection) : datepickerPopupConfig.closeOnDateSelection;
       var dateFormat = attrs.datepickerPopup || datepickerPopupConfig.dateFormat;
 
-     // create a child scope for the datepicker directive so we are not polluting original scope
+      // create a child scope for the datepicker directive so we are not polluting original scope
       var scope = originalScope.$new();
       originalScope.$on('$destroy', function() {
         scope.$destroy();
       });
 
+      attrs.$observe('currentText', function(text) {
+        scope.currentText = angular.isDefined(text) ? text : datepickerPopupConfig.currentText;
+      });
+      attrs.$observe('toggleWeeksText', function(text) {
+        scope.toggleWeeksText = angular.isDefined(text) ? text : datepickerPopupConfig.toggleWeeksText;
+      });
+      attrs.$observe('clearText', function(text) {
+        scope.clearText = angular.isDefined(text) ? text : datepickerPopupConfig.clearText;
+      });
+      attrs.$observe('closeText', function(text) {
+        scope.closeText = angular.isDefined(text) ? text : datepickerPopupConfig.closeText;
+      });
+
       var getIsOpen, setIsOpen;
       if ( attrs.isOpen ) {
         getIsOpen = $parse(attrs.isOpen);
@@ -431,7 +448,7 @@ function ($compile, $parse, $document, $position, dateFilter, datepickerPopupCon
   };
 }])
 
-.directive('datepickerPopupWrap', [function() {
+.directive('datepickerPopupWrap', function() {
   return {
     restrict:'E',
     replace: true,
@@ -444,4 +461,4 @@ function ($compile, $parse, $document, $position, dateFilter, datepickerPopupCon
       });
     }
   };
-}]);
+});

src/datepicker/docs/demo.html

@@ -6,7 +6,7 @@
     </div>
 
     <div class="form-horizontal">
-        <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" />
+        <input type="text" datepicker-popup="dd-MMMM-yyyy" ng-model="dt" is-open="opened" min="minDate" max="'2015-06-22'" datepicker-options="dateOptions" date-disabled="disabled(date, mode)" ng-required="true" close-text="Close" />
         <button class="btn" ng-click="open()"><i class="icon-calendar"></i></button>
     </div>
 

src/datepicker/docs/readme.md

@@ -5,7 +5,7 @@ The datepicker shows dates that come from other than the main month being displa
 
 Everything is formatted using the [date filter](http://docs.angularjs.org/api/ng.filter:date) and thus is also localized.
 
-### Settings ###
+### Datepicker Settings ###
 
 All settings can be provided as attributes in the `<datepicker>` or globally configured through the `datepickerConfig`.
 
@@ -60,3 +60,33 @@ All settings can be provided as attributes in the `<datepicker>` or globally con
  * `month-title-format`
  	_(Default: 'yyyy')_ :
  	Format of title when selecting month.
+
+
+### Popup Settings ###
+
+Options for datepicker can be passed as JSON using the `datepicker-options` attribute.
+Specific settings for the `datepicker-popup` are:
+
+ * `datepicker-popup`
+ 	_(Default: 'yyyy-MM-dd')_ :
+ 	The format for displayed dates.
+
+ * `current-text`
+ 	_(Default: 'Today')_ :
+ 	The text to display for the current day button.
+
+ * `toggle-weeks-text`
+ 	_(Default: 'Weeks')_ :
+ 	The text to display for the toggling week numbers button.
+
+ * `clear-text`
+ 	_(Default: 'Clear')_ :
+ 	The text to display for the clear button.
+
+ * `close-text`
+ 	_(Default: 'Done')_ :
+ 	The text to display for the close button.
+
+ * `close-on-date-selection`
+ 	_(Default: true)_ :
+ 	Whether to close calendar when a date is chosen.

src/datepicker/test/datepicker.spec.js

@@ -1091,6 +1091,57 @@ describe('datepicker directive', function () {
       });
     });
 
+    describe('button bar', function() {
+      var buttons;
+      beforeEach(inject(function() {
+        assignButtons();
+      }));
+
+      function assignButtons() {
+        buttons = dropdownEl.find('li').eq(2).find('button');
+      }
+
+      it('should have four buttons', function() {
+        expect(buttons.length).toBe(4);
+
+        expect(buttons.eq(0).text()).toBe('Today');
+        expect(buttons.eq(1).text()).toBe('Weeks');
+        expect(buttons.eq(2).text()).toBe('Clear');
+        expect(buttons.eq(3).text()).toBe('Done');
+      });
+
+      it('should have a button to clear value', function() {
+        buttons.eq(2).click();
+        expect($rootScope.date).toBe(null);
+      });
+
+      it('should have a button to close calendar', function() {
+        inputEl.focus();
+        expect(dropdownEl.css('display')).not.toBe('none');
+
+        buttons.eq(3).click();
+        expect(dropdownEl.css('display')).toBe('none');
+      });
+
+      describe('customization', function() {
+        beforeEach(inject(function() {
+          $rootScope.clearText = 'Null it!';
+          $rootScope.close = 'Close';
+          var wrapElement = $compile('<div><input ng-model="date" datepicker-popup current-text="Now" toggle-weeks-text="T.W." clear-text="{{clearText}}" close-text="{{close}}ME"><div>')($rootScope);
+          $rootScope.$digest();
+          assignElements(wrapElement);
+          assignButtons();
+        }));
+
+        it('should change text from attributes', function() {
+          expect(buttons.eq(0).text()).toBe('Now');
+          expect(buttons.eq(1).text()).toBe('T.W.');
+          expect(buttons.eq(2).text()).toBe('Null it!');
+          expect(buttons.eq(3).text()).toBe('CloseME');
+        });
+      });
+    });
+
     describe('use with `ng-required` directive', function() {
       beforeEach(inject(function() {
         $rootScope.date = '';

template/datepicker/popup.html

@@ -3,10 +3,10 @@
 	<li class="divider"></li>
 	<li style="padding: 9px;">
 		<span class="btn-group">
-			<button class="btn btn-small btn-inverse" ng-click="today()">Today</button>
-			<button class="btn btn-small btn-info" ng-click="showWeeks = ! showWeeks" ng-class="{active: showWeeks}">Weeks</button>
-			<button class="btn btn-small btn-danger" ng-click="clear()">Clear</button>
+			<button type="button" class="btn btn-small btn-inverse" ng-click="today()">{{currentText}}</button>
+			<button type="button" class="btn btn-small btn-info" ng-click="showWeeks = ! showWeeks" ng-class="{active: showWeeks}">{{toggleWeeksText}}</button>
+			<button type="button" class="btn btn-small btn-danger" ng-click="clear()">{{clearText}}</button>
 		</span>
-		<button class="btn btn-small btn-success pull-right" ng-click="isOpen = false">Close</button>
+		<button type="button" class="btn btn-small btn-success pull-right" ng-click="isOpen = false">{{closeText}}</button>
 	</li>
 </ul>