fix(ui5-datetime-picker): fix AM/PM selection (#1551)

FIXES: #1530

Author: ilhan007

packages/main/src/DateTimePicker.js

@@ -558,6 +558,7 @@ class DateTimePicker extends DatePicker {
 		// the time set in the timepicker
 		const selectedTime = new Date();
 		const timeValues = await this.getTimePickerValues();
+
 		selectedTime.setHours(timeValues.hours);
 		selectedTime.setMinutes(timeValues.minutes);
 		selectedTime.setSeconds(timeValues.seconds);
@@ -590,7 +591,14 @@ class DateTimePicker extends DatePicker {
 		const minutes = minutesSlider ? minutesSlider.value : "0";
 		const seconds = secondsSlider ? secondsSlider.value : "0";
 		const period = periodsSlider ? periodsSlider.value : this.periodsArray[0];
-		hours = period === this.periodsArray[1] ? hours * 1 + 12 : hours;
+
+		if (period === this.periodsArray[0]) { // AM
+			hours = hours === "12" ? 0 : hours;
+		}
+
+		if (period === this.periodsArray[1]) { // PM
+			hours = hours === "12" ? hours : hours * 1 + 12;
+		}
 
 		return {
 			hours,
@@ -659,7 +667,7 @@ class DateTimePicker extends DatePicker {
 
 		if (config.isTwelveHoursFormat) {
 			if (config.minHour === 1) {
-				periodsSlider.value = hours > config.maxHour ? this.periodsArray[1] : this.periodsArray[0];
+				periodsSlider.value = hours >= config.maxHour ? this.periodsArray[1] : this.periodsArray[0];
 			} else {
 				periodsSlider.value = (hours > config.maxHour || hours === config.minHour) ? this.periodsArray[1] : this.periodsArray[0];
 			}

packages/main/test/pages/DateTimePicker.html

@@ -111,6 +111,20 @@
 		<ui5-input id="input4" style="width: 300px"></ui5-input>
 	</section>
 
+	<section>
+	<ui5-datetime-picker
+			id="dtTest12AM"
+			format-pattern="dd/MM/yyyy, hh:mm:ss aa"
+			value="13/04/2020, 03:16:16 AM"
+		></ui5-datetime-picker>
+	</section>
+	<ui5-datetime-picker
+			id="dtTest12PM"
+			format-pattern="dd/MM/yyyy, hh:mm:ss aa"
+			value="13/04/2020, 03:16:16 AM"
+		></ui5-datetime-picker>
+	</section>
+
 	<section>
 		<ui5-title wrap>DateTimePicker states</ui5-title>
 		<ui5-datetime-picker value-state="Error"></ui5-datetime-picker>

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

@@ -173,4 +173,43 @@ describe("DateTimePicker general interaction", () => {
 
 		closePickerById("dt");
 	});
+
+	it("tests selection of 12:00:00 AM", () => {
+		const dtPicker = browser.$("#dtTest12AM");
+
+		// act
+		openPickerById("dtTest12AM");
+		browser.pause(500);
+
+		const picker = getPicker("dtTest12AM");
+		picker.$(".ui5-dt-hours-wheel").setProperty("value","12");
+		picker.$(".ui5-dt-minutes-wheel").setProperty("value","00");
+		picker.$(".ui5-dt-seconds-wheel").setProperty("value","00");
+		picker.$(".ui5-dt-periods-wheel").setProperty("value","AM");
+		picker.$("#ok").click();
+		browser.pause(500);
+
+		// assert
+		const newValue = dtPicker.shadow$("ui5-input").getValue();
+		assert.strictEqual(newValue.toUpperCase(), "13/04/2020, 12:00:00 AM", "The new date/time is correctly selected.");
+	});
+
+	it("tests selection of 12:00:00 PM", () => {
+		const dtPicker = browser.$("#dtTest12PM");
+
+		// act
+		openPickerById("dtTest12PM");
+		browser.pause(500);
+
+		const picker = getPicker("dtTest12PM");
+		picker.$(".ui5-dt-hours-wheel").setProperty("value","12");
+		picker.$(".ui5-dt-minutes-wheel").setProperty("value","00");
+		picker.$(".ui5-dt-seconds-wheel").setProperty("value","00");
+		picker.$(".ui5-dt-periods-wheel").setProperty("value","PM");
+		picker.$("#ok").click();
+
+		// assert
+		const newValue = dtPicker.shadow$("ui5-input").getValue();
+		assert.strictEqual(newValue.toUpperCase(), "13/04/2020, 12:00:00 PM", "The new date/time is correctly selected.");
+	});
 });