feat(datepicker): option whether to display button bar in popup

Author: bekos

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();

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 `<datepicker>` 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 `<datepicker>` or globally configured through the `datepickerConfig`.
+
  * `ng-model` <i class="icon-eye-open"></i>
  	:
  	The date object.
@@ -64,12 +65,16 @@ All settings can be provided as attributes in the `<datepicker>` 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`.

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('<div><input ng-model="date" datepicker-popup current-text="Now" toggle-weeks-text="T.W." clear-text="{{clearText}}" close-text="{{close}}ME"><div>')($rootScope);
+          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" show-button-bar="showBar"><div>')($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');
+        });
       });
     });
 

template/datepicker/popup.html

@@ -1,7 +1,6 @@
 <ul class="dropdown-menu" ng-style="{display: (isOpen && 'block') || 'none', top: position.top+'px', left: position.left+'px'}">
 	<li ng-transclude></li>
-	<li class="divider"></li>
-	<li style="padding: 9px;">
+	<li ng-show="showButtonBar" style="padding:10px 9px 2px">
 		<span class="btn-group">
 			<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>