fix(ui5-calendar): show year range text in year view (#11473)

downport: #11468

Author: tsanislavgatev

packages/main/src/Calendar.ts

@@ -265,6 +265,12 @@ class Calendar extends CalendarPart {
 	@property()
 	_headerYearButtonTextSecType?: string;
 
+	@property()
+	_headerYearRangeButtonText?: string;
+
+	@property()
+	_headerYearRangeButtonTextSecType?: string;
+
 	@property({ noAttribute: true })
 	_pickersMode: `${CalendarPickersMode}` = "DAY_MONTH_YEAR";
 
@@ -477,16 +483,16 @@ class Calendar extends CalendarPart {
 		const yearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this.primaryCalendarType });
 		const localeData = getCachedLocaleDataInstance(getLocale());
 		this._headerMonthButtonText = localeData.getMonthsStandAlone("wide", this.primaryCalendarType)[this._calendarDate.getMonth()];
+		this._headerYearButtonText = String(yearFormat.format(this._localDate, true));
 
 		if (this._currentPicker === "year") {
 			const rangeStart = new CalendarDateComponent(this._calendarDate, this._primaryCalendarType);
 			const rangeEnd = new CalendarDateComponent(this._calendarDate, this._primaryCalendarType);
+
 			rangeStart.setYear(this._currentPickerDOM._firstYear!);
 			rangeEnd.setYear(this._currentPickerDOM._lastYear!);
 
-			this._headerYearButtonText = `${yearFormat.format(rangeStart.toLocalJSDate(), true)} - ${yearFormat.format(rangeEnd.toLocalJSDate(), true)}`;
-		} else {
-			this._headerYearButtonText = String(yearFormat.format(this._localDate, true));
+			this._headerYearRangeButtonText = `${yearFormat.format(rangeStart.toLocalJSDate())} - ${yearFormat.format(rangeEnd.toLocalJSDate())}`;
 		}
 
 		this._secondaryCalendarType && this._setSecondaryCalendarTypeButtonText();
@@ -553,20 +559,21 @@ class Calendar extends CalendarPart {
 
 	_setSecondaryCalendarTypeButtonText() {
 		const yearFormatSecType = DateFormat.getDateInstance({ format: "y", calendarType: this._secondaryCalendarType });
+		this._headerYearButtonTextSecType = String(yearFormatSecType.format(this._localDate, true));
 
 		if (this._currentPicker === "year") {
 			const rangeStart = new CalendarDateComponent(this._calendarDate, this._primaryCalendarType);
 			const rangeEnd = new CalendarDateComponent(this._calendarDate, this._primaryCalendarType);
+
 			rangeStart.setYear(this._currentPickerDOM._firstYear!);
 			rangeEnd.setYear(this._currentPickerDOM._lastYear!);
 
 			const rangeStartSecType = transformDateToSecondaryType(this.primaryCalendarType, this._secondaryCalendarType, rangeStart.valueOf() / 1000, true)
 				.firstDate;
 			const rangeEndSecType = transformDateToSecondaryType(this.primaryCalendarType, this._secondaryCalendarType, rangeEnd.valueOf() / 1000, true)
 				.lastDate;
-			this._headerYearButtonTextSecType = `${yearFormatSecType.format(rangeStartSecType.toLocalJSDate(), true)} - ${yearFormatSecType.format(rangeEndSecType.toLocalJSDate(), true)}`;
-		} else {
-			this._headerYearButtonTextSecType = String(yearFormatSecType.format(this._localDate, true));
+
+			this._headerYearRangeButtonTextSecType = `${yearFormatSecType.format(rangeStartSecType.toLocalJSDate())} - ${yearFormatSecType.format(rangeEndSecType.toLocalJSDate())}`;
 		}
 	}
 
@@ -616,6 +623,10 @@ class Calendar extends CalendarPart {
 		return this._currentPicker !== "year";
 	}
 
+	get _isHeaderYearRangeButtonHidden() {
+		return this._currentPicker !== "year";
+	}
+
 	_fireEventAndUpdateSelectedDates(selectedDates: Array<number>) {
 		const datesValues = selectedDates.map(timestamp => {
 			const calendarDate = CalendarDateComponent.fromTimestamp(timestamp * 1000, this._primaryCalendarType);

packages/main/src/CalendarHeaderTemplate.tsx

@@ -53,6 +53,18 @@ export default function CalendarTemplate(this: Calendar) {
 						<span class="ui5-calheader-btn-sectext">{this._headerYearButtonTextSecType}</span>
 					}
 				</div>
+
+				<div
+					data-ui5-cal-header-btn-year-range
+					class="ui5-calheader-arrowbtn ui5-calheader-middlebtn ui5-calheader-yearrange-btn-disabled"
+					hidden={this._isHeaderYearRangeButtonHidden}
+					tabindex={-1}
+				>
+					<span>{this._headerYearRangeButtonText}</span>
+					{this.hasSecondaryCalendarType &&
+						<span class="ui5-calheader-btn-sectext">{this._headerYearRangeButtonTextSecType}</span>
+					}
+				</div>
 			</div>
 
 			<div

packages/main/src/YearPickerTemplate.tsx

@@ -30,7 +30,7 @@ export default function YearPickerTemplate(this: YearPicker) {
 						</span>
 						{
 							year.yearInSecType &&
-							<span class="ui5-yp-year-sec-type">
+							<span class="ui5-yp-item-sec-type">
 								{year.yearInSecType}
 							</span>
 						}

packages/main/src/themes/CalendarHeader.css

@@ -131,3 +131,11 @@
 .ui5-calheader-middlebtn:focus:active::after {
 	border-color: var(--sapContent_ContrastFocusColor);
 }
+
+.ui5-calheader-middlebtn.ui5-calheader-yearrange-btn-disabled {
+	pointer-events: none;
+}
+
+.ui5-calheader-middlebtn.ui5-calheader-yearrange-btn-disabled:active .ui5-calheader-btn-sectext {
+	color: var(--sapNeutralElementColor);
+}