fix: Add placement option to date/datetime picker

docs/app/documentation/component-docs/date-picker/date-picker-docs.component.html

@@ -19,7 +19,8 @@ <h2>Range Date Picker</h2>
 
 <separator></separator>
 <h2>Internationalization</h2>
-<description>It is possible to internationalize both the aria labels and the month names/weekdays through providing a service.</description>
+<description>It is possible to internationalize both the aria labels and the month names/weekdays through providing a service.
+    There is also added <code>[position]</code> attribute which allows us to decide where popup should be shown.</description>
 <component-example [name]="'ex3'">
     <fd-datepicker-i18n-example></fd-datepicker-i18n-example>
 </component-example>

docs/app/documentation/component-docs/date-picker/examples/date-picker-i18n-example.component.ts

@@ -52,7 +52,7 @@ export class CustomI18nLabels extends CalendarI18nLabels {
 
 @Component({
     selector: 'fd-datepicker-i18n-example',
-    template: `<fd-date-picker [(ngModel)]="selectedDay"></fd-date-picker>`,
+    template: `<fd-date-picker [(ngModel)]="selectedDay" [placement]="'top-end'"></fd-date-picker>`,
 
     // Note that this can be provided in the root of your application.
     providers: [

docs/app/documentation/component-docs/datetime-picker/datetime-picker-docs.component.html

@@ -2,6 +2,7 @@ <h2>Simple Datetime Picker</h2>
 <description>
     The simplest form of the datetime picker. It makes use of ngModel to bind to the desired value.
     The alternative is to use the date input combined with the dateChange output.
+    There is also added <code>[position]</code> attribute which allows us to decide where popup should be shown
 </description>
 <component-example [name]="'ex1'">
     <app-datetime-example></app-datetime-example>

docs/app/documentation/component-docs/datetime-picker/examples/datetime-example/datetime-example.component.html

@@ -1,5 +1,5 @@
 <!-- Just needs a date object in the ts file! -->
-<fd-datetime-picker [(ngModel)]="this.date"></fd-datetime-picker>
+<fd-datetime-picker [(ngModel)]="this.date" [placement]="'bottom-end'"></fd-datetime-picker>
 
 <span style="padding-left: 20px;">
     Selected: {{date ? date.toLocaleString() : 'null'}}

library/src/lib/date-picker/date-picker.component.html

@@ -1,5 +1,6 @@
 <fd-popover [(isOpen)]="isOpen"
-            [triggers]="[]">
+            [triggers]="[]"
+            [placement]="placement">
     <fd-popover-control>
         <div class="fd-input-group fd-input-group--after"
              [ngClass]="{'fd-input-group--compact' : compact}">

library/src/lib/date-picker/date-picker.component.ts

@@ -15,6 +15,7 @@ import { CalendarDay, CalendarType } from '../calendar/calendar.component';
 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Subject } from 'rxjs';
 import { DateFormatParser } from '../calendar/format/date-parser';
+import { Placement } from 'popper.js';
 
 @Component({
     selector: 'fd-date-picker',
@@ -105,6 +106,11 @@ export class DatePickerComponent implements OnInit, OnDestroy, ControlValueAcces
     @Input()
     allowNull: boolean = true;
 
+    /** The placement of the popover. It can be one of: top, top-start, top-end, bottom,
+     *  bottom-start, bottom-end, right, right-start, right-end, left, left-start, left-end. */
+    @Input()
+    placement: Placement = 'auto';
+
     /**
      * Function used to disable certain dates in the calendar.
      * @param d Date

library/src/lib/datetime-picker/datetime-picker.component.html

@@ -2,7 +2,8 @@
     <fd-popover [(isOpen)]="isOpen"
                 [closeOnOutsideClick]="false"
                 [closeOnEscapeKey]="false"
-                [triggers]="[]">
+                [triggers]="[]"
+                [placement]="placement">
         <fd-popover-control>
             <div class="fd-input-group fd-input-group--after"
                  [ngClass]="{'fd-input-group--compact' : compact}">

library/src/lib/datetime-picker/datetime-picker.component.ts

@@ -16,6 +16,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
 import { Subject, Subscription } from 'rxjs';
 import { TimeObject } from '../time/time-object';
 import { TimeComponent } from '../time/time.component';
+import { Placement } from 'popper.js';
 
 /**
  * The datetime picker component is an opinionated composition of the fd-popover,
@@ -52,6 +53,11 @@ export class DatetimePickerComponent implements OnInit, OnDestroy, ControlValueA
     @Input()
     compact: boolean = false;
 
+    /** The placement of the popover. It can be one of: top, top-start, top-end, bottom,
+     *  bottom-start, bottom-end, right, right-start, right-end, left, left-start, left-end. */
+    @Input()
+    placement: Placement = 'auto';
+
     /** Whether the time component should be meridian (am/pm). */
     @Input()
     meridian: boolean = true;