feat(attribut): add new attributs:

- opens:  ability to position calendar to left, right or center #21
-drops: ability to position calendar to up or down

demo/src/app/full/full.component.html

@@ -19,6 +19,8 @@
           [maxDate]="maxDate"
           [showWeekNumbers]="options.showWeekNumbers"
           [showISOWeekNumbers]="options.showISOWeekNumbers"
+          [opens]="opens"
+          [drops]="drops"
           name="daterange"/>
     </div>
     <div class="col s6">
@@ -46,6 +48,25 @@ <h4>Options:</h4>
               {{locale | json}}
             </div>
           </div>
+          <div class="row">
+            <div class="col s6">
+              <mat-form-field>
+                <mat-select [(ngModel)]="opens" placeholder="Position">
+                  <mat-option value="left">Left</mat-option>
+                  <mat-option value="center">Center</mat-option>
+                  <mat-option value="right">Right</mat-option>
+                </mat-select>
+              </mat-form-field>
+            </div>
+            <div class="col s6">
+              <mat-form-field>
+                <mat-select [(ngModel)]="drops" placeholder="Drops">
+                  <mat-option value="down">Down</mat-option>
+                  <mat-option value="up">Up</mat-option>
+                </mat-select>
+              </mat-form-field>
+            </div>
+          </div>
         </div>
     </div>
   </div>

demo/src/app/full/full.component.ts

@@ -26,11 +26,16 @@ export class FullComponent implements OnInit {
     cancelLabel: 'Cancel',
     applyLabel: 'Okay'
   }
+  opens: string;
+  drops: string;
   click() {
   }
   selected = {start: moment().subtract(3, 'days'), end: moment().add(3, 'days') };
   @ViewChild(DaterangepickerDirective) daterangepicker: DaterangepickerDirective;
-  constructor() { }
+  constructor() {
+    this.opens = 'left';
+    this.drops = 'down';
+  }
   ngOnInit() {
   }
 }

src/daterangepicker/daterangepicker.component.html

@@ -1,4 +1,4 @@
-<div class="md-drppicker"
+<div class="md-drppicker" #pickerContainer
 [ngClass]="{
     ltr: locale.direction === 'ltr',
     rtl: this.locale.direction === 'rtl',
@@ -16,7 +16,7 @@
                     [ngClass]="{'active': range === chosenRange}">{{range}}</button>
           </li>
         </ul>
-    </div>
+    </div>  
     <div class="calendar" [ngClass]="{right: singleDatePicker, left: !singleDatePicker}"
         *ngIf="showCalInRanges">
         <div class="calendar-table">

src/daterangepicker/daterangepicker.component.ts

@@ -1,4 +1,6 @@
-import { Component, OnInit, ElementRef, HostListener, EventEmitter, Output} from '@angular/core';
+import { 
+    Component, OnInit, ElementRef, ViewChild, EventEmitter, Output
+} from '@angular/core';
 import { FormControl} from '@angular/forms';
 
 import * as _moment from 'moment'; const moment = _moment;
