fix(ui5-daterange-picker): working with format pattern containing the delimiter (#2873)

Author: tsanislavgatev

packages/main/src/DateRangePicker.js

@@ -249,7 +249,13 @@ class DateRangePicker extends DatePicker {
 	}
 
 	_splitValueByDelimiter(value) {
-		return value.split(this._effectiveDelimiter).map(date => date.trim()); // just split by delimiter and trim spaces
+		let valuesArray = [];
+		const partsArray = value.split(this._effectiveDelimiter);
+
+		valuesArray[0] = partsArray.slice(0, partsArray.length / 2).join(this._effectiveDelimiter);
+		valuesArray[1] = partsArray.slice(partsArray.length / 2).join(this._effectiveDelimiter);
+	
+		return valuesArray;
 	}
 
 	/**

packages/main/test/pages/DateRangePicker.html

@@ -47,9 +47,11 @@ <h3>daterange-picker in Compact</h3>
 				<ui5-daterange-picker id="daterange-picker5" delimiter="@"></ui5-daterange-picker>
 			</div>
 		</section>
-
+		<h3>daterange-picker with format pattern yyyy-MM-ddy</h3>
+		<ui5-daterange-picker id="daterange-picker6" format-pattern="yyyy-MM-dd"></ui5-daterange-picker>
 		<h3>DateRange Picker with one date selected as first & last</h3>
-		<ui5-daterange-picker id="daterange-picker5" value="Aug 20, 2020 - Aug 20, 2020"></ui5-daterange-picker>
+		<ui5-daterange-picker id="daterange-picker7" value="Aug 20, 2020 - Aug 20, 2020"></ui5-daterange-picker>
+
 	</div>
 	<script>
 		document.getElementById('daterange-picker1').addEventListener('ui5-change', function(e) {

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

@@ -169,4 +169,15 @@ describe("DateRangePicker general interaction", () => {
 		assert.strictEqual(dateRangePicker.getAttribute("value"), "Jul 16, 2020 @ Jul 17, 2020");
 	});
 
+	it("Delimiter is part of the format pattern", () => {
+		browser.url("http://localhost:8080/test-resources/pages/DateRangePicker.html");
+		const daterangepicker = browser.$("#daterange-picker6");
+
+		daterangepicker.click();
+		daterangepicker.keys("2020-09-09 - 2020-10-10");
+		daterangepicker.keys("Enter");
+
+		assert.strictEqual(daterangepicker.shadow$("ui5-input").getProperty("valueState"), "None", "The value state is on none");
+	});
+
 });