fix(material/datepicker): avoid rerender when min/maxDate changes to different time on the same day

Avoid re-rendering <mat-calendar/> when the [minDate] or [maxDate]
Input change to a different time on the same day.

In `ngOnChanges`, do not call `init` if the previous and current value for
minDate/maxDate are on the same day. This makes #24384 a non-breaking
code change.

Fixes #24435

Author: zarend

src/material/datepicker/calendar.spec.ts

@@ -433,6 +433,16 @@ describe('MatCalendar', () => {
       expect(calendarInstance.monthView._init).toHaveBeenCalled();
     });
 
+    it('should not re-render the month view when the minDate changes to the same day at a different time', () => {
+      fixture.detectChanges();
+      spyOn(calendarInstance.monthView, '_init').and.callThrough();
+
+      testComponent.minDate = new Date(2016, JAN, 1, 0, 0, 0, 1);
+      fixture.detectChanges();
+
+      expect(calendarInstance.monthView._init).not.toHaveBeenCalled();
+    });
+
     it('should re-render the month view when the maxDate changes', () => {
       fixture.detectChanges();
       spyOn(calendarInstance.monthView, '_init').and.callThrough();
@@ -481,6 +491,25 @@ describe('MatCalendar', () => {
       expect(calendarInstance.yearView._init).toHaveBeenCalled();
     });
 
+    it('should not re-render the year view when the maxDate changes to the same day at a different time', () => {
+      fixture.detectChanges();
+      const periodButton = calendarElement.querySelector(
+        '.mat-calendar-period-button',
+      ) as HTMLElement;
+      periodButton.click();
+      fixture.detectChanges();
+
+      (calendarElement.querySelector('.mat-calendar-body-active') as HTMLElement).click();
+      fixture.detectChanges();
+
+      spyOn(calendarInstance.yearView, '_init').and.callThrough();
+
+      testComponent.maxDate = new Date(2018, JAN, 1, 0, 0, 1, 0);
+      fixture.detectChanges();
+
+      expect(calendarInstance.yearView._init).not.toHaveBeenCalled();
+    });
+
     it('should re-render the multi-year view when the minDate changes', () => {
       fixture.detectChanges();
       const periodButton = calendarElement.querySelector(

src/material/datepicker/calendar.ts

@@ -393,7 +393,27 @@ export class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDes
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    const change = changes['minDate'] || changes['maxDate'] || changes['dateFilter'];
+    let change = undefined;
+
+    for (let key in changes) {
+      switch (key) {
+        case 'minDate':
+        case 'maxDate':
+          // Ignore date changes that are at a different time on the same day. This fixes issues
+          // where the calendar re-renders when there's no meaning change to [minDate] or [maxDate]
+          // (#24435).
+          if (!this._dateAdapter.sameDate(changes[key].previousValue, changes[key].currentValue)) {
+            change = changes[key];
+          }
+          break;
+        case 'dateFilter':
+          change = changes[key];
+      }
+
+      if (change) {
+        break;
+      }
+    }
 
     if (change && !change.firstChange) {
       const view = this._getCurrentViewComponent();