feat(datepicker): align multi-year-view based on minDate and maxDate (#16018)

* feat(datepicker): align multi-year-view based on minDate and maxDate

If minDate is set (and maxDate not set), let first page begin with minYear.
If maxDate is set, let last page end with maxYear,
and disable year(s) < minYear (if any) in first page.

Fixes #10646

* add tests for feat(datepicker): align multi-year-view based on minDate and maxDate

* refactor feat(datepicker): align multi-year-view based on minDate and maxDate

* omit helper func from public api

* fixup, resolve conflict

refactor with private methods feat(datepicker): align multi-year-view based on minDate and maxDate

* share func feat(datepicker): align multi-year-view based on minDate and maxDate

* fix formatting nit

Author: jysoo

src/material/datepicker/calendar-header.spec.ts

@@ -19,6 +19,7 @@ describe('MatCalendarHeader', () => {
       declarations: [
         // Test components.
         StandardCalendar,
+        CalendarWithMinMaxDate,
       ],
       providers: [
         MatDatepickerIntl,
@@ -148,7 +149,174 @@ describe('MatCalendarHeader', () => {
       expect(calendarInstance.activeDate).toEqual(new Date(2016, DEC, 31));
       expect(testComponent.selected).toBeFalsy('no date should be selected yet');
     });
+  });
+
+  describe('calendar with minDate only', () => {
+    let fixture: ComponentFixture<CalendarWithMinMaxDate>;
+    let testComponent: CalendarWithMinMaxDate;
+    let calendarElement: HTMLElement;
+    let periodButton: HTMLButtonElement;
+    let prevButton: HTMLButtonElement;
+    let nextButton: HTMLButtonElement;
+    let calendarInstance: MatCalendar<Date>;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(CalendarWithMinMaxDate);
+      fixture.detectChanges();
+
+      let calendarDebugElement = fixture.debugElement.query(By.directive(MatCalendar));
+      calendarElement = calendarDebugElement.nativeElement;
+      periodButton =
+        calendarElement.querySelector('.mat-calendar-period-button') as HTMLButtonElement;
+      prevButton =
+        calendarElement.querySelector('.mat-calendar-previous-button') as HTMLButtonElement;
+      nextButton =
+        calendarElement.querySelector('.mat-calendar-next-button') as HTMLButtonElement;
+      calendarInstance = calendarDebugElement.componentInstance;
+      testComponent = fixture.componentInstance;
+    });
+
+    it('should start the first page with minDate', () => {
+      testComponent.minDate = new Date(2010, JAN, 1);
+      periodButton.click();
+      fixture.detectChanges();
+
+      expect(calendarInstance.currentView).toBe('multi-year');
+      expect(periodButton.innerText.trim()).toEqual('2010 \u2013 2033');
+    });
+
+
+    it('should disable the page before the one showing minDate', () => {
+      testComponent.minDate = new Date(2010, JAN, 1);
+      periodButton.click();
+      fixture.detectChanges();
+
+      expect(calendarInstance.currentView).toBe('multi-year');
+      expect(prevButton.disabled).toBe(true);
+    });
 
+    it('should enable the page after the one showing minDate', () => {
+      testComponent.minDate = new Date(2010, JAN, 1);
+      periodButton.click();
+      fixture.detectChanges();
+
+      expect(calendarInstance.currentView).toBe('multi-year');
+      expect(nextButton.disabled).toBe(false);
+    });
+  });
+
+  describe('calendar with maxDate only', () => {
+    let fixture: ComponentFixture<CalendarWithMinMaxDate>;
+    let testComponent: CalendarWithMinMaxDate;
+    let calendarElement: HTMLElement;
+    let periodButton: HTMLButtonElement;
+    let prevButton: HTMLButtonElement;
+    let nextButton: HTMLButtonElement;
+    let calendarInstance: MatCalendar<Date>;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(CalendarWithMinMaxDate);
+      fixture.detectChanges();
+
+      let calendarDebugElement = fixture.debugElement.query(By.directive(MatCalendar));
+      calendarElement = calendarDebugElement.nativeElement;
+      periodButton =
+        calendarElement.querySelector('.mat-calendar-period-button') as HTMLButtonElement;
+      prevButton =
+        calendarElement.querySelector('.mat-calendar-previous-button') as HTMLButtonElement;
+      nextButton =
+        calendarElement.querySelector('.mat-calendar-next-button') as HTMLButtonElement;
+      calendarInstance = calendarDebugElement.componentInstance;
+      testComponent = fixture.componentInstance;
+    });
+
+    it('should end the last page with maxDate', () => {
+      testComponent.maxDate = new Date(2020, JAN, 1);
+      periodButton.click();
+      fixture.detectChanges();
+
+      expect(calendarInstance.currentView).toBe('multi-year');
+      expect(periodButton.innerText.trim()).toEqual('1997 \u2013 2020');
+    });
+
+    it('should disable the page after the one showing maxDate', () => {
+      testComponent.maxDate = new Date(2020, JAN, 1);
+      periodButton.click();
+      fixture.detectChanges();
+
+      expect(calendarInstance.currentView).toBe('multi-year');
+      expect(nextButton.disabled).toBe(true);
+    });
+
+    it('should enable the page before the one showing maxDate', () => {
+      testComponent.maxDate = new Date(2020, JAN, 1);
+      periodButton.click();
+      fixture.detectChanges();
+
+      expect(calendarInstance.currentView).toBe('multi-year');
+      expect(prevButton.disabled).toBe(false);
+    });
+  });
+
+  describe('calendar with minDate and maxDate', () => {
+    let fixture: ComponentFixture<CalendarWithMinMaxDate>;
+    let testComponent: CalendarWithMinMaxDate;
+    let calendarElement: HTMLElement;
+    let periodButton: HTMLButtonElement;
+    let prevButton: HTMLButtonElement;
+    let nextButton: HTMLButtonElement;
+    let calendarInstance: MatCalendar<Date>;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(CalendarWithMinMaxDate);
+      fixture.detectChanges();
+
+      let calendarDebugElement = fixture.debugElement.query(By.directive(MatCalendar));
+      calendarElement = calendarDebugElement.nativeElement;
+      periodButton =
+        calendarElement.querySelector('.mat-calendar-period-button') as HTMLButtonElement;
+      prevButton =
+        calendarElement.querySelector('.mat-calendar-previous-button') as HTMLButtonElement;
+      nextButton =
+        calendarElement.querySelector('.mat-calendar-next-button') as HTMLButtonElement;
+      calendarInstance = calendarDebugElement.componentInstance;
+      testComponent = fixture.componentInstance;
+    });
+
+    it('should end the last page with maxDate', () => {
+      testComponent.minDate = new Date(1993, JAN, 1);
+      testComponent.maxDate = new Date(2020, JAN, 1);
+      periodButton.click();
+      fixture.detectChanges();
+
+      expect(calendarInstance.currentView).toBe('multi-year');
+      expect(periodButton.innerText.trim()).toEqual('1997 \u2013 2020');
+    });
+
+    it('should disable the page after the one showing maxDate', () => {
+      testComponent.minDate = new Date(1993, JAN, 1);
+      testComponent.maxDate = new Date(2020, JAN, 1);
+      periodButton.click();
+      fixture.detectChanges();
+
+      expect(calendarInstance.currentView).toBe('multi-year');
+      expect(nextButton.disabled).toBe(true);
+    });
+
+    it('should disable the page before the one showing minDate', () => {
+      testComponent.minDate = new Date(1993, JAN, 1);
+      testComponent.maxDate = new Date(2020, JAN, 1);
+      periodButton.click();
+      fixture.detectChanges();
+
+      expect(calendarInstance.currentView).toBe('multi-year');
+
+      prevButton.click();
+      fixture.detectChanges();
+
+      expect(calendarInstance.activeDate).toEqual(new Date(2018 - yearsPerPage, JAN, 1));
+      expect(prevButton.disabled).toBe(true);
+    });
   });
 });
 
