fix(material/datepicker): avoid re-rendering mat-calendar when minDate or maxDate is at a different time on the same day

Avoid re-rendering <mat-calendar/>  when it receives a new value for
either the [minDate] or [maxDate] Input, and the value is at a different time on the same day.

Make two code changes to `MatCalendar` to accomplish this behavior change.
 - Normalize `_minDate` and `_maxDate` to midnight of the given day
 - Add check in `ngOnChanges` to re-render only if the current minDate
   is not equal to the previous minDate.

Fixes #24435

Author: zarend

src/material/datepicker/calendar.spec.ts

@@ -425,6 +425,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();
@@ -473,6 +483,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

@@ -21,6 +21,7 @@ import {
   OnDestroy,
   Optional,
   Output,
+  SimpleChange,
   SimpleChanges,
   ViewChild,
   ViewEncapsulation,
@@ -255,19 +256,43 @@ export class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDes
     return this._minDate;
   }
   set minDate(value: D | null) {
-    this._minDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
+    this._oldMinDate = this._minDate;
+
+    const validated = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
+    if (validated === null) {
+      this._minDate = null;
+    } else {
+      this._minDate = this._dateAdapter.createDate(
+        this._dateAdapter.getYear(validated),
+        this._dateAdapter.getMonth(validated),
+        this._dateAdapter.getDate(validated),
+      );
+    }
   }
   private _minDate: D | null;
+  private _oldMinDate: D | null;
 
   /** The maximum selectable date. */
   @Input()
   get maxDate(): D | null {
     return this._maxDate;
   }
   set maxDate(value: D | null) {
-    this._maxDate = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
+    this._oldMaxDate = this._maxDate;
+
+    const validated = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(value));
+    if (validated === null) {
+      this._maxDate = null;
+    } else {
+      this._maxDate = this._dateAdapter.createDate(
+        this._dateAdapter.getYear(validated),
+        this._dateAdapter.getMonth(validated),
+        this._dateAdapter.getDate(validated),
+      );
+    }
   }
   private _maxDate: D | null;
+  private _oldMaxDate: D | null;
 
   /** Function used to filter which dates are selectable. */
   @Input() dateFilter: (date: D) => boolean;
@@ -393,7 +418,19 @@ export class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDes
   }
 
   ngOnChanges(changes: SimpleChanges) {
-    const change = changes['minDate'] || changes['maxDate'] || changes['dateFilter'];
+    const minDateChange: SimpleChange | undefined = !this._dateAdapter.sameDate(
+      this._minDate,
+      this._oldMinDate,
+    )
+      ? changes['minDate']
+      : undefined;
+    const maxDateChange: SimpleChange | undefined = !this._dateAdapter.sameDate(
+      this._maxDate,
+      this._oldMaxDate,
+    )
+      ? changes['maxDate']
+      : undefined;
+    const change = minDateChange || maxDateChange || changes['dateFilter'];
 
     if (change && !change.firstChange) {
       const view = this._getCurrentViewComponent();