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

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.

(cherry picked from commit ae28fce)

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 this._intl.formatYearRange(minYearName, maxYearName);
   }
 
   get periodButtonLabel(): string {

src/material/datepicker/datepicker-intl.ts

@@ -48,4 +48,9 @@ export class MatDatepickerIntl {
 
   /** A label for the 'switch to year view' button (used by screen readers). */
   switchToMultiYearViewLabel: string = 'Choose month and year';
+
+  /** Formats a range of years. */
+  formatYearRange(start: string, end: string): string {
+    return `${start} \u2013 ${end}`;
+  }
 }

tools/public_api_guard/material/datepicker.d.ts

@@ -199,6 +199,7 @@ export declare class MatDatepickerIntl {
     prevYearLabel: string;
     switchToMonthViewLabel: string;
     switchToMultiYearViewLabel: string;
+    formatYearRange(start: string, end: string): string;
 }
 
 export declare class MatDatepickerModule {