From 4d158e0dd972242345a18fd6824a50a2629b35bd Mon Sep 17 00:00:00 2001 From: Tasos Bekos Date: Sun, 6 Oct 2013 00:37:47 +0300 Subject: [PATCH] feat(datepicker): option whether to display button bar in popup --- src/datepicker/datepicker.js | 15 ++++++++------- src/datepicker/docs/readme.md | 11 ++++++++--- src/datepicker/test/datepicker.spec.js | 22 ++++++++++++++++------ template/datepicker/popup.html | 3 +-- 4 files changed, 33 insertions(+), 18 deletions(-) diff --git a/src/datepicker/datepicker.js b/src/datepicker/datepicker.js index a4579873c5..c75e22917b 100644 --- a/src/datepicker/datepicker.js +++ b/src/datepicker/datepicker.js @@ -258,7 +258,8 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.position']) clearText: 'Clear', closeText: 'Done', closeOnDateSelection: true, - appendToBody: false + appendToBody: false, + showButtonBar: true }) .directive('datepickerPopup', ['$compile', '$parse', '$document', '$position', 'dateFilter', 'datepickerPopupConfig', 'datepickerConfig', @@ -267,17 +268,17 @@ function ($compile, $parse, $document, $position, dateFilter, datepickerPopupCon restrict: 'EA', require: 'ngModel', link: function(originalScope, element, attrs, ngModel) { - var dateFormat; + var scope = originalScope.$new(), // create a child scope so we are not polluting original one + dateFormat, + closeOnDateSelection = angular.isDefined(attrs.closeOnDateSelection) ? originalScope.$eval(attrs.closeOnDateSelection) : datepickerPopupConfig.closeOnDateSelection, + appendToBody = angular.isDefined(attrs.datepickerAppendToBody) ? originalScope.$eval(attrs.datepickerAppendToBody) : datepickerPopupConfig.appendToBody; + attrs.$observe('datepickerPopup', function(value) { dateFormat = value || datepickerPopupConfig.dateFormat; ngModel.$render(); }); - var closeOnDateSelection = angular.isDefined(attrs.closeOnDateSelection) ? originalScope.$eval(attrs.closeOnDateSelection) : datepickerPopupConfig.closeOnDateSelection; - var appendToBody = angular.isDefined(attrs.datepickerAppendToBody) ? originalScope.$eval(attrs.datepickerAppendToBody) : datepickerPopupConfig.appendToBody; - - // create a child scope for the datepicker directive so we are not polluting original scope - var scope = originalScope.$new(); + scope.showButtonBar = angular.isDefined(attrs.showButtonBar) ? originalScope.$eval(attrs.showButtonBar) : datepickerPopupConfig.showButtonBar; originalScope.$on('$destroy', function() { scope.$destroy(); diff --git a/src/datepicker/docs/readme.md b/src/datepicker/docs/readme.md index 1e4bdfa52d..bb00aeb818 100644 --- a/src/datepicker/docs/readme.md +++ b/src/datepicker/docs/readme.md @@ -7,7 +7,8 @@ Everything is formatted using the [date filter](http://docs.angularjs.org/api/ng ### Datepicker Settings ### -All settings can be provided as attributes in the `` or globally configured through the `datepickerConfig`. `datepicker-popup` options may be provided as attributes in the `datepicker-popup`'s element, or globally configured through the `datepickerPopupConfig`. +All settings can be provided as attributes in the `` or globally configured through the `datepickerConfig`. + * `ng-model` : The date object. @@ -64,12 +65,16 @@ All settings can be provided as attributes in the `` or globally con ### Popup Settings ### Options for datepicker can be passed as JSON using the `datepicker-options` attribute. -Specific settings for the `datepicker-popup` are: +Specific settings for the `datepicker-popup`, that can globally configured through the `datepickerPopupConfig`, are: * `datepicker-popup` _(Default: 'yyyy-MM-dd')_ : The format for displayed dates. + * `show-button-bar` + _(Default: true)_ : + Whether to display a button bar underneath the datepicker. + * `current-text` _(Default: 'Today')_ : The text to display for the current day button. @@ -89,7 +94,7 @@ Specific settings for the `datepicker-popup` are: * `close-on-date-selection` _(Default: true)_ : Whether to close calendar when a date is chosen. - + * `datepicker-append-to-body` _(Default: false)_: Append the datepicker popup element to `body`, rather than inserting after `datepicker-popup`. For global configuration, use `datepickerPopupConfig.appendToBody`. diff --git a/src/datepicker/test/datepicker.spec.js b/src/datepicker/test/datepicker.spec.js index af69093103..6ed390b9d4 100644 --- a/src/datepicker/test/datepicker.spec.js +++ b/src/datepicker/test/datepicker.spec.js @@ -1137,15 +1137,20 @@ describe('datepicker directive', function () { }); describe('button bar', function() { - var buttons; + var buttons, buttonBarElement; beforeEach(inject(function() { - assignButtons(); + assignButtonBar(); })); - function assignButtons() { - buttons = dropdownEl.find('li').eq(2).find('button'); + function assignButtonBar() { + buttonBarElement = dropdownEl.find('li').eq(-1); + buttons = buttonBarElement.find('button'); } + it('should be visible', function() { + expect(buttonBarElement.css('display')).not.toBe('none'); + }); + it('should have four buttons', function() { expect(buttons.length).toBe(4); @@ -1170,12 +1175,13 @@ describe('datepicker directive', function () { describe('customization', function() { beforeEach(inject(function() { + $rootScope.showBar = false; $rootScope.clearText = 'Null it!'; $rootScope.close = 'Close'; - var wrapElement = $compile('
')($rootScope); + var wrapElement = $compile('
')($rootScope); $rootScope.$digest(); assignElements(wrapElement); - assignButtons(); + assignButtonBar(); })); it('should change text from attributes', function() { @@ -1184,6 +1190,10 @@ describe('datepicker directive', function () { expect(buttons.eq(2).text()).toBe('Null it!'); expect(buttons.eq(3).text()).toBe('CloseME'); }); + + it('should hide bar', function() { + expect(buttonBarElement.css('display')).toBe('none'); + }); }); }); diff --git a/template/datepicker/popup.html b/template/datepicker/popup.html index 7da51a9098..7c7ab7b2e3 100644 --- a/template/datepicker/popup.html +++ b/template/datepicker/popup.html @@ -1,7 +1,6 @@
  • -
  • -
  • +