feat(ui5-datepicker): set value attribute through date object (#1624)

Author: unazko

packages/main/src/DatePicker.js

@@ -423,9 +423,10 @@ class DatePicker extends UI5Element {
 	}
 
 	_getTimeStampFromString(value) {
-		if (this.getFormat().parse(value)) {
-			const jsDate = new Date(this.getFormat().parse(value).getFullYear(), this.getFormat().parse(value).getMonth(), this.getFormat().parse(value).getDate());
-			const oCalDate = CalendarDate.fromTimestamp(jsDate.getTime(), this._primaryCalendarType);
+		const jsDate = this.getFormat().parse(value);
+		if (jsDate) {
+			const jsDateTimeNow = new Date(jsDate.getFullYear(), jsDate.getMonth(), jsDate.getDate());
+			const oCalDate = CalendarDate.fromTimestamp(jsDateTimeNow.getTime(), this._primaryCalendarType);
 			return oCalDate.valueOf();
 		}
 		return undefined;
@@ -697,6 +698,16 @@ class DatePicker extends UI5Element {
 		);
 	}
 
+	/**
+	 * Formats a Java Script date object into a string representing a locale date
+	 * according to the <code>formatPattern</code> property of the DatePicker instance
+	 * @param {object} oDate A Java Script date object to be formatted as string
+	 * @public
+	 */
+	formatValue(oDate) {
+		return this.getFormat().format(oDate);
+	}
+
 	/**
 	 * Closes the picker.
 	 * @public

packages/main/src/TimePicker.js

@@ -696,6 +696,16 @@ class TimePicker extends UI5Element {
 		}
 	}
 
+	/**
+	 * Formats a Java Script date object into a string representing a locale date and time
+	 * according to the <code>formatPattern</code> property of the TimePicker instance
+	 * @param {object} oDate A Java Script date object to be formatted as string
+	 * @public
+	 */
+	formatValue(oDate) {
+		return this.getFormat().format(oDate);
+	}
+
 	_getSlidersContained() {
 		const formatArray = this.getFormat().aFormatArray;
 		return getTimeControlsByFormat(formatArray, this._hoursParameters);

packages/main/test/pages/DatePicker.html

@@ -72,6 +72,10 @@ <h3>format-pattern - 'EEE, M/d/yyyy'</h3>
 		<h3>Try the value - 'today'</h3>
 		<ui5-datepicker id='dp10'></ui5-datepicker>
 
+		<h3>Value is set using Java Script Date object</h3>
+		<ui5-datepicker id="dp11" value="11/11/2018" format-pattern="long"></ui5-datepicker>
+		<ui5-button id="b1" design="Default">Set date</ui5-button>
+
 		<h3>disabled</h3>
 		<ui5-datepicker id='dp2' value='11/11/2018' disabled></ui5-datepicker>
 
@@ -158,6 +162,13 @@ <h3>DatePicker in Compact</h3>
 				dp.openPicker({ focusInput: true });
 			}
 		});
+
+		var dp11 = document.getElementById('dp11');
+
+		document.getElementById('b1').addEventListener("click", function(e) {
+			dp11.setAttribute("value", dp11.formatValue(new Date(2018, 11, 11)));
+		});
+
 	</script>
 </body>
 </html>

packages/main/test/pages/DatePicker_test_page.html

@@ -38,6 +38,9 @@
 	<ui5-datepicker id="dp10" disabled></ui5-datepicker>
 	<ui5-datepicker id="dp11"></ui5-datepicker>
 	<ui5-datepicker id="dp13"></ui5-datepicker>
+	<ui5-datepicker id="dp16" format-pattern="long"></ui5-datepicker>
+	<ui5-button id="b1" design="Default">Set date</ui5-button>
+	
 
 	<label id='lbl'>0</label>
 	<label for="inputTimezone">Timezone:</label>
@@ -93,6 +96,12 @@ <h3>DatePicker with valueStateMessage</h3>
 			document.querySelector('#lblTomorrow').innerHTML = ++counterTomorrow;
 			document.querySelector('#lblTomorrowDate').innerHTML = e.target.value;
 		});
