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

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,7 @@ 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 == 0 && date.getMonth() % 2 == 1 && date.getDate() % 2 == 0;
 
   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();
+
+      let multiYearViewDebugElement = fixture.debugElement.query(By.directive(MatMultiYearView));
+      multiYearViewNativeElement = multiYearViewDebugElement.nativeElement;
+      testComponent = fixture.componentInstance;
+    });
+
+    it('should disable years with no enabled days', () => {
+      let 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,16 @@ 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) {
+    if (date.getFullYear() == 2017) {
+      return false;
+    }
+    return true;
+  }
+}

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

@@ -17,9 +17,9 @@ import {
   Output,
   ViewEncapsulation
 } from '@angular/core';
-import {DateAdapter} from '@angular/material/core';
-import {MatCalendarCell} from './calendar-body';
-import {createMissingDateImplError} from './datepicker-errors';
+import { DateAdapter } from '@angular/material/core';
+import { MatCalendarCell } from './calendar-body';
+import { createMissingDateImplError } from './datepicker-errors';
 
 
 export const yearsPerPage = 24;
@@ -47,9 +47,9 @@ export class MatMultiYearView<D> implements AfterContentInit {
   set activeDate(value: D) {
     let oldActiveDate = this._activeDate;
     this._activeDate =
-        this._getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today();
+      this._getValidDateOrNull(this._dateAdapter.deserialize(value)) || this._dateAdapter.today();
     if (Math.floor(this._dateAdapter.getYear(oldActiveDate) / yearsPerPage) !=
-        Math.floor(this._dateAdapter.getYear(this._activeDate) / yearsPerPage)) {
+      Math.floor(this._dateAdapter.getYear(this._activeDate) / yearsPerPage)) {
       this._init();
     }
   }
@@ -79,8 +79,8 @@ export class MatMultiYearView<D> implements AfterContentInit {
   /** The year of the selected date. Null if the selected date is null. */
   _selectedYear: number | null;
 
-  constructor(@Optional() public _dateAdapter: DateAdapter<D>,
-              private _changeDetectorRef: ChangeDetectorRef) {
+  constructor( @Optional() public _dateAdapter: DateAdapter<D>,
+    private _changeDetectorRef: ChangeDetectorRef) {
     if (!this._dateAdapter) {
       throw createMissingDateImplError('DateAdapter');
     }
@@ -112,9 +112,9 @@ export class MatMultiYearView<D> implements AfterContentInit {
   _yearSelected(year: number) {
     let month = this._dateAdapter.getMonth(this.activeDate);
     let daysInMonth =
-        this._dateAdapter.getNumDaysInMonth(this._dateAdapter.createDate(year, month, 1));
+      this._dateAdapter.getNumDaysInMonth(this._dateAdapter.createDate(year, month, 1));
     this.selectedChange.emit(this._dateAdapter.createDate(year, month,
-        Math.min(this._dateAdapter.getDate(this.activeDate), daysInMonth)));
+      Math.min(this._dateAdapter.getDate(this.activeDate), daysInMonth)));
   }
 
   _getActiveCell(): number {
@@ -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;
+    }
+
+    let 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

@@ -102,7 +102,7 @@ describe('MatYearView', () => {
       testComponent = fixture.componentInstance;
     });
 
-    it('should disabled months with no enabled days', () => {
+    it('should disable months with no enabled days', () => {
       let 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');