Adds additional event in the lifecycle for more selection feedback an…

…d options

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)

src/daterangepicker/daterangepicker.component.ts

@@ -73,13 +73,15 @@ 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(
         private el: ElementRef,
     ) {
         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();
     }
 

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 = {};