+
+		var dp16 = document.getElementById('dp16');
+
+		document.getElementById('b1').addEventListener("click", function(e) {
+			dp16.setAttribute("value", dp16.formatValue(new Date(2018, 11, 11)));
+		});
 	</script>
 </body>
 </html>

packages/main/test/pages/DateTimePicker.html

@@ -31,6 +31,16 @@
 
 	<section>
 		<ui5-title wrap>DateTimePicker format pattern</ui5-title>
+
+		<br><ui5-label>Default format pattern</ui5-label><br>
+		<ui5-datetime-picker
+			id="defaultPattern"
+			value="13/04/2020, 03:16:16 AM"
+		></ui5-datetime-picker>
+		<ui5-button id="setButton" design="Default">Set date</ui5-button>
+
+		<br>
+
 		<br><ui5-label>d/MM/yyyy, hh:mm aa</ui5-label><br>
 		<ui5-datetime-picker
 			id="dtMinutes"
@@ -160,6 +170,12 @@
 			input3.value = ++counter2;
 			input4.value = "{ value: " + dt2.value + " , valid: " + event.detail.valid + " }";
 		});
+
+		var dtp = document.getElementById('defaultPattern');
+		document.getElementById('setButton').addEventListener("click", function(e) {
+			dtp.setAttribute("value", dtp.formatValue(new Date(2020, 3, 13, 3, 16, 16)));
+		});
+
 	</script>
 </body>
 </html>

packages/main/test/pages/TimePicker.html

@@ -42,6 +42,10 @@
 		<ui5-button id="testBtn">btn for testing</ui5-button>
 
 		<br /><br />
+		<ui5-title>Test set time value</ui5-title>
+		<ui5-timepicker id="timepickerSetTime" value=""></ui5-timepicker>
+		<ui5-button id="setTimeButton">Set time</ui5-button>
+
 		<ui5-title>Test valueStateMessage slot</ui5-title>
 		<ui5-timepicker id="timepickerValueStateMessage" value-state="Error">
 			<div slot="valueStateMessage" id="customValueStateMessage">Please provide valid value</div>
@@ -58,6 +62,11 @@
 				timepickerInput.addEventListener("input", function() {
 					inputResult.value = ++inputCounter;
 				});
+
+				var tp = document.getElementById('timepickerSetTime'); 
+				document.getElementById('setTimeButton').addEventListener("click", function(e) {
+					tp.setAttribute("value", tp.formatValue(new Date(2020, 3, 13, 3, 16, 16)));
+				});
 		</script>
 	</body>
 </html>

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

@@ -23,7 +23,19 @@ describe("Date Picker Tests", () => {
 		assert.equal(date.getFullYear(), 2011);
 	});
 
+	it("input receives value in format pattern depending on the set language", () => {
+		browser.url("http://localhost:8080/test-resources/pages/DatePicker_test_page.html?sap-ui-language=bg");
+		datepicker.id = "#dp16";
+
+		const setDateButton = browser.$("#b1");
+
+		setDateButton.click();
+
+		assert.equal(datepicker.innerInput.getValue(), "11 декември 2018 г.");
+	});
+
 	it("custom formatting", () => {
+		datepicker.open();
 		datepicker.id = "#dp2";
 
 		assert.ok(datepicker.isValid("2018, 05/05"), "custom value is valid");

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

@@ -1,9 +1,19 @@
 const assert = require("chai").assert;
 
 describe("TimePicker general interaction", () => {
-	browser.url("http://localhost:8080/test-resources/pages/TimePicker.html");
+	it("input receives value in format pattern depending on the set language", () => {
+		browser.url("http://localhost:8080/test-resources/pages/TimePicker.html?sap-ui-language=bg");
+
+		const timepicker = browser.$("#timepickerSetTime");
+		const setTimeButton = browser.$("#setTimeButton");
+
+		setTimeButton.click();
+
+		assert.equal(timepicker.shadow$("ui5-input").getValue(), "3:16:16 ч.");
+	});
 
 	it("tests sliders value", () => {
+		browser.url("http://localhost:8080/test-resources/pages/TimePicker.html");
 		const timepicker = browser.$("#timepicker");
 		const staticAreaItemClassName = browser.getStaticAreaItemClassName("#timepicker");
 		const timepickerPopover = browser.$(`.${staticAreaItemClassName}`).shadow$("ui5-responsive-popover");