@@ -167,3 +335,18 @@ class StandardCalendar {
   selectedMonth: Date;
   startDate = new Date(2017, JAN, 31);
 }
+
+@Component({
+  template: `
+    <mat-calendar
+      [startAt]="startAt"
+      [minDate]="minDate"
+      [maxDate]="maxDate">
+    </mat-calendar>
+  `
+})
+class CalendarWithMinMaxDate {
+  startAt = new Date(2018, JAN, 1);
+  minDate: Date | null;
+  maxDate: Date | null;
+}

src/material/datepicker/calendar.ts

@@ -27,12 +27,17 @@ import {
 } from '@angular/core';
 import {DateAdapter, MAT_DATE_FORMATS, MatDateFormats} from '@angular/material/core';
 import {Subject, Subscription} from 'rxjs';
+import {MatCalendarCellCssClasses} from './calendar-body';
 import {createMissingDateImplError} from './datepicker-errors';
 import {MatDatepickerIntl} from './datepicker-intl';
 import {MatMonthView} from './month-view';
-import {MatMultiYearView, yearsPerPage} from './multi-year-view';
+import {
+  getActiveOffset,
+  isSameMultiYearView,
+  MatMultiYearView,
+  yearsPerPage
+} from './multi-year-view';
 import {MatYearView} from './year-view';
