fix(ui5-date-picker): open correct picker (#8371)

fixes: #8218

packages/main/src/DatePicker.ts

@@ -708,6 +708,22 @@ class DatePicker extends DateComponentBase implements IFormElement {
 		return false;
 	}
 
+	/**
+	 * Returns the first picker depending on the CalendarPickerMode
+	 */
+	get firstPicker() {
+		const calendarPickerMode = this._calendarPickersMode;
+		let firstPicker = "day";
+
+		if (calendarPickerMode === CalendarPickersMode.YEAR) {
+			firstPicker = "year";
+		} else if (calendarPickerMode === CalendarPickersMode.MONTH_YEAR) {
+			firstPicker = "month";
+		}
+
+		return firstPicker;
+	}
+
 	/**
 	 * Defines whether the value help icon is hidden
 	 * @private
@@ -795,7 +811,7 @@ class DatePicker extends DateComponentBase implements IFormElement {
 	 */
 	async openPicker(): Promise<void> {
 		this._isPickerOpen = true;
-		this._calendarCurrentPicker = "day";
+		this._calendarCurrentPicker = this.firstPicker;
 		this.responsivePopover = await this._respPopover();
 
 		this.responsivePopover.showAt(this);

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

@@ -1345,4 +1345,28 @@ describe("Date Picker Tests", () => {
 
 		assert.strictEqual(await input.getProperty("valueState"), valueState, "value state is not changed");
 	});
+
+	it("should open date picker in daypicker", async () => {
+		datepicker.id = "#dpCalendarModeMonths";
+
+		const calendar = await datepicker.getCalendar();
+		const datepickerRoot = await datepicker.getRoot();
+		await datepicker.openPicker();
+
+		let currentPicker = await calendar.getProperty("_currentPicker");
+		assert.equal(currentPicker, "month", "calendar is opened on months");
+
+		await datepickerRoot.setAttribute("format-pattern", "yyyy, dd/MM");
+		await datepicker.openPicker();
+		currentPicker = await calendar.getProperty("_currentPicker");
+
+		assert.equal(currentPicker, "day", "calendar is opened on days");
+
+		const dayPicker = await calendar.shadow$("ui5-daypicker");
+		const monthPicker = await calendar.shadow$("ui5-monthpicker");
+		const yearPicker = await calendar.shadow$("ui5-yearpicker");
+		assert.notOk(await dayPicker.getAttribute("hidden"));
+		assert.ok(await monthPicker.getAttribute("hidden"));
+		assert.ok(await yearPicker.getAttribute("hidden"));
+	});
 });