feat(datepicker): add support for the container option

Closes ng-bootstrap#1380
Closes ng-bootstrap#1857

src/datepicker/datepicker-input.spec.ts

@@ -522,6 +522,49 @@ describe('NgbInputDatepicker', () => {
  .toHaveBeenCalledWith({current: {year: 2016, month: 9}, next: {year: 2018, month: 4}});
  });
  });
+
+ describe('container', () => {
+
+ it('should be appended to the element matching the selector passed to "container"', () => {
+ const selector = 'body';
+ const fixture = createTestCmpt(`
+ <input ngbDatepicker #d="ngbDatepicker" container="${selector}">
+ <button (click)="open(d)">Open</button>
+ `);
+
+ // open date-picker
+ const button = fixture.nativeElement.querySelector('button');
+ button.click();
+ fixture.detectChanges();
+
+ expect(fixture.nativeElement.querySelector('ngb-datepicker')).toBeNull();
+ expect(document.querySelector(selector).querySelector('ngb-datepicker')).not.toBeNull();
+ });
+
+ it('should properly destroy datepicker window when the "container" option is used', () => {
+ const selector = 'body';
+ const fixture = createTestCmpt(`
+ <input ngbDatepicker #d="ngbDatepicker" container="${selector}">
+ <button (click)="open(d)">Open</button>
+ <button (click)="close(d)">Close</button>
+ `);
+
+ // open date-picker
+ const buttons = fixture.nativeElement.querySelectorAll('button');
+ buttons[0].click(); // open button
+ fixture.detectChanges();
+
+ expect(fixture.nativeElement.querySelector('ngb-datepicker')).toBeNull();
+ expect(document.querySelector(selector).querySelector('ngb-datepicker')).not.toBeNull();
+
+ // close date-picker
+ buttons[1].click(); // close button
+ fixture.detectChanges();
+
+ expect(fixture.nativeElement.querySelector('ngb-datepicker')).toBeNull();
+ expect(document.querySelector(selector).querySelector('ngb-datepicker')).toBeNull();
+ });
+ });
 });
 
 @Component({selector: 'test-cmp', template: ''})

src/datepicker/datepicker-input.ts

@@ -129,6 +129,12 @@ export class NgbInputDatepicker implements OnChanges,
  */
  @Input() startDate: {year: number, month: number};
 
+ /**
+ * A selector specifying the element the datepicker popup should be appended to.
+ * Currently only supports "body".
+ */
+ @Input() container: string;
+
  /**
  * An event fired when navigation happens and currently displayed month changes.
  * See NgbDatepickerNavigateEvent for the payload info.
@@ -146,7 +152,8 @@ export class NgbInputDatepicker implements OnChanges,
  private _service: NgbDatepickerService, private _calendar: NgbCalendar) {
  this._zoneSubscription = ngZone.onStable.subscribe(() => {
  if (this._cRef) {
- positionElements(this._elRef.nativeElement, this._cRef.location.nativeElement, this.placement);
+ positionElements(
+ this._elRef.nativeElement, this._cRef.location.nativeElement, this.placement, this.container === 'body');
  }
  });
  }
@@ -223,6 +230,10 @@ export class NgbInputDatepicker implements OnChanges,
 
  // focus handling
  this._cRef.instance.focus();
+
+ if (this.container === 'body') {
+ window.document.querySelector(this.container).appendChild(this._cRef.location.nativeElement);
+ }
  }
  }