feat(range): add event on click to range so we can get the label and …

…the dates of the clicked range

#20

README.md

@@ -130,4 +130,10 @@ ranges: any = {
   }
 ```
 
+## Available events
+
+### \(rangeClicked)
+
+ >Fired when clicked on range, and send an object with range label and dates value, eg:  `{label: 'This Month', dates: [Moment, Moment]}`
+
 ## [License](https://github.com/fetrarij/ngx-daterangepicker-material/blob/master/LICENSE)

demo/src/app/custom-ranges/custom-ranges.component.html

@@ -12,6 +12,7 @@
     [maxDate]="maxDate"
     [minDate]="minDate"
     [linkedCalendars]="true"
+    (rangeClicked)="rangeClicked($event)"
     class="form-control"
     placeholder="Select please..."/>
   </div>

demo/src/app/custom-ranges/custom-ranges.component.ts

@@ -31,6 +31,9 @@ export class CustomRangesComponent implements OnInit {
     this.minDate = moment().subtract(3, 'days');
     this.alwaysShowCalendars = true;
   }
+  rangeClicked(range) {
+    console.log('range is : ', range);
+  }
 
   ngOnInit() {}
 }

src/daterangepicker/daterangepicker.component.ts

@@ -65,11 +65,13 @@ export class DaterangepickerComponent implements OnInit {
 
     options: any = {} ; // should get some opt from user
     @Output('choosedDate') choosedDate:EventEmitter<Object>;
+    @Output('rangeClicked') rangeClicked:EventEmitter<Object>;
 
     constructor(
         private el: ElementRef
     ) {
         this.choosedDate = new EventEmitter();
+        this.rangeClicked = new EventEmitter();
         this.updateMonthsInView();
     }
 
@@ -652,6 +654,7 @@ export class DaterangepickerComponent implements OnInit {
             if (!this.alwaysShowCalendars) {
                 this.isShown  = false; // hide calendars
             }
+            this.rangeClicked.emit({label: label, dates: dates});
             this.clickApply();
         }
     };
@@ -695,7 +698,7 @@ export class DaterangepickerComponent implements OnInit {
      * @param e event
      */
     handleInternalClick(e) {
-        e.stopPropagation(  )
+        e.stopPropagation()
     }
     /**
      * update the locale options
@@ -723,7 +726,7 @@ export class DaterangepickerComponent implements OnInit {
      * fit into minDate and maxDate limitations.
      */
     disableRange(range) {
-      if(range === this.locale.customRangeLabel){
+      if (range === this.locale.customRangeLabel) {
         return false;
       }
       const rangeMarkers = this.ranges[range];
@@ -735,6 +738,6 @@ export class DaterangepickerComponent implements OnInit {
         return date.isAfter(this.maxDate)
       });
 
-      return(areBothBefore || areBothAfter);
+      return (areBothBefore || areBothAfter);
     }
 }

src/daterangepicker/daterangepicker.directive.ts

@@ -126,7 +126,11 @@ export class DaterangepickerDirective implements OnInit, OnChanges, DoCheck {
     this._changeDetectorRef.markForCheck();
   }
   @Output('change') onChange: EventEmitter<Object> = new EventEmitter(); 
+  @Output('rangeClicked') rangeClicked: EventEmitter<Object> = new EventEmitter(); 
   ngOnInit() {
+    this.picker.rangeClicked.asObservable().subscribe((range: any) => {
+      this.rangeClicked.emit(range);
+    });
     this.picker.choosedDate.asObservable().subscribe((change: any) => {
       if (change) {
         const value = {};