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