diff --git a/src/demo-app/datepicker/datepicker-demo.html b/src/demo-app/datepicker/datepicker-demo.html
index b9c6c7dba22..e858a111b14 100644
--- a/src/demo-app/datepicker/datepicker-demo.html
+++ b/src/demo-app/datepicker/datepicker-demo.html
@@ -1,7 +1,7 @@
Options
Use touch UI
- Filter odd months and dates
+ Filter odd years, months and dates
Start in year view
Disable datepicker
Disable input
diff --git a/src/demo-app/datepicker/datepicker-demo.ts b/src/demo-app/datepicker/datepicker-demo.ts
index c97074be3f0..8bdcc6f821d 100644
--- a/src/demo-app/datepicker/datepicker-demo.ts
+++ b/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) => this.lastDateInput = e.value;
onDateChange = (e: MatDatepickerInputEvent) => this.lastDateChange = e.value;
diff --git a/src/lib/datepicker/multi-year-view.spec.ts b/src/lib/datepicker/multi-year-view.spec.ts
index 4f7f0897ac6..1bca6d81042 100644
--- a/src/lib/datepicker/multi-year-view.spec.ts
+++ b/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;
+ 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;
}
+
+@Component({
+ template: `
+
+ `
+})
+class MultiYearViewWithDateFilter {
+ activeDate = new Date(2017, JAN, 1);
+ dateFilter(date: Date) {
+ return date.getFullYear() !== 2017;
+ }
+}
diff --git a/src/lib/datepicker/multi-year-view.ts b/src/lib/datepicker/multi-year-view.ts
index 95888f027ba..178c9e8bdaf 100644
--- a/src/lib/datepicker/multi-year-view.ts
+++ b/src/lib/datepicker/multi-year-view.ts
@@ -124,7 +124,26 @@ export class MatMultiYearView 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;
}
/**
diff --git a/src/lib/datepicker/year-view.spec.ts b/src/lib/datepicker/year-view.spec.ts
index 4b44066a7a6..8937c713032 100644
--- a/src/lib/datepicker/year-view.spec.ts
+++ b/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');
});