diff --git a/packages/main/cypress/specs/CalendarConfig.cy.tsx b/packages/main/cypress/specs/CalendarConfig.cy.tsx index a27f06f50d4c5..ecdb8a1673ae0 100644 --- a/packages/main/cypress/specs/CalendarConfig.cy.tsx +++ b/packages/main/cypress/specs/CalendarConfig.cy.tsx @@ -1,4 +1,5 @@ import Calendar from "../../src/Calendar.js"; +import YearPicker from "../../src/YearPicker.js"; import "@ui5/webcomponents-localization/dist/features/calendar/Islamic.js"; import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js"; import { resetConfiguration } from "@ui5/webcomponents-base/dist/InitialConfiguration.js"; @@ -47,4 +48,81 @@ describe("Calendar general interaction", () => { cy.get("[ui5-calendar]") .should("have.prop", "_secondaryCalendarType", "Gregorian"); }); -}); \ No newline at end of file +}); + +describe("Calendar with secondary calendar type configured globally", () => { + before(() => { + cy.window() + .then($el => { + const scriptElement = document.createElement("script"); + scriptElement.type = "application/json"; + scriptElement.setAttribute("data-ui5-config", "true"); + scriptElement.innerHTML = JSON.stringify({ + "calendarType": "Gregorian", + "secondaryCalendarType": "Islamic" + }); + + return $el.document.head.append(scriptElement); + }) + + cy.wrap({ resetConfiguration }) + .invoke("resetConfiguration", true); + }); + + after(() => { + cy.window() + .then($el => { + const scriptElement = $el.document.head.querySelector("script[data-ui5-config]"); + + scriptElement?.remove(); + }) + + cy.wrap({ resetConfiguration }) + .invoke("resetConfiguration", true); + }) + + it("Year Picker shows correct range when secondary calendar type is configured globally", () => { + cy.mount(); + + cy.get("[ui5-calendar]") + .as("calendar"); + + // Secondary type is resolved from the global config, not from an attribute + cy.get("@calendar") + .should("not.have.prop", "secondaryCalendarType"); + + cy.get("@calendar") + .should("have.prop", "_secondaryCalendarType", "Islamic"); + + cy.get("@calendar") + .shadow() + .find(".ui5-calheader") + .find("[data-ui5-cal-header-btn-year]") + .realClick(); + + cy.get("@calendar") + .shadow() + .find("[ui5-yearpicker]") + .as("yearPicker"); + + // The two-calendar-type grid renders 8 years + cy.get("@yearPicker") + .shadow() + .find(".ui5-yp-item") + .should("have.length", 8); + + // The currently selected year (2024) must be present in the grid + cy.get("@yearPicker") + .shadow() + .find(".ui5-yp-item .ui5-dp-yeartext") + .should("contain.text", "2024"); + + // The first rendered year is 2022 (selected year is the 3rd cell) + cy.get("@yearPicker") + .shadow() + .find(".ui5-yp-item") + .first() + .find(".ui5-dp-yeartext") + .should("have.text", "2022"); + }); +}); diff --git a/packages/main/src/DateComponentBase.ts b/packages/main/src/DateComponentBase.ts index edf1ca43b70ff..069f8a95607ce 100644 --- a/packages/main/src/DateComponentBase.ts +++ b/packages/main/src/DateComponentBase.ts @@ -176,7 +176,7 @@ class DateComponentBase extends UI5Element { } get hasSecondaryCalendarType() { - return !!this.secondaryCalendarType && this.secondaryCalendarType !== this.primaryCalendarType; + return !!this._secondaryCalendarType && this._secondaryCalendarType !== this._primaryCalendarType; } _getMinMaxCalendarDateFromString(date: string) { diff --git a/packages/main/src/YearPicker.ts b/packages/main/src/YearPicker.ts index 2c67d4d60cafd..ffae354e6f77b 100644 --- a/packages/main/src/YearPicker.ts +++ b/packages/main/src/YearPicker.ts @@ -160,7 +160,7 @@ class YearPicker extends CalendarPart implements ICalendarPicker { _buildYears() { const pageSize = this._getPageSize(); const oYearFormat = DateFormat.getDateInstance({ format: "y", calendarType: this._primaryCalendarType }); - const oYearFormatInSecType = DateFormat.getDateInstance({ format: "y", calendarType: this.secondaryCalendarType }); + const oYearFormatInSecType = DateFormat.getDateInstance({ format: "y", calendarType: this._secondaryCalendarType }); const calendarDate = this._calendarDate; // store the value of the expensive getter const minDate = this._minDate; // store the value of the expensive getter