diff --git a/packages/main/src/DatePickerPopover.hbs b/packages/main/src/DatePickerPopover.hbs
index a9e25ebbefc5..309778edf071 100644
--- a/packages/main/src/DatePickerPopover.hbs
+++ b/packages/main/src/DatePickerPopover.hbs
@@ -10,8 +10,10 @@
 	no-stretch
 	?_hide-header={{_shouldHideHeader}}
 	@keydown="{{_onkeydown}}"
-	@ui5-after-close="{{_respPopoverConfig.afterClose}}"
+	@ui5-before-open="{{_respPopoverConfig.beforeOpen}}"
 	@ui5-after-open="{{_respPopoverConfig.afterOpen}}"
+	@ui5-before-close="{{_respPopoverConfig.beforeClose}}"
+	@ui5-after-close="{{_respPopoverConfig.afterClose}}"
 >
 	{{#if showHeader}}
 		{{> header}}
diff --git a/packages/main/src/DateRangePicker.js b/packages/main/src/DateRangePicker.js
index 26f14af48ad8..f5ced3c4e849 100644
--- a/packages/main/src/DateRangePicker.js
+++ b/packages/main/src/DateRangePicker.js
@@ -95,6 +95,8 @@ class DateRangePicker extends DatePicker {
 		this._initialRendering = true;
 		this._oneTimeStampSelected = false; // Used to determine whether the first & last date is the same
 		this._dayPickerMouseoverHandler = this._itemMouseoverHandler.bind(this);
+		this._respPopoverConfig.beforeOpen = this.handleBeforeOpen;
+		this._respPopoverConfig.beforeClose = this.handleBeforeClose;
 	}
 
 	async onAfterRendering() {
@@ -103,13 +105,13 @@ class DateRangePicker extends DatePicker {
 		this._initialRendering = false;
 	}
 
-	async onEnterDOM() {
+	async handleBeforeOpen() {
 		const daypicker = await this.getDayPicker();
 		daypicker.addEventListener("item-mouseover", this._dayPickerMouseoverHandler);
 		daypicker.addEventListener("daypickerrendered", this._keyboardNavigationHandler);
 	}
 
-	async onExitDOM() {
+	async handleBeforeClose() {
 		const daypicker = await this.getDayPicker();
 		daypicker.removeEventListener("item-mouseover", this._dayPickerMouseoverHandler);
 		daypicker.removeEventListener("daypickerrendered", this._keyboardNavigationHandler);