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

@@ -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)) {

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>

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");
+	});
 });