fix(datepicker): year not formatted in multi-year view button

Fixes the years that are rendered in the calendar's perioud button not being formatted through the date adapter in the multi-view. This can result in an incorrect value being displayed in some locales.

Fixes #17187.

Author: crisbeto

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

@@ -1,7 +1,7 @@
 import {Directionality} from '@angular/cdk/bidi';
 import {Component} from '@angular/core';
 import {async, ComponentFixture, TestBed} from '@angular/core/testing';
-import {MatNativeDateModule} from '@angular/material/core';
+import {MatNativeDateModule, DateAdapter} from '@angular/material/core';
 import {DEC, FEB, JAN} from '@angular/material/testing';
 import {By} from '@angular/platform-browser';
 import {MatCalendar} from './calendar';
@@ -149,6 +149,18 @@ describe('MatCalendarHeader', () => {
       expect(calendarInstance.activeDate).toEqual(new Date(2016, DEC, 31));
       expect(testComponent.selected).toBeFalsy('no date should be selected yet');
     });
+
+    it('should format the year in the period button using the date adapter', () => {
+      const adapter = fixture.debugElement.injector.get(DateAdapter);
+
+      spyOn(adapter, 'getYearName').and.returnValue('FAKE_YEAR');
+
+      periodButton.click();
+      fixture.detectChanges();
+
+      expect(calendarInstance.currentView).toBe('multi-year');
+      expect(periodButton.textContent).toContain('FAKE_YEAR');
+    });
   });
 
   describe('calendar with minDate only', () => {

src/material/datepicker/calendar.ts

@@ -82,7 +82,11 @@ export class MatCalendarHeader<D> {
     const minYearOfPage = activeYear - getActiveOffset(
       this._dateAdapter, this.calendar.activeDate, this.calendar.minDate, this.calendar.maxDate);
     const maxYearOfPage = minYearOfPage + yearsPerPage - 1;
-    return `${minYearOfPage} \u2013 ${maxYearOfPage}`;
+    const minYearName =
+      this._dateAdapter.getYearName(this._dateAdapter.createDate(minYearOfPage, 0, 1));
+    const maxYearName =
+      this._dateAdapter.getYearName(this._dateAdapter.createDate(maxYearOfPage, 0, 1));
+    return `${minYearName} \u2013 ${maxYearName}`;
   }
 
   get periodButtonLabel(): string {