From e2fcc4cdba43fa5f38a3966aa79ff44de5cc2ad1 Mon Sep 17 00:00:00 2001 From: tsanislavgatev Date: Wed, 7 May 2025 14:17:21 +0300 Subject: [PATCH 1/2] fix(ui5-calendar): show year range text in year view --- packages/main/src/Calendar.ts | 22 ++++++++++++++------ packages/main/src/CalendarHeaderTemplate.tsx | 12 +++++++++++ packages/main/src/themes/CalendarHeader.css | 20 ++++++++++++++++++ 3 files changed, 48 insertions(+), 6 deletions(-) diff --git a/packages/main/src/Calendar.ts b/packages/main/src/Calendar.ts index 7028f9313a37..c66200b17a56 100644 --- a/packages/main/src/Calendar.ts +++ b/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,6 +559,7 @@ 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); @@ -564,9 +571,8 @@ class Calendar extends CalendarPart { .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 +622,10 @@ class Calendar extends CalendarPart { return this._currentPicker !== "year"; } + get _isHeaderYearRangeButtonHidden() { + return this._currentPicker !== "year"; + } + _fireEventAndUpdateSelectedDates(selectedDates: Array) { const datesValues = selectedDates.map(timestamp => { const calendarDate = CalendarDateComponent.fromTimestamp(timestamp * 1000, this._primaryCalendarType); diff --git a/packages/main/src/CalendarHeaderTemplate.tsx b/packages/main/src/CalendarHeaderTemplate.tsx index 8156cba121e0..edf426ef1759 100644 --- a/packages/main/src/CalendarHeaderTemplate.tsx +++ b/packages/main/src/CalendarHeaderTemplate.tsx @@ -53,6 +53,18 @@ export default function CalendarTemplate(this: Calendar) { {this._headerYearButtonTextSecType} } + +
Date: Wed, 7 May 2025 15:48:40 +0300 Subject: [PATCH 2/2] fix(ui5-calendar): remove redundant styles --- packages/main/src/themes/CalendarHeader.css | 10 ---------- 1 file changed, 10 deletions(-) diff --git a/packages/main/src/themes/CalendarHeader.css b/packages/main/src/themes/CalendarHeader.css index 3baca2f355a3..23fdaff1df69 100644 --- a/packages/main/src/themes/CalendarHeader.css +++ b/packages/main/src/themes/CalendarHeader.css @@ -133,17 +133,7 @@ } /* Todo: Remove with introduction of YearRangePicker */ -.ui5-calheader-middlebtn.ui5-calheader-yearrange-btn-disabled:hover, -.ui5-calheader-middlebtn.ui5-calheader-yearrange-btn-disabled:active, -.ui5-calheader-middlebtn.ui5-calheader-yearrange-btn-disabled:focus, -.ui5-calheader-middlebtn.ui5-calheader-yearrange-btn-disabled:focus:active, .ui5-calheader-middlebtn.ui5-calheader-yearrange-btn-disabled { - cursor: default; - outline: none; - background-color: var(--sapButton_Lite_Background); - color: var(--sapButton_Lite_TextColor); - border: transparent; - box-shadow: none; pointer-events: none; }