From 28fdb7d6d075a2e2cb361b255334f5607a4bd840 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marko=20Vukosavljevic=CC=81?=
 <marko.vukosavljevic@infinum.hr>
Date: Thu, 26 Jul 2018 12:02:05 +0200
Subject: [PATCH] Adds additional event in the lifecycle for more selection
 feedback and options

---
 README.md                                        |  4 ++++
 src/daterangepicker/daterangepicker.component.ts | 11 +++++++++++
 src/daterangepicker/daterangepicker.directive.ts |  4 ++++
 3 files changed, 19 insertions(+)

diff --git a/README.md b/README.md
index 04017596..f98404b3 100644
--- a/README.md
+++ b/README.md
@@ -152,4 +152,8 @@ ranges: any = {
 
  >Fired when clicked on range, and send an object with range label and dates value, eg:  `{label: 'This Month', dates: [Moment, Moment]}`
 
+### \(datesUpdated)
+
+ >Fires when any date selection occurs, like when selecting days, ranges, or when applying or cancelling changes, and sends an object containing start and end dates, eg:  `{startDate: Moment, endDate: Moment}`
+
 ## [License](https://github.com/fetrarij/ngx-daterangepicker-material/blob/master/LICENSE)
\ No newline at end of file
diff --git a/src/daterangepicker/daterangepicker.component.ts b/src/daterangepicker/daterangepicker.component.ts
index 939b7b29..2bda17cd 100644
--- a/src/daterangepicker/daterangepicker.component.ts
+++ b/src/daterangepicker/daterangepicker.component.ts
@@ -73,6 +73,7 @@ export class DaterangepickerComponent implements OnInit {
     options: any = {} ; // should get some opt from user
     @Output('choosedDate') choosedDate: EventEmitter<Object>;
     @Output('rangeClicked') rangeClicked: EventEmitter<Object>;
+    @Output('datesUpdated') datesUpdated: EventEmitter<Object>;
     @ViewChild('pickerContainer') pickerContainer: ElementRef;
 
     constructor(
@@ -80,6 +81,7 @@ export class DaterangepickerComponent implements OnInit {
     ) {
         this.choosedDate = new EventEmitter();
         this.rangeClicked = new EventEmitter();
+        this.datesUpdated = new EventEmitter();
         this.updateMonthsInView();
     }
 
@@ -402,6 +404,8 @@ export class DaterangepickerComponent implements OnInit {
         }
 
         this.updateMonthsInView();
+        this.datesUpdated.emit({startDate: this.startDate, endDate: this.endDate});
+
     }
 
     setEndDate(endDate) {
@@ -433,6 +437,7 @@ export class DaterangepickerComponent implements OnInit {
             // this.updateElement();
         }
         this.updateMonthsInView();
+        this.datesUpdated.emit({startDate: this.startDate, endDate: this.endDate});
     }
 
     isInvalidDate(date) {
@@ -538,12 +543,15 @@ export class DaterangepickerComponent implements OnInit {
         if (this.chosenLabel) {
             this.choosedDate.emit({chosenLabel: this.chosenLabel, startDate: this.startDate, endDate: this.endDate});
         }
+
+        this.datesUpdated.emit({startDate: this.startDate, endDate: this.endDate});
         this.hide();
     }
 
     clickCancel(e) {
         this.startDate = this._old.start;
         this.endDate = this._old.end;
+        this.datesUpdated.emit({startDate: this.startDate, endDate: this.endDate});
         this.hide();
     }
     /**
@@ -712,6 +720,8 @@ export class DaterangepickerComponent implements OnInit {
                 this.isShown  = false; // hide calendars
             }
             this.rangeClicked.emit({label: label, dates: dates});
+            this.datesUpdated.emit({startDate: this.startDate, endDate: this.endDate});
+
             this.clickApply();
         }
     };
@@ -775,6 +785,7 @@ export class DaterangepickerComponent implements OnInit {
         this.startDate = moment().startOf('day');
         this.endDate = moment().endOf('day');
         this.choosedDate.emit({chosenLabel: '', startDate: null, endDate: null});
+        this.datesUpdated.emit({startDate: null, endDate: null});
         this.hide();
     }
 
diff --git a/src/daterangepicker/daterangepicker.directive.ts b/src/daterangepicker/daterangepicker.directive.ts
index e0919fb9..84194421 100644
--- a/src/daterangepicker/daterangepicker.directive.ts
+++ b/src/daterangepicker/daterangepicker.directive.ts
@@ -127,6 +127,7 @@ export class DaterangepickerDirective implements OnInit, OnChanges, DoCheck {
   }
   @Output('change') onChange: EventEmitter<Object> = new EventEmitter(); 
   @Output('rangeClicked') rangeClicked: EventEmitter<Object> = new EventEmitter(); 
+  @Output('datesUpdated') datesUpdated: EventEmitter<Object> = new EventEmitter(); 
   
   constructor(
     public viewContainerRef: ViewContainerRef,
@@ -145,6 +146,9 @@ export class DaterangepickerDirective implements OnInit, OnChanges, DoCheck {
     this.picker.rangeClicked.asObservable().subscribe((range: any) => {
       this.rangeClicked.emit(range);
     });
+    this.picker.datesUpdated.asObservable().subscribe((range: any) => {
+      this.datesUpdated.emit(range);
+    });
     this.picker.choosedDate.asObservable().subscribe((change: any) => {
       if (change) {
         const value = {};