diff --git a/projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.spec.ts b/projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.spec.ts
index 8ed430fca51..d2314f1daed 100644
--- a/projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.spec.ts
@@ -193,7 +193,7 @@ describe('IgxMonthPicker', () => {
         const yearBtn = dom.query(By.css('.igx-calendar-picker__date'));
 
         expect(currentMonth.nativeElement.textContent.trim()).toEqual('Apr');
-        expect(yearBtn.nativeElement.textContent.trim()).toMatch('2019');
+        expect(yearBtn.nativeElement.textContent.trim()).toMatch('2022');
     });
 
     it('should navigate to the previous/next year.', () => {
diff --git a/projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.ts b/projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.ts
index 2866a717d3e..fbcd50720fe 100644
--- a/projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.ts
+++ b/projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.ts
@@ -135,8 +135,8 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBase {
         this.yearAction = 'next';
         this.viewDate = this.calendarModel.timedelta(this.viewDate, 'year', 1);
 
-        this._onChangeCallback(this.viewDate);
-        this.onSelection.emit(this.viewDate);
+        this.selectDate(this.viewDate);
+        this.onSelection.emit(this.selectedDates);
     }
 
     /**
@@ -158,8 +158,8 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBase {
         this.yearAction = 'prev';
         this.viewDate = this.calendarModel.timedelta(this.viewDate, 'year', -1);
 
-        this._onChangeCallback(this.viewDate);
-        this.onSelection.emit(this.viewDate);
+        this.selectDate(this.viewDate);
+        this.onSelection.emit(this.selectedDates);
     }
 
     /**
@@ -181,8 +181,8 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBase {
         this.viewDate = new Date(event.getFullYear(), event.getMonth(), event.getDate());
         this.activeView = CalendarView.DEFAULT;
 
-        this._onChangeCallback(this.viewDate);
-        this.onSelection.emit(this.viewDate);
+        this.selectDate(event);
+        this.onSelection.emit(this.selectedDates);
 
         requestAnimationFrame(() => {
             this.yearsBtn.nativeElement.focus();
@@ -193,10 +193,8 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBase {
      * @hidden
      */
     public selectMonth(event: Date) {
-        this.viewDate = new Date(event.getFullYear(), event.getMonth(), event.getDate());
-        this._onChangeCallback(this.viewDate);
-
-        this.onSelection.emit(this.viewDate);
+        this.selectDate(event);
+        this.onSelection.emit(this.selectedDates);
     }
 
     /**
@@ -212,7 +210,7 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBase {
 
         // TO DO: to be refactored after discussion on the desired behavior
         super.selectDate(value);
-        this.viewDate.setMonth(value.getMonth());
+        this.viewDate = value;
     }
 
     /**
@@ -222,7 +220,7 @@ export class IgxMonthPickerComponent extends IgxMonthPickerBase {
 
         // TO DO: to be refactored after discussion on the desired behavior
         if (value) {
-            this.viewDate.setMonth(value.getMonth());
+            this.viewDate = this.selectedDates = value;
         }
     }