feat(datepicker): added active date changed event (#1703)

* emit an event with the activeDate and datepickerMode when view is changed

* feat(calendar): activeDateChange output

src/datepicker/datepicker-inner.component.ts

@@ -48,16 +48,18 @@ export class DatePickerInnerComponent implements OnInit, OnChanges {
   @Input() public formatMonthTitle: string;
   @Input() public onlyCurrentMonth: boolean;
   @Input() public shortcutPropagation: boolean;
-  @Input() public customClass: {date: Date, mode: string, clazz: string}[];
+  @Input() public customClass: { date: Date, mode: string, clazz: string }[];
   @Input() public monthColLimit: number;
   @Input() public yearColLimit: number;
-  @Input() public dateDisabled: {date:Date, mode:string}[];
+  @Input() public dateDisabled: { date: Date, mode: string }[];
   @Input() public initDate: Date;
 
   @Output() public selectionDone: EventEmitter<Date> = new EventEmitter<Date>(undefined);
 
   @Output() public update: EventEmitter<Date> = new EventEmitter<Date>(false);
 
+  @Output() public activeDateChange: EventEmitter<Date> = new EventEmitter<Date>(undefined);
+
   public stepDay: any = {};
   public stepMonth: any = {};
   public stepYear: any = {};
@@ -119,7 +121,7 @@ export class DatePickerInnerComponent implements OnInit, OnChanges {
     }
   }
 
-  public compare(date1: Date, date2: Date): number|undefined {
+  public compare(date1: Date, date2: Date): number | undefined {
     if (date1 === undefined || date2 === undefined) {
       return undefined;
     }
@@ -250,6 +252,7 @@ export class DatePickerInnerComponent implements OnInit, OnChanges {
       this.activeDate = new Date(year, month, 1);
 
       this.refreshView();
+      this.activeDateChange.emit(this.activeDate);
     }
   }
 
@@ -270,15 +273,15 @@ export class DatePickerInnerComponent implements OnInit, OnChanges {
       return '';
     }
     // todo: build a hash of custom classes, it will work faster
-    const customClassObject: {date: Date, mode: string, clazz: string} = this.customClass
+    const customClassObject: { date: Date, mode: string, clazz: string } = this.customClass
       .find((customClass: any) => {
         return customClass.date.valueOf() === date.valueOf() &&
           customClass.mode === this.datepickerMode;
       }, this);
     return customClassObject === undefined ? '' : customClassObject.clazz;
   }
 
-    protected compareDateDisabled(date1Disabled: {date: Date, mode: string}, date2: Date): number {
+  protected compareDateDisabled(date1Disabled: { date: Date, mode: string }, date2: Date): number {
     if (date1Disabled === undefined || date2 === undefined) {
       return undefined;
     }
@@ -298,17 +301,17 @@ export class DatePickerInnerComponent implements OnInit, OnChanges {
     return undefined;
   }
 
-    protected isDisabled(date: Date): boolean {
+  protected isDisabled(date: Date): boolean {
     let isDateDisabled: boolean = false;
     if (this.dateDisabled) {
-      this.dateDisabled.forEach((disabledDate: {date: Date, mode: string}) => {
+      this.dateDisabled.forEach((disabledDate: { date: Date, mode: string }) => {
         if (this.compareDateDisabled(disabledDate, date) === 0) {
           isDateDisabled = true;
         }
       });
     }
 
     return (isDateDisabled || (this.minDate && this.compare(date, this.minDate) < 0) ||
-    (this.maxDate && this.compare(date, this.maxDate) > 0));
+      (this.maxDate && this.compare(date, this.maxDate) > 0));
   }
 }

src/datepicker/datepicker.component.ts

@@ -36,7 +36,8 @@ export const DATEPICKER_CONTROL_VALUE_ACCESSOR: any = {
                       [shortcutPropagation]="shortcutPropagation"
                       [monthColLimit]="monthColLimit"
                       [yearColLimit]="yearColLimit"
-                      (selectionDone)="onSelectionDone($event)">
+                      (selectionDone)="onSelectionDone($event)"
+                      (activeDateChange)="onActiveDateChange($event)">
       <daypicker tabindex="0"></daypicker>
       <monthpicker tabindex="0"></monthpicker>
       <yearpicker tabindex="0"></yearpicker>
@@ -85,9 +86,9 @@ export class DatePickerComponent implements ControlValueAccessor {
   /** number of years displayed in a single row of year picker */
   @Input() public yearColLimit: number;
   /** array of custom css classes to be applied to targeted dates */
-  @Input() public customClass: {date: Date, mode: string, clazz: string}[];
+  @Input() public customClass: { date: Date, mode: string, clazz: string }[];
   /** array of disabled dates */
-  @Input() public dateDisabled: {date: Date, mode: string}[];
+  @Input() public dateDisabled: { date: Date, mode: string }[];
 
   /** currently active date */
   @Input()
@@ -101,6 +102,9 @@ export class DatePickerComponent implements ControlValueAccessor {
 
   @Output() public selectionDone: EventEmitter<Date> = new EventEmitter<Date>(undefined);
 
+  /** callback to invoke when the activeDate is changed. */
+  @Output() public activeDateChange: EventEmitter<Date> = new EventEmitter<Date>(undefined);
+
   @ViewChild(DatePickerInnerComponent) public _datePicker: DatePickerInnerComponent;
 
   public onChange: any = Function.prototype;
@@ -128,6 +132,9 @@ export class DatePickerComponent implements ControlValueAccessor {
     this.selectionDone.emit(event);
   }
 
+  public onActiveDateChange(event: Date): void {
+    this.activeDateChange.emit(event);
+  }
   // todo: support null value
   public writeValue(value: any): void {
     if (this._datePicker.compare(value, this._activeDate) === 0) {