diff --git a/packages/main/src/DatePicker.js b/packages/main/src/DatePicker.js
index 96eb24f7146b..c3e5f814fb75 100644
--- a/packages/main/src/DatePicker.js
+++ b/packages/main/src/DatePicker.js
@@ -413,6 +413,8 @@ class DatePicker extends DateComponentBase {
 		} else if (this.name) {
 			console.warn(`In order for the "name" property to have effect, you should also: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";`); // eslint-disable-line
 		}
+
+		this.liveValue = this.value;
 	}
 
 	/**
@@ -513,6 +515,7 @@ class DatePicker extends DateComponentBase {
 		}
 
 		let executeEvent = true;
+		this.liveValue = value;
 
 		events.forEach(event => {
 			if (!this.fireEvent(event, { value, valid }, true)) {
@@ -772,11 +775,11 @@ class DatePicker extends DateComponentBase {
 	 * @public
 	 */
 	get dateValue() {
-		return this.getFormat().parse(this.value);
+		return this.liveValue ? this.getFormat().parse(this.liveValue) : this.getFormat().parse(this.value);
 	}
 
 	get dateValueUTC() {
-		return this.getFormat().parse(this.value, true);
+		return this.liveValue ? this.getFormat().parse(this.liveValue, true) : this.getFormat().parse(this.value);
 	}
 
 	get styles() {
diff --git a/packages/main/test/pages/DatePicker.html b/packages/main/test/pages/DatePicker.html
index b0f2c57d70e8..f6123fac8de4 100644
--- a/packages/main/test/pages/DatePicker.html
+++ b/packages/main/test/pages/DatePicker.html
@@ -154,6 +154,7 @@ <h3>DatePicker with properties given in the wrong format</h3>
 
 		dp.addEventListener('ui5-change', function(e) {
 			console.log('change: ', e.detail);
+			debugger;
 			labelChange.innerHTML = 'change: ' + JSON.stringify(e.detail);
 		});
 		dp.addEventListener('ui5-input', function(e) {
diff --git a/packages/main/test/pages/DatePicker_test_page.html b/packages/main/test/pages/DatePicker_test_page.html
index 57aa90ad8af7..71a48f21e304 100644
--- a/packages/main/test/pages/DatePicker_test_page.html
+++ b/packages/main/test/pages/DatePicker_test_page.html
@@ -105,7 +105,7 @@ <h3>Test accessibleName and accessibleNameRef</h3>
 		document.querySelector("#dp8").addEventListener("ui5-change", increaseCounter);
 		document.querySelector("#dp13").addEventListener("ui5-change", function(e) {
 			document.querySelector('#lblTomorrow').innerHTML = ++counterTomorrow;
-			document.querySelector('#lblTomorrowDate').innerHTML = e.detail.value;
+			document.querySelector('#lblTomorrowDate').innerHTML = e.target.liveValue;
 		});
 
 		var dp16 = document.getElementById('dp16');