From c6ba8d7f3107baf52d18741f8bfce4046a1a8777 Mon Sep 17 00:00:00 2001 From: Tasos Bekos Date: Sat, 31 Aug 2013 17:50:00 +0300 Subject: [PATCH] feat(datepicker): add i18n support for bar buttons in popup Closes #777 --- src/datepicker/datepicker.js | 23 ++++++++++-- src/datepicker/docs/demo.html | 2 +- src/datepicker/docs/readme.md | 32 +++++++++++++++- src/datepicker/test/datepicker.spec.js | 51 ++++++++++++++++++++++++++ template/datepicker/popup.html | 8 ++-- 5 files changed, 107 insertions(+), 9 deletions(-) diff --git a/src/datepicker/datepicker.js b/src/datepicker/datepicker.js index 130ada20d4..91237005c3 100644 --- a/src/datepicker/datepicker.js +++ b/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 }); } }; -}]); +}); diff --git a/src/datepicker/docs/demo.html b/src/datepicker/docs/demo.html index 423245b515..22404d030e 100644 --- a/src/datepicker/docs/demo.html +++ b/src/datepicker/docs/demo.html @@ -6,7 +6,7 @@
- +
diff --git a/src/datepicker/docs/readme.md b/src/datepicker/docs/readme.md index d8eb2d9a53..d09b2c39c9 100644 --- a/src/datepicker/docs/readme.md +++ b/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 `` or globally configured through the `datepickerConfig`. @@ -60,3 +60,33 @@ All settings can be provided as attributes in the `` 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. \ No newline at end of file diff --git a/src/datepicker/test/datepicker.spec.js b/src/datepicker/test/datepicker.spec.js index 2e81632d5f..951b9ae9fe 100644 --- a/src/datepicker/test/datepicker.spec.js +++ b/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('
')($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 = ''; diff --git a/template/datepicker/popup.html b/template/datepicker/popup.html index 77b04a263e..d45be356df 100644 --- a/template/datepicker/popup.html +++ b/template/datepicker/popup.html @@ -3,10 +3,10 @@
  • - - - + + + - +
    • \ No newline at end of file