feat(inline): inline daterangepicker #31

fetrarij · Jul 27, 2018 · eb574be · eb574be
1 parent 28fdb7d
commit eb574be
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 11 deletions.
diff --git a/demo/src/app/simple/simple.component.html b/demo/src/app/simple/simple.component.html
@@ -22,3 +22,19 @@
     </pre>
   </div>
 </div>
+<hr/>
+<div class="row">
+  <div class="col s12">
+      <h1>Inline daterangepicker</h1>
+  </div>
+</div>
+<div class="row">
+  <div class="col s12">
+    <ngx-daterangepicker-material (choosedDate)="choosedDate($event)"></ngx-daterangepicker-material>
+  </div>
+</div>
+<div class="row">
+  <div class="col s12">
+      Choosed date: {{inlineDate | json}}
+  </div>
+</div>
diff --git a/demo/src/app/simple/simple.component.ts b/demo/src/app/simple/simple.component.ts
@@ -10,6 +10,7 @@ import { DaterangepickerComponent, DaterangepickerDirective } from '../../../../
 export class SimpleComponent implements OnInit {
   selected: {startDate: moment.Moment, endDate: moment.Moment};
   @ViewChild(DaterangepickerDirective) pickerDirective: DaterangepickerDirective;
+  inlineDate: any;
   picker: DaterangepickerComponent;
   constructor() {
     this.selected = {
@@ -27,4 +28,7 @@ export class SimpleComponent implements OnInit {
   change(e) {
     console.log(e)
   }
+  choosedDate(e) {
+     this.inlineDate = e;
+  }
 }
diff --git a/src/daterangepicker/daterangepicker.component.html b/src/daterangepicker/daterangepicker.component.html
@@ -2,8 +2,9 @@
 [ngClass]="{
     ltr: locale.direction === 'ltr',
     rtl: this.locale.direction === 'rtl',
-    'shown': isShown,
-    'hidden': !isShown,
+    'shown': isShown || inline,
+    'hidden': !isShown && !inline,
+    'inline': inline,
     'double': !singleDatePicker && showCalInRanges,
     'show-ranges': rangesArray.length
 }">

diff --git a/src/daterangepicker/daterangepicker.component.scss b/src/daterangepicker/daterangepicker.component.scss
@@ -81,6 +81,10 @@ $input-height: 3rem !default;
   &.double {
     width: $md-drppicker-width-double;
   }
+  &.inline {
+    position: relative;
+    display: inline-block;
+  }
 
   &:before, &:after {
     position: absolute;

diff --git a/src/daterangepicker/daterangepicker.component.ts b/src/daterangepicker/daterangepicker.component.ts
@@ -1,5 +1,5 @@
 import { 
-    Component, OnInit, ElementRef, ViewChild, EventEmitter, Output
+    Component, OnInit, ElementRef, ViewChild, EventEmitter, Output, Input
 } from '@angular/core';
 import { FormControl} from '@angular/forms';
 
@@ -11,7 +11,7 @@ export enum SideEnum {
 }
 
 @Component({
- selector: 'ngx-daterangepicker-md',
+ selector: 'ngx-daterangepicker-material',
  styleUrls: ['./daterangepicker.component.scss'],
  templateUrl: './daterangepicker.component.html',
  host: {
@@ -26,25 +26,45 @@ export class DaterangepickerComponent implements OnInit {
     applyBtn: {disabled: boolean} = {disabled: false};
     startDate = moment().startOf('day');
     endDate = moment().endOf('day');
+    dateLimit = null;
+
+    @Input()
     minDate: _moment.Moment = null;
+    @Input()
     maxDate: _moment.Moment = null;
-    dateLimit = null;
+    @Input()
     autoApply: Boolean = false;
+    @Input()
     singleDatePicker: Boolean = false;
+    @Input()
     showDropdowns: Boolean = false;
+    @Input()
     showWeekNumbers: Boolean = false;
+    @Input()
     showISOWeekNumbers : Boolean= false;
+    @Input()
     linkedCalendars: Boolean = false;
+    @Input()
     autoUpdateInput: Boolean = true;
+    @Input()
     alwaysShowCalendars: Boolean = false;
+    @Input()
     maxSpan: Boolean = false;
+    @Input()
     timePicker: Boolean = false;
+    @Input()
     showClearButton: Boolean = false;
+    @Input()
     firstMonthDayClass: string = null;
+    @Input()
     lastMonthDayClass: string = null;
+    @Input()
     emptyWeekRowClass: string = null;
+    @Input()
     firstDayOfNextMonthClass: string = null;
+    @Input()
     lastDayOfPreviousMonthClass: string = null;
+    @Input()
     locale: any = {
         direction: 'ltr',
         format: moment.localeData().longDateFormat('L'),
@@ -57,17 +77,19 @@ export class DaterangepickerComponent implements OnInit {
         monthNames: moment.monthsShort(),
         firstDay: moment.localeData().firstDayOfWeek()
     };
+    // custom ranges
+    @Input()
+    ranges: any = {};
+    @Input()
+    showCustomRangeLabel: boolean;
+    chosenRange: string;
+    rangesArray: Array<any> = [];
 
     // some state information
     isShown: Boolean = false;
+    inline: boolean = true;
     leftCalendar: any = {};
     rightCalendar: any = {};
-    // custom ranges
-    ranges: any = {};
-    chosenRange: string;
-    showCustomRangeLabel: boolean;
-    rangesArray: Array<any> = [];
-    // states
     showCalInRanges: Boolean = false;
 
     options: any = {} ; // should get some opt from user

diff --git a/src/daterangepicker/daterangepicker.directive.ts b/src/daterangepicker/daterangepicker.directive.ts
@@ -141,6 +141,7 @@ export class DaterangepickerDirective implements OnInit, OnChanges, DoCheck {
     viewContainerRef.clear();
     const componentRef = viewContainerRef.createComponent(componentFactory);
     this.picker = (<DaterangepickerComponent>componentRef.instance);
+    this.picker.inline = false; // set inline to false for all directive usage
   }
   ngOnInit() {
     this.picker.rangeClicked.asObservable().subscribe((range: any) => {