-import {MatCalendarCellCssClasses} from './calendar-body';
 
 /**
  * Possible views for the calendar.
@@ -69,12 +74,15 @@ export class MatCalendarHeader<D> {
     if (this.calendar.currentView == 'year') {
       return this._dateAdapter.getYearName(this.calendar.activeDate);
     }
+
+    // The offset from the active year to the "slot" for the starting year is the
+    // *actual* first rendered year in the multi-year view, and the last year is
+    // just yearsPerPage - 1 away.
     const activeYear = this._dateAdapter.getYear(this.calendar.activeDate);
-    const firstYearInView = this._dateAdapter.getYearName(
-        this._dateAdapter.createDate(activeYear - activeYear % 24, 0, 1));
-    const lastYearInView = this._dateAdapter.getYearName(
-        this._dateAdapter.createDate(activeYear + yearsPerPage - 1 - activeYear % 24, 0, 1));
-    return `${firstYearInView} \u2013 ${lastYearInView}`;
+    const minYearOfPage = activeYear - getActiveOffset(
+      this._dateAdapter, this.calendar.activeDate, this.calendar.minDate, this.calendar.maxDate);
+    const maxYearOfPage = minYearOfPage + yearsPerPage - 1;
+    return `${minYearOfPage} \u2013 ${maxYearOfPage}`;
   }
 
   get periodButtonLabel(): string {
@@ -149,8 +157,8 @@ export class MatCalendarHeader<D> {
       return this._dateAdapter.getYear(date1) == this._dateAdapter.getYear(date2);
     }
     // Otherwise we are in 'multi-year' view.
-    return Math.floor(this._dateAdapter.getYear(date1) / yearsPerPage) ==
-        Math.floor(this._dateAdapter.getYear(date2) / yearsPerPage);
+    return isSameMultiYearView(
+      this._dateAdapter, date1, date2, this.calendar.minDate, this.calendar.maxDate);
   }
 }
 

src/material/datepicker/multi-year-view.spec.ts

@@ -33,6 +33,7 @@ describe('MatMultiYearView', () => {
         // Test components.
         StandardMultiYearView,
         MultiYearViewWithDateFilter,
+        MultiYearViewWithMinMaxDate,
       ],
       providers: [
         {provide: Directionality, useFactory: () => dir = {value: 'ltr'}}
@@ -247,8 +248,87 @@ describe('MatMultiYearView', () => {
       expect(cells[1].classList).toContain('mat-calendar-body-disabled');
     });
   });
-});
 
+  describe('multi year view with minDate only', () => {
+    let fixture: ComponentFixture<MultiYearViewWithMinMaxDate>;
+    let testComponent: MultiYearViewWithMinMaxDate;
+    let multiYearViewNativeElement: Element;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(MultiYearViewWithMinMaxDate);
+
+      const multiYearViewDebugElement = fixture.debugElement.query(By.directive(MatMultiYearView));
+      multiYearViewNativeElement = multiYearViewDebugElement.nativeElement;
+      testComponent = fixture.componentInstance;
+    });
+
+    it('should begin first page with minDate', () => {
+      testComponent.minDate = new Date(2014, JAN, 1);
+      testComponent.maxDate = null;
+      fixture.detectChanges();
+
+      const cells = multiYearViewNativeElement.querySelectorAll('.mat-calendar-body-cell');
+      expect((cells[0] as HTMLElement).innerText.trim()).toBe('2014');
+    });
+  });
+
+  describe('multi year view with maxDate only', () => {
+    let fixture: ComponentFixture<MultiYearViewWithMinMaxDate>;
+    let testComponent: MultiYearViewWithMinMaxDate;
+    let multiYearViewNativeElement: Element;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(MultiYearViewWithMinMaxDate);
+
+      const multiYearViewDebugElement = fixture.debugElement.query(By.directive(MatMultiYearView));
+      multiYearViewNativeElement = multiYearViewDebugElement.nativeElement;
+      testComponent = fixture.componentInstance;
+    });
+
+    it('should end last page with maxDate', () => {
+      testComponent.minDate = null;
+      testComponent.maxDate = new Date(2020, JAN, 1);
+      fixture.detectChanges();
+
+      const cells = multiYearViewNativeElement.querySelectorAll('.mat-calendar-body-cell');
+      expect((cells[cells.length - 1] as HTMLElement).innerText.trim()).toBe('2020');
+    });
+  });
+
+  describe('multi year view with minDate and maxDate', () => {
+    let fixture: ComponentFixture<MultiYearViewWithMinMaxDate>;
+    let testComponent: MultiYearViewWithMinMaxDate;
+    let multiYearViewNativeElement: Element;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(MultiYearViewWithMinMaxDate);
+
+      const multiYearViewDebugElement = fixture.debugElement.query(By.directive(MatMultiYearView));
+      multiYearViewNativeElement = multiYearViewDebugElement.nativeElement;
+      testComponent = fixture.componentInstance;
+    });
+
+    it('should end last page with maxDate', () => {
+      testComponent.minDate = new Date(2006, JAN, 1);
+      testComponent.maxDate = new Date (2020, JAN, 1);
+      fixture.detectChanges();
+
+      const cells = multiYearViewNativeElement.querySelectorAll('.mat-calendar-body-cell');
+      expect((cells[cells.length - 1] as HTMLElement).innerText.trim()).toBe('2020');
+    });
+
+    it('should disable dates before minDate', () => {
+      testComponent.minDate = new Date(2006, JAN, 1);
+      testComponent.maxDate = new Date (2020, JAN, 1);
+      fixture.detectChanges();
+
+      const cells = multiYearViewNativeElement.querySelectorAll('.mat-calendar-body-cell');
+      expect(cells[0].classList).toContain('mat-calendar-body-disabled');
+      expect(cells[8].classList).toContain('mat-calendar-body-disabled');
+      expect(cells[9].classList).not.toContain('mat-calendar-body-disabled');
+    });
+  });
+});
 
 @Component({
   template: `
@@ -265,7 +345,8 @@ class StandardMultiYearView {
 
 @Component({
   template: `
-    <mat-multi-year-view [activeDate]="activeDate" [dateFilter]="dateFilter"></mat-multi-year-view>
+    <mat-multi-year-view [(activeDate)]="activeDate" [dateFilter]="dateFilter">
+    </mat-multi-year-view>
     `
 })
 class MultiYearViewWithDateFilter {
@@ -274,3 +355,15 @@ class MultiYearViewWithDateFilter {
     return date.getFullYear() !== 2017;
   }
 }
+
+@Component({
+  template: `
+    <mat-multi-year-view [(activeDate)]="activeDate" [minDate]="minDate" [maxDate]="maxDate">
+    </mat-multi-year-view>
+    `
+})
+class MultiYearViewWithMinMaxDate {
+  activeDate = new Date(2019, JAN, 1);
+  minDate: Date | null;
+  maxDate: Date | null;
+}