From b397862ad3682b9834ec88e284d208c040bd3d14 Mon Sep 17 00:00:00 2001
From: Tsanislav Gatev <tsanislav.gatev@sap.com>
Date: Fri, 12 Mar 2021 16:48:08 +0200
Subject: [PATCH] fix(ui5-daterange-picker): working with format pattern
 containing the delimiter (#2873)

---
 packages/main/src/DateRangePicker.js             |  8 +++++++-
 packages/main/test/pages/DateRangePicker.html    |  6 ++++--
 packages/main/test/specs/DateRangePicker.spec.js | 11 +++++++++++
 3 files changed, 22 insertions(+), 3 deletions(-)

diff --git a/packages/main/src/DateRangePicker.js b/packages/main/src/DateRangePicker.js
index 864bb1767455..dc0d3bf3e01a 100644
--- a/packages/main/src/DateRangePicker.js
+++ b/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;
 	}
 
 	/**
diff --git a/packages/main/test/pages/DateRangePicker.html b/packages/main/test/pages/DateRangePicker.html
index 9495f010a2fd..c82f457cd6e0 100644
--- a/packages/main/test/pages/DateRangePicker.html
+++ b/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) {
diff --git a/packages/main/test/specs/DateRangePicker.spec.js b/packages/main/test/specs/DateRangePicker.spec.js
index 4de89be8a243..6f1b01978c1b 100644
--- a/packages/main/test/specs/DateRangePicker.spec.js
+++ b/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");
+	});
+
 });