feat(datepicker): allow positioning of datepicker popup

Closes #1082 Closes #1570
ng-bootstrap · May 23, 2017 · 3e22a63 · 3e22a63
1 parent 4689b4b
commit 3e22a63
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 1 deletion.
diff --git a/src/datepicker/datepicker-input.spec.ts b/src/datepicker/datepicker-input.spec.ts
@@ -48,6 +48,9 @@ describe('NgbInputDatepicker', () => {
       fixture.detectChanges();
       expect(fixture.nativeElement.querySelector('ngb-datepicker')).toBeNull();
     });
+
+    it('should support the "position" option',
+       () => { createTestCmpt(`<input ngbDatepicker #d="ngbDatepicker" [placement]="'bottom-right'">`); });
   });
 
   describe('ngModel interactions', () => {

diff --git a/src/datepicker/datepicker-input.ts b/src/datepicker/datepicker-input.ts
@@ -98,6 +98,13 @@ export class NgbInputDatepicker implements OnChanges,
    */
   @Input() outsideDays: 'visible' | 'collapsed' | 'hidden';
 
+
+  /**
+   * Placement of a datepicker popup. Accepts: "top", "bottom", "left", "right", "bottom-left",
+   * "bottom-right" etc.
+   */
+  @Input() placement = 'bottom-left';
+
   /**
    * Whether to display days of the week
    */
@@ -133,7 +140,7 @@ 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, 'bottom-left');
+        positionElements(this._elRef.nativeElement, this._cRef.location.nativeElement, this.placement);
       }
     });
   }