@@ -64,11 +66,12 @@ export class DaterangepickerComponent implements OnInit {
     showCalInRanges: Boolean = false;
 
     options: any = {} ; // should get some opt from user
-    @Output('choosedDate') choosedDate:EventEmitter<Object>;
-    @Output('rangeClicked') rangeClicked:EventEmitter<Object>;
+    @Output('choosedDate') choosedDate: EventEmitter<Object>;
+    @Output('rangeClicked') rangeClicked: EventEmitter<Object>;
+    @ViewChild('pickerContainer') pickerContainer: ElementRef;
 
     constructor(
-        private el: ElementRef
+        private el: ElementRef,
     ) {
         this.choosedDate = new EventEmitter();
         this.rangeClicked = new EventEmitter();
@@ -501,7 +504,6 @@ export class DaterangepickerComponent implements OnInit {
     }
 
     clickApply(e?) {
-        console.log('this.chosenLabel', this.chosenLabel)
         if (this.chosenLabel) {
             this.choosedDate.emit({chosenLabel: this.chosenLabel, startDate: this.startDate, endDate: this.endDate});
         }

src/daterangepicker/daterangepicker.directive.ts

@@ -14,7 +14,8 @@ import {
   KeyValueDiffer,
   KeyValueDiffers,
   Output,
-  EventEmitter
+  EventEmitter,
+  Renderer2
 } from '@angular/core';
 import { DaterangepickerComponent } from './daterangepicker.component';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
@@ -43,19 +44,6 @@ export class DaterangepickerDirective implements OnInit, OnChanges, DoCheck {
   private _validatorChange = Function.prototype;
   private _value: any;
   private localeDiffer: KeyValueDiffer<string, any>;
-
-  constructor(
-    public viewContainerRef: ViewContainerRef,
-    public _changeDetectorRef: ChangeDetectorRef,
-    private _componentFactoryResolver: ComponentFactoryResolver,
-    private _el: ElementRef,
-    private differs: KeyValueDiffers
-  ) {
-    const componentFactory = this._componentFactoryResolver.resolveComponentFactory(DaterangepickerComponent);
-    viewContainerRef.clear();
-    const componentRef = viewContainerRef.createComponent(componentFactory);
-    this.picker = (<DaterangepickerComponent>componentRef.instance);
-  }
   @Input()
   minDate: _moment.Moment
   @Input()
@@ -84,6 +72,10 @@ export class DaterangepickerDirective implements OnInit, OnChanges, DoCheck {
   showClearButton: boolean;
   @Input()
   ranges: any;
+  @Input()
+  opens: string;
+  @Input()
+  drops: string;
   _locale: any = {};
   @Input() set locale(value) {
     if (value !== null) {
@@ -110,7 +102,6 @@ export class DaterangepickerDirective implements OnInit, OnChanges, DoCheck {
       this._endKey = 'endDate';
     }
   };
-
   notForChangesProperty: Array<string> = [
     'locale',
     'endKey',
@@ -127,6 +118,20 @@ export class DaterangepickerDirective implements OnInit, OnChanges, DoCheck {
   }
   @Output('change') onChange: EventEmitter<Object> = new EventEmitter(); 
   @Output('rangeClicked') rangeClicked: EventEmitter<Object> = new EventEmitter(); 
+
+  constructor(
+    public viewContainerRef: ViewContainerRef,
+    public _changeDetectorRef: ChangeDetectorRef,
+    private _componentFactoryResolver: ComponentFactoryResolver,
+    private _el: ElementRef,
+    private _renderer: Renderer2,
+    private differs: KeyValueDiffers
+  ) {
+    const componentFactory = this._componentFactoryResolver.resolveComponentFactory(DaterangepickerComponent);
+    viewContainerRef.clear();
+    const componentRef = viewContainerRef.createComponent(componentFactory);
+    this.picker = (<DaterangepickerComponent>componentRef.instance);
+  }
   ngOnInit() {
     this.picker.rangeClicked.asObservable().subscribe((range: any) => {
       this.rangeClicked.emit(range);
@@ -171,6 +176,7 @@ export class DaterangepickerDirective implements OnInit, OnChanges, DoCheck {
 
   onFocus(event: any) {
     this.picker.show(event);
+    this.setPosition();
   }
 
   hide() {
@@ -202,7 +208,47 @@ export class DaterangepickerDirective implements OnInit, OnChanges, DoCheck {
     } else {
       //
     }
-  }  
+  }
+    /**
+     * Set position of the calendar
+     */
+    setPosition() {
+      let style;
+      let containerTop;
+      const container = this.picker.pickerContainer.nativeElement;
+      const element = this._el.nativeElement;
+      if (this.drops && this.drops == 'up') {
+        containerTop = (element.offsetTop - container.clientHeight) + 'px';
+      } else {
+        containerTop = 'auto';
+      }
+      if (this.opens == 'left') {
+        style = {
+            top: containerTop,
+            left: (element.offsetLeft - container.clientWidth + element.clientWidth) + 'px',
+            right: 'auto'
+        };
+      } else if (this.opens == 'center') {
+          style = {
+            top: containerTop,
+            left: (element.offsetLeft  +  element.clientWidth / 2
+                    - container.clientWidth / 2) + 'px',
+            right: 'auto'
+          };
+      } else {
+          style = {
+            top: containerTop,
+            left: element.offsetLeft  + 'px',
+            right: 'auto'
+          }
+      }
+      if (style) {
+        this._renderer.setStyle(container, 'top', style.top);
+        this._renderer.setStyle(container, 'left', style.left);
+        this._renderer.setStyle(container, 'right', style.right);
+      }
+
+  }
   /**
    * For click outside of the calendar's container
    * @param event event object