fix(datepicker): gray out filtered years in multi-year view (#9563)

Author: julianobrasil

src/demo-app/datepicker/datepicker-demo.html

@@ -1,7 +1,7 @@
 <h2>Options</h2>
 <p>
   <mat-checkbox [(ngModel)]="touch">Use touch UI</mat-checkbox>
-  <mat-checkbox [(ngModel)]="filterOdd">Filter odd months and dates</mat-checkbox>
+  <mat-checkbox [(ngModel)]="filterOdd">Filter odd years, months and dates</mat-checkbox>
   <mat-checkbox [(ngModel)]="yearView">Start in year view</mat-checkbox>
   <mat-checkbox [(ngModel)]="datepickerDisabled">Disable datepicker</mat-checkbox>
   <mat-checkbox [(ngModel)]="inputDisabled">Disable input</mat-checkbox>

src/demo-app/datepicker/datepicker-demo.ts

@@ -31,7 +31,8 @@ export class DatepickerDemo {
   lastDateInput: Date | null;
   lastDateChange: Date | null;
 
-  dateFilter = (date: Date) => date.getMonth() % 2 == 1 && date.getDate() % 2 == 0;
+  dateFilter =
+      (date: Date) => !(date.getFullYear() % 2) && (date.getMonth() % 2) && !(date.getDate() % 2)
 
   onDateInput = (e: MatDatepickerInputEvent<Date>) => this.lastDateInput = e.value;
   onDateChange = (e: MatDatepickerInputEvent<Date>) => this.lastDateChange = e.value;

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

@@ -18,6 +18,7 @@ describe('MatMultiYearView', () => {
 
         // Test components.
         StandardMultiYearView,
+        MultiYearViewWithDateFilter,
       ],
     });
 
@@ -71,6 +72,27 @@ describe('MatMultiYearView', () => {
       expect(cellEls[1].classList).toContain('mat-calendar-body-active');
     });
   });
+
+  describe('multi year view with date filter', () => {
+    let fixture: ComponentFixture<MultiYearViewWithDateFilter>;
+    let testComponent: MultiYearViewWithDateFilter;
+    let multiYearViewNativeElement: Element;
+
+    beforeEach(() => {
+      fixture = TestBed.createComponent(MultiYearViewWithDateFilter);
+      fixture.detectChanges();
+
+      const multiYearViewDebugElement = fixture.debugElement.query(By.directive(MatMultiYearView));
+      multiYearViewNativeElement = multiYearViewDebugElement.nativeElement;
+      testComponent = fixture.componentInstance;
+    });
+
+    it('should disablex years with no enabled days', () => {
+      const cells = multiYearViewNativeElement.querySelectorAll('.mat-calendar-body-cell');
+      expect(cells[0].classList).not.toContain('mat-calendar-body-disabled');
+      expect(cells[1].classList).toContain('mat-calendar-body-disabled');
+    });
+  });
 });
 
 
@@ -84,3 +106,15 @@ class StandardMultiYearView {
 
   @ViewChild(MatYearView) yearView: MatYearView<Date>;
 }
+
+@Component({
+  template: `
+    <mat-multi-year-view [activeDate]="activeDate" [dateFilter]="dateFilter"></mat-multi-year-view>
+    `
+})
+class MultiYearViewWithDateFilter {
+  activeDate = new Date(2017, JAN, 1);
+  dateFilter(date: Date) {
+    return date.getFullYear() !== 2017;
+  }
+}

src/lib/datepicker/multi-year-view.ts

@@ -124,7 +124,26 @@ export class MatMultiYearView<D> implements AfterContentInit {
   /** Creates an MatCalendarCell for the given year. */
   private _createCellForYear(year: number) {
     let yearName = this._dateAdapter.getYearName(this._dateAdapter.createDate(year, 0, 1));
-    return new MatCalendarCell(year, yearName, yearName, true);
+    return new MatCalendarCell(year, yearName, yearName, this._isYearEnabled(year));
+  }
+
+  /** Whether the given year is enabled. */
+  private _isYearEnabled(year: number) {
+    if (!this.dateFilter) {
+      return true;
+    }
+
+    const firstOfYear = this._dateAdapter.createDate(year, 0, 1);
+
+    // If any date in the year is enabled count the year as enabled.
+    for (let date = firstOfYear; this._dateAdapter.getYear(date) == year;
+      date = this._dateAdapter.addCalendarDays(date, 1)) {
+      if (this.dateFilter(date)) {
+        return true;
+      }
+    }
+
+    return false;
   }
 
   /**

src/lib/datepicker/year-view.spec.ts

@@ -97,13 +97,13 @@ describe('MatYearView', () => {
       fixture = TestBed.createComponent(YearViewWithDateFilter);
       fixture.detectChanges();
 
-      let yearViewDebugElement = fixture.debugElement.query(By.directive(MatYearView));
+      const yearViewDebugElement = fixture.debugElement.query(By.directive(MatYearView));
       yearViewNativeElement = yearViewDebugElement.nativeElement;
       testComponent = fixture.componentInstance;
     });
 
-    it('should disabled months with no enabled days', () => {
-      let cells = yearViewNativeElement.querySelectorAll('.mat-calendar-body-cell');
+    it('should disable months with no enabled days', () => {
+      const cells = yearViewNativeElement.querySelectorAll('.mat-calendar-body-cell');
       expect(cells[0].classList).not.toContain('mat-calendar-body-disabled');
       expect(cells[1].classList).toContain('mat-calendar-body-disabled');
     });