Skip to content
This repository has been archived by the owner on May 29, 2019. It is now read-only.

Commit

Permalink
feat(datepicker): datepicker-append-to-body attribute
Browse files Browse the repository at this point in the history
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.
  • Loading branch information
Caitlin Potter authored and pkozlowski-opensource committed Oct 4, 2013
1 parent 4540476 commit 0cdc460
Show file tree
Hide file tree
Showing 3 changed files with 38 additions and 7 deletions.
15 changes: 12 additions & 3 deletions src/datepicker/datepicker.js
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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();
});
Expand Down Expand Up @@ -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);
}
}
};
}])
Expand Down
9 changes: 6 additions & 3 deletions src/datepicker/docs/readme.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down Expand Up @@ -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`.
21 changes: 20 additions & 1 deletion src/datepicker/test/datepicker.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -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);
});
});
});
});

Expand All @@ -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);
});
});
});

0 comments on commit 0cdc460

Please sign in to comment.