fix: Add placement option to date/datetime picker (#925)

* Add placement option to calendar/datetime picker

* Add Separeted example for date picker with other position

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

@@ -40,3 +40,11 @@ <h2>Null Validity</h2>
     <fd-date-picker-allow-null-example></fd-date-picker-allow-null-example>
 </component-example>
 <code-example [code]="datePickerAllowNullTs" [language]="'typescript'"></code-example>
+
+<separator></separator>
+<h2>Position</h2>
+<description>There is also added <code>[position]</code> attribute which allows us to decide where popup should be shown.</description>
+<component-example name="'ex6'">
+    <fd-date-picker-position-example></fd-date-picker-position-example>
+</component-example>
+<code-example [code]="datePickerPositionTs" [language]="'typescript'"></code-example>

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

@@ -5,6 +5,7 @@ import * as datePickerSingleSrc from '!raw-loader!./examples/date-picker-single-
 import * as datePickeri18nSrc from '!raw-loader!./examples/date-picker-i18n-example.component.ts';
 import * as datePickerFormatSrc from '!raw-loader!./examples/date-picker-format-example.component.ts';
 import * as datePickerAllowNullSrc from '!raw-loader!./examples/date-picker-allow-null-example.component.ts';
+import * as datePickerPositionSrc from '!raw-loader!./examples/date-picker-position-example.component.ts';
 
 @Component({
     selector: 'app-date-picker',
@@ -17,4 +18,5 @@ export class DatePickerDocsComponent {
     datePickerI18NTs = datePickeri18nSrc;
     datePickerFormatTs = datePickerFormatSrc;
     datePickerAllowNullTs = datePickerAllowNullSrc;
+    datePickerPositionTs = datePickerPositionSrc;
 }

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/date-picker/examples/date-picker-position-example.component.ts

@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+
+@Component({
+    selector: 'fd-date-picker-position-example',
+    template: ` <fd-date-picker [placement]="'top-end'" [(ngModel)]="selectedDay"></fd-date-picker>
+                <br/>
+                <div>Selected Date: {{selectedDay.date ? selectedDay.date.toDateString() : 'null'}}</div>`
+})
+export class DatePickerPositionExampleComponent {
+
+    selectedDay = {
+        date: new Date()
+    };
+
+}

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'}}

docs/app/documentation/documentation.module.ts

@@ -322,11 +322,10 @@ import { DatetimePickerAllowNullExampleComponent } from './component-docs/dateti
 import { DatePickerAllowNullExampleComponent } from './component-docs/date-picker/examples/date-picker-allow-null-example.component';
 import { TimeFormExampleComponent } from './component-docs/time/examples/time-form-example.component';
 import { TableResponsiveExampleComponent } from './component-docs/table/examples/table-responsive-example.component';
+import { DatePickerPositionExampleComponent } from './component-docs/date-picker/examples/date-picker-position-example.component';
 import { TimePickerOtherDelimiterExampleComponent } from './component-docs/time-picker/examples/time-picker-other-delimiter-example.component';
 import { DatetimeFormatExampleComponent } from './component-docs/datetime-picker/examples/datetime-format-example/datetime-format-example.component';
 
-
-
 export function highlightJsFactory() {
     return hljs;
 }
@@ -591,6 +590,7 @@ export function highlightJsFactory() {
         AddingTabExampleComponent,
         CalendarI18nExampleComponent,
         DatePickerI18nExampleComponent,
+        DatePickerPositionExampleComponent,
         DatePickerFormatExampleComponent,
         SearchPipe
     ],

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';
 import { DateTimeFormatParser } from './format/datetime-parser';
 
 /**
@@ -53,6 +54,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;