@@ -59,8 +59,6 @@ let uniqueId = 0;
59
59
changeDetection : ChangeDetectionStrategy . OnPush ,
60
60
} )
61
61
export class MatCalendarHeader < D > {
62
- _buttonDescriptionId = `mat-calendar-button-${ uniqueId ++ } ` ;
63
-
64
62
constructor (
65
63
private _intl : MatDatepickerIntl ,
66
64
@Inject ( forwardRef ( ( ) => MatCalendar ) ) public calendar : MatCalendar < D > ,
@@ -71,7 +69,7 @@ export class MatCalendarHeader<D> {
71
69
this . calendar . stateChanges . subscribe ( ( ) => changeDetectorRef . markForCheck ( ) ) ;
72
70
}
73
71
74
- /** The label for the current calendar view. */
72
+ /** The display text for the current calendar view. */
75
73
get periodButtonText ( ) : string {
76
74
if ( this . calendar . currentView == 'month' ) {
77
75
return this . _dateAdapter
@@ -82,28 +80,25 @@ export class MatCalendarHeader<D> {
82
80
return this . _dateAdapter . getYearName ( this . calendar . activeDate ) ;
83
81
}
84
82
85
- // The offset from the active year to the "slot" for the starting year is the
86
- // *actual* first rendered year in the multi-year view, and the last year is
87
- // just yearsPerPage - 1 away.
88
- const activeYear = this . _dateAdapter . getYear ( this . calendar . activeDate ) ;
89
- const minYearOfPage =
90
- activeYear -
91
- getActiveOffset (
92
- this . _dateAdapter ,
93
- this . calendar . activeDate ,
94
- this . calendar . minDate ,
95
- this . calendar . maxDate ,
96
- ) ;
97
- const maxYearOfPage = minYearOfPage + yearsPerPage - 1 ;
98
- const minYearName = this . _dateAdapter . getYearName (
99
- this . _dateAdapter . createDate ( minYearOfPage , 0 , 1 ) ,
100
- ) ;
101
- const maxYearName = this . _dateAdapter . getYearName (
102
- this . _dateAdapter . createDate ( maxYearOfPage , 0 , 1 ) ,
103
- ) ;
83
+ const [ minYearName , maxYearName ] = this . _getMinMaxYearNames ( ) ;
104
84
return this . _intl . formatYearRange ( minYearName , maxYearName ) ;
105
85
}
106
86
87
+ /* The aria desciprtion of the current calendar view. */
88
+ get periodButtonDescription ( ) : string {
89
+ if ( this . calendar . currentView == 'month' ) {
90
+ return this . _dateAdapter
91
+ . format ( this . calendar . activeDate , this . _dateFormats . display . monthYearLabel )
92
+ . toLocaleUpperCase ( ) ;
93
+ }
94
+ if ( this . calendar . currentView == 'year' ) {
95
+ return this . _dateAdapter . getYearName ( this . calendar . activeDate ) ;
96
+ }
97
+
98
+ const [ minYearName , maxYearName ] = this . _getMinMaxYearNames ( ) ;
99
+ return this . _intl . formatYearRangeLabel ( minYearName , maxYearName ) ;
100
+ }
101
+
107
102
get periodButtonLabel ( ) : string {
108
103
return this . calendar . currentView == 'month'
109
104
? this . _intl . switchToMultiYearViewLabel
@@ -192,6 +187,30 @@ export class MatCalendarHeader<D> {
192
187
this . calendar . maxDate ,
193
188
) ;
194
189
}
190
+
191
+ private _getMinMaxYearNames ( ) : [ string , string ] {
192
+ // The offset from the active year to the "slot" for the starting year is the
193
+ // *actual* first rendered year in the multi-year view, and the last year is
194
+ // just yearsPerPage - 1 away.
195
+ const activeYear = this . _dateAdapter . getYear ( this . calendar . activeDate ) ;
196
+ const minYearOfPage =
197
+ activeYear -
198
+ getActiveOffset (
199
+ this . _dateAdapter ,
200
+ this . calendar . activeDate ,
201
+ this . calendar . minDate ,
202
+ this . calendar . maxDate ,
203
+ ) ;
204
+ const maxYearOfPage = minYearOfPage + yearsPerPage - 1 ;
205
+ const minYearName = this . _dateAdapter . getYearName (
206
+ this . _dateAdapter . createDate ( minYearOfPage , 0 , 1 ) ,
207
+ ) ;
208
+ const maxYearName = this . _dateAdapter . getYearName (
209
+ this . _dateAdapter . createDate ( maxYearOfPage , 0 , 1 ) ,
210
+ ) ;
211
+
212
+ return [ minYearName , maxYearName ] ;
213
+ }
195
214
}
196
215
197
216
/** A calendar that is used as part of the datepicker. */
0 commit comments