fix(ui5-datetime-picker): enable secondary calendar type (#4970)

Secondary calendar type value is propagated to the ui5-datetime-picker component trough it's popover view.

Fixes: #4959

Author: unazko

packages/main/src/DateTimePickerPopover.hbs

@@ -18,6 +18,7 @@
 			class="ui5-dt-cal {{classes.dateTimeView}}"
 			id="{{_id}}-calendar"
 			primary-calendar-type="{{_primaryCalendarType}}"
+			secondary-calendar-type="{{secondaryCalendarType}}"
 			format-pattern="{{_formatPattern}}"
 			timestamp="{{_calendarTimestamp}}"
 			.selectionMode="{{_calendarSelectionMode}}"
@@ -44,6 +45,7 @@
 				value="{{_timeSelectionValue}}"
 				format-pattern="{{_formatPattern}}"
 				._currentSlider="{{_currentTimeSlider}}"
+				._calendarType="{{_primaryCalendarType}}"
 				@ui5-change="{{onTimeSelectionChange}}"
 				@ui5-slider-change="{{onTimeSliderChange}}"
 		></ui5-time-selection>

packages/main/src/TimeSelection.js

@@ -7,6 +7,7 @@ import getLocale from "@ui5/webcomponents-base/dist/locale/getLocale.js";
 import DateFormat from "@ui5/webcomponents-localization/dist/DateFormat.js";
 import getCachedLocaleDataInstance from "@ui5/webcomponents-localization/dist/getCachedLocaleDataInstance.js";
 import "@ui5/webcomponents-localization/dist/features/calendar/Gregorian.js"; // default calendar for bundling
+import CalendarType from "@ui5/webcomponents-base/dist/types/CalendarType.js";
 import { fetchCldr } from "@ui5/webcomponents-base/dist/asset-registries/LocaleData.js";
 import {
 	isLeft,
@@ -136,6 +137,10 @@ const metadata = {
 			type: String,
 			defaultValue: "hours",
 		},
+
+		_calendarType: {
+			type: CalendarType,
+		},
 	},
 	events: /** @lends sap.ui.webcomponents.main.TimeSelection.prototype */ {
 		/**
@@ -435,10 +440,12 @@ class TimeSelection extends UI5Element {
 		let dateFormat;
 		if (this._isPattern) {
 			dateFormat = DateFormat.getInstance({
+				calendarType: this._calendarType,
 				pattern: this._formatPattern,
 			});
 		} else {
 			dateFormat = DateFormat.getInstance({
+				calendarType: this._calendarType,
 				style: this._formatPattern,
 			});
 		}

packages/main/test/pages/DateTimePicker.html

@@ -153,6 +153,16 @@
 		></ui5-datetime-picker>
 	</section>
 
+	<section>
+		<ui5-title wrapping-type="Normal">DateTimePicker with secondary calendar type</ui5-title>
+		<ui5-datetime-picker
+			id="secondaryCalendar"
+			value="Sha. 24, 1443 AH, 10:27:26 AM"
+			primary-calendar-type="Islamic"
+			secondary-calendar-type="Gregorian"
+		></ui5-datetime-picker>
+	</section>
+
 	<script>
 		var counter = 0;
 		dt1.addEventListener("ui5-change", function(event) {

packages/main/test/samples/DateTimePicker.sample.html

@@ -119,4 +119,17 @@ <h3>DateTimePicker in states</h3>
 	</xmp></pre>
 </section>
 
+<section>
+	<h3>DateTimePicker with secondary calendar type</h3>
+	<ui5-datetime-picker primary-calendar-type='Islamic' secondary-calendar-type='Gregorian'></ui5-date-picker>
+
+	<pre class="prettyprint lang-html"><xmp>
+<ui5-datetime-picker
+	primary-calendar-type="Gregorian"
+	secondary-calendar-type="Islamic"
+></ui5-datetime-picker>
+	</xmp></pre>
+</section>
+
+
 <!-- JSDoc marker -->

packages/main/test/specs/DateTimePicker.spec.js

@@ -264,4 +264,18 @@ describe("DateTimePicker general interaction", () => {
 		const newValue = await dtPicker.shadow$("ui5-input").getValue();
 		assert.strictEqual(newValue.toUpperCase(), "13/04/2020, 12:00:00 PM", "The new date/time is correctly selected.");
 	});
+
+	it("Secondary calendar type", async () => {
+		const picker = await browser.$("#secondaryCalendar");
+
+		// act
+		await openPickerById("secondaryCalendar");
+		await browser.keys("ArrowUp");
+		await browser.keys("Enter");
+		const submitBtn = await getSubmitButton("secondaryCalendar");
+		await submitBtn.click();
+
+		// assert
+		assert.strictEqual(await picker.shadow$("ui5-input").getValue(), "Sha. 17, 1443 AH, 10:27:26 AM", "Value change is applied.");
+	});
 });