feat(datepicker): datepicker-append-to-body attribute

Attribute / option specifies where in the DOM to place the datepicker
popup elements.

If this option evaluates to 'true', the datepicker popup elements are
appended to 'body'. Otherwise, they follow the directive element.

Author: Caitlin Potter

src/datepicker/datepicker.js

@@ -257,7 +257,8 @@ angular.module('ui.bootstrap.datepicker', ['ui.bootstrap.position'])
   toggleWeeksText: 'Weeks',
   clearText: 'Clear',
   closeText: 'Done',
-  closeOnDateSelection: true
+  closeOnDateSelection: true,
+  appendToBody: false
 })
 
 .directive('datepickerPopup', ['$compile', '$parse', '$document', '$position', 'dateFilter', 'datepickerPopupConfig',
@@ -266,15 +267,18 @@ function ($compile, $parse, $document, $position, dateFilter, datepickerPopupCon
     restrict: 'EA',
     require: 'ngModel',
     link: function(originalScope, element, attrs, ngModel) {
-      var closeOnDateSelection = angular.isDefined(attrs.closeOnDateSelection) ? originalScope.$eval(attrs.closeOnDateSelection) : datepickerPopupConfig.closeOnDateSelection;
       var dateFormat;
       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();
+
       originalScope.$on('$destroy', function() {
         scope.$destroy();
       });
@@ -446,7 +450,12 @@ function ($compile, $parse, $document, $position, dateFilter, datepickerPopupCon
         $setModelValue(originalScope, null);
       };
 
-      element.after($compile(popupEl)(scope));
+      var $popup = $compile(popupEl)(scope);
+      if ( appendToBody ) {
+        $document.find('body').append($popup);
+      } else {
+        element.after($popup);
+      }
     }
   };
 }])

src/datepicker/docs/readme.md

@@ -7,8 +7,7 @@ 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`.
-
+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`.
  * `ng-model` <i class="icon-eye-open"></i>
  	:
  	The date object.
@@ -89,4 +88,8 @@ Specific settings for the `datepicker-popup` are:
 
  * `close-on-date-selection`
  	_(Default: true)_ :
- 	Whether to close calendar when a date is chosen.
+ 	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

@@ -1240,6 +1240,25 @@ describe('datepicker directive', function () {
         expect(inputEl.val()).toBe('pizza');
       });
     });
+
+    describe('with an append-to-body attribute', function() {
+      beforeEach(inject(function($rootScope) {
+        $rootScope.date = new Date();
+      }));
+
+      it('should append to the body', function() {
+        var $body = $document.find('body'),
+            bodyLength = $body.children().length,
+            elm = angular.element(
+              '<div><input datepicker-popup ng-model="date" datepicker-append-to-body="true"></input></div>'
+            );
+        $compile(elm)($rootScope);
+        $rootScope.$digest();
+
+        expect($body.children().length).toEqual(bodyLength + 1);
+        expect(elm.children().length).toEqual(1);
+      });
+    });
   });
 });
 
@@ -1263,4 +1282,4 @@ describe('datepicker directive with empty initial state', function () {
   it('is shows rows with days', function() {
     expect(element.find('tbody').find('tr').length).toBeGreaterThan(3);
   });
-});
+});