fix(animation-css): Calendar always opens from left top corner even t…

…hough [opens] is set to center or right Fix #41
fetrarij · Nov 23, 2018 · 9faa528 · 9faa528
1 parent 6b9f8d3
commit 9faa528
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 1 deletion.
diff --git a/src/daterangepicker/daterangepicker.component.html b/src/daterangepicker/daterangepicker.component.html
@@ -7,7 +7,7 @@
     'inline': inline,
     'double': !singleDatePicker && showCalInRanges,
     'show-ranges': rangesArray.length
-}">
+}" [class]="'drops-' + drops + '-' + opens">
     <div class="ranges">
         <ul>
           <li *ngFor="let range of rangesArray">

diff --git a/src/daterangepicker/daterangepicker.component.scss b/src/daterangepicker/daterangepicker.component.scss
@@ -129,6 +129,24 @@ $input-height: 3rem !default;
         -moz-user-select: none;
           -ms-user-select: none;
               user-select: none;
+    &.drops-up-left {
+      transform-origin: 100% 100%;
+    }
+    &.drops-up-right {
+      transform-origin: 0 100%;
+    }
+    &.drops-down-left {
+      transform-origin: 100% 0;
+    }
+    &.drops-down-right {
+      transform-origin: 0 0;
+    }
+    &.drops-down-center {
+      transform-origin: 50%% 0;
+    }
+    &.drops-up-center {
+      transform-origin: 50%% 100%;
+    }
     .calendar {
       display: block;
     }
@@ -143,6 +161,25 @@ $input-height: 3rem !default;
         -moz-user-select: none;
           -ms-user-select: none;
               user-select: none;
+    &.drops-up-left {
+      transform-origin: 100% 100%;
+    }
+    &.drops-up-right {
+      transform-origin: 0 100%;
+    }
+    &.drops-down-left {
+      transform-origin: 100% 0;
+    }
+    &.drops-down-right {
+      transform-origin: 0 0;
+    }
+    &.drops-down-center {
+      transform-origin: 50%% 0;
+    }
+    &.drops-up-center {
+      transform-origin: 50%% 100%;
+    }
+
     .calendar {
       display: none;
     }

diff --git a/src/daterangepicker/daterangepicker.component.ts b/src/daterangepicker/daterangepicker.component.ts
@@ -103,6 +103,8 @@ export class DaterangepickerComponent implements OnInit {
     showCalInRanges: Boolean = false;
 
     options: any = {} ; // should get some opt from user
+    @Input() drops: string;
+    @Input() opens: string;
     @Output('choosedDate') choosedDate: EventEmitter<Object>;
     @Output('rangeClicked') rangeClicked: EventEmitter<Object>;
     @Output('datesUpdated') datesUpdated: EventEmitter<Object>;

diff --git a/src/daterangepicker/daterangepicker.directive.ts b/src/daterangepicker/daterangepicker.directive.ts
@@ -141,6 +141,8 @@ export class DaterangepickerDirective implements OnInit, OnChanges, DoCheck {
     private _renderer: Renderer2,
     private differs: KeyValueDiffers
   ) {
+    this.drops = 'down';
+    this.opens = 'left';
     const componentFactory = this._componentFactoryResolver.resolveComponentFactory(DaterangepickerComponent);
     viewContainerRef.clear();
     const componentRef = viewContainerRef.createComponent(componentFactory);
@@ -171,6 +173,8 @@ export class DaterangepickerDirective implements OnInit, OnChanges, DoCheck {
     this.picker.emptyWeekRowClass = this.emptyWeekRowClass;
     this.picker.firstDayOfNextMonthClass = this.firstDayOfNextMonthClass;
     this.picker.lastDayOfPreviousMonthClass = this.lastDayOfPreviousMonthClass;
+    this.picker.drops = this.drops;
+    this.picker.opens = this.opens;
     this.localeDiffer = this.differs.find(this.locale).create();
   }