From 105c311c24917c44c905cfd6fe17c7c37953d9de Mon Sep 17 00:00:00 2001
From: Stoyan <88034608+hinzzx@users.noreply.github.com>
Date: Mon, 17 Jun 2024 16:56:16 +0300
Subject: [PATCH] fix(ui5-special-date): respect format-pattern (#9086)

Previously our `<ui5-special-date>` didn't respect the `format-pattern` (if provided), and was able to work only with formats, supported by the JavaScript's Date class.

With this change, our `<ui5-special-date>` now takes the provided `format-pattern` property in account.
---
 packages/main/src/Calendar.ts             | 2 +-
 packages/main/test/pages/Calendar.html    | 4 +++-
 packages/main/test/specs/Calendar.spec.js | 9 +++++++++
 3 files changed, 13 insertions(+), 2 deletions(-)

diff --git a/packages/main/src/Calendar.ts b/packages/main/src/Calendar.ts
index a8307ba11ee8..43d1e4fa26e1 100644
--- a/packages/main/src/Calendar.ts
+++ b/packages/main/src/Calendar.ts
@@ -405,7 +405,7 @@ class Calendar extends CalendarPart {
 		const uniqueSpecialDates: Array<SpecialCalendarDateT> = [];
 
 		validSpecialDates.forEach(date => {
-			const dateFromValue = UI5Date.getInstance(date.value);
+			const dateFromValue = this.getFormat().parse(date.value) as Date | UI5Date;
 			const timestamp = dateFromValue.getTime();
 
 			if (!uniqueDates.has(timestamp)) {
diff --git a/packages/main/test/pages/Calendar.html b/packages/main/test/pages/Calendar.html
index 7bf9b20173db..425dc3ac1e89 100644
--- a/packages/main/test/pages/Calendar.html
+++ b/packages/main/test/pages/Calendar.html
@@ -50,7 +50,9 @@
 	<section>
 		<ui5-calendar id="calendar11" min-date="tomorrow"></ui5-calendar>
 		<ui5-calendar id="calendar12" max-date="yesterday"></ui5-calendar>
-		<ui5-calendar id="calendar3" min-date="1/7/2020" max-date="21/10/2020" format-pattern="dd/MM/yyyy"></ui5-calendar>
+		<ui5-calendar id="calendar3" min-date="01072020" max-date="21102020" format-pattern="ddMMyyyy">
+			<ui5-special-date slot="specialDates" type="Type01" value="07102020"></ui5-special-date>
+		</ui5-calendar>
 	</section>
 
 	<section>
diff --git a/packages/main/test/specs/Calendar.spec.js b/packages/main/test/specs/Calendar.spec.js
index 52d854f5248e..20169d271071 100644
--- a/packages/main/test/specs/Calendar.spec.js
+++ b/packages/main/test/specs/Calendar.spec.js
@@ -422,4 +422,13 @@ describe("Calendar general interaction", () => {
 
 		assert.ok(await currentDayItem.isFocusedDeep(), "Current calendar day item is focused");
 	});
+
+	it("Special date respects format-pattern given to the calendar", async  () => {
+		const calendar = await browser.$("#calendar3");
+		const dayPickerRoot = await calendar.shadow$("ui5-daypicker").shadow$(".ui5-dp-root");
+
+		const specialDate = await dayPickerRoot.$$(`div[special-day]`);
+
+		assert.strictEqual(specialDate.length, 1, "Special date is rendered");
+	});
 });