fix(material/datepicker): add i18n strings (#25024)

Add i18n strings for "Start Date" and "End Date". Add `formatYearRangeLabel` to format a year of
dates in a screen reader friendly way (e.g. "2019 to 2020"). The existing method, `formatYearRange`,
uses a dash character which does not read well on screen readers.

These three new strings are not used in this commit. They will be used in future commits as aria
labels and descriptions to fix accessibility bugs.

Author: zarend

src/material/datepicker/datepicker-intl.ts

@@ -19,40 +19,51 @@ export class MatDatepickerIntl {
   readonly changes: Subject<void> = new Subject<void>();
 
   /** A label for the calendar popup (used by screen readers). */
-  calendarLabel: string = 'Calendar';
+  calendarLabel = 'Calendar';
 
   /** A label for the button used to open the calendar popup (used by screen readers). */
-  openCalendarLabel: string = 'Open calendar';
+  openCalendarLabel = 'Open calendar';
 
   /** Label for the button used to close the calendar popup. */
-  closeCalendarLabel: string = 'Close calendar';
+  closeCalendarLabel = 'Close calendar';
 
   /** A label for the previous month button (used by screen readers). */
-  prevMonthLabel: string = 'Previous month';
+  prevMonthLabel = 'Previous month';
 
   /** A label for the next month button (used by screen readers). */
-  nextMonthLabel: string = 'Next month';
+  nextMonthLabel = 'Next month';
 
   /** A label for the previous year button (used by screen readers). */
-  prevYearLabel: string = 'Previous year';
+  prevYearLabel = 'Previous year';
 
   /** A label for the next year button (used by screen readers). */
-  nextYearLabel: string = 'Next year';
+  nextYearLabel = 'Next year';
 
   /** A label for the previous multi-year button (used by screen readers). */
-  prevMultiYearLabel: string = 'Previous 24 years';
+  prevMultiYearLabel = 'Previous 24 years';
 
   /** A label for the next multi-year button (used by screen readers). */
-  nextMultiYearLabel: string = 'Next 24 years';
+  nextMultiYearLabel = 'Next 24 years';
 
   /** A label for the 'switch to month view' button (used by screen readers). */
-  switchToMonthViewLabel: string = 'Choose date';
+  switchToMonthViewLabel = 'Choose date';
 
   /** A label for the 'switch to year view' button (used by screen readers). */
-  switchToMultiYearViewLabel: string = 'Choose month and year';
+  switchToMultiYearViewLabel = 'Choose month and year';
 
-  /** Formats a range of years. */
+  /** A label for the first date of a range of dates (used by screen readers). */
+  startDateLabel = 'Start date';
+
+  /** A label for the last date of a range of dates (used by screen readers). */
+  endDateLabel = 'End date';
+
+  /** Formats a range of years (used for visuals). */
   formatYearRange(start: string, end: string): string {
     return `${start} \u2013 ${end}`;
   }
+
+  /** Formats a label for a range of years (used by screen readers). */
+  formatYearRangeLabel(start: string, end: string): string {
+    return `${start} to ${end}`;
+  }
 }

tools/public_api_guard/material/datepicker.md

@@ -525,14 +525,17 @@ export class MatDatepickerIntl {
     calendarLabel: string;
     readonly changes: Subject<void>;
     closeCalendarLabel: string;
+    endDateLabel: string;
     formatYearRange(start: string, end: string): string;
+    formatYearRangeLabel(start: string, end: string): string;
     nextMonthLabel: string;
     nextMultiYearLabel: string;
     nextYearLabel: string;
     openCalendarLabel: string;
     prevMonthLabel: string;
     prevMultiYearLabel: string;
     prevYearLabel: string;
+    startDateLabel: string;
     switchToMonthViewLabel: string;
     switchToMultiYearViewLabel: string;
     // (undocumented)