diff --git a/src/components/ha-date-range-picker.ts b/src/components/ha-date-range-picker.ts
index 7e63a1ddbc..966d429d40 100644
--- a/src/components/ha-date-range-picker.ts
+++ b/src/components/ha-date-range-picker.ts
@@ -19,7 +19,7 @@ import {
   PropertyValues,
   TemplateResult,
 } from "lit";
-import { customElement, property } from "lit/decorators";
+import { customElement, property, state } from "lit/decorators";
 import { calcDate } from "../common/datetime/calc_date";
 import { firstWeekdayIndex } from "../common/datetime/first_weekday";
 import { formatDate } from "../common/datetime/format_date";
@@ -58,19 +58,15 @@ export class HaDateRangePicker extends LitElement {
 
   @property({ type: Boolean }) private minimal = false;
 
-  @property() private _openingDirection = "right";
+  @property() public openingDirection?: "right" | "left" | "center" | "inline";
+
+  @state() private _calcedOpeningDirection?:
+    | "right"
+    | "left"
+    | "center"
+    | "inline";
 
   protected willUpdate(changedProps: PropertyValues) {
-    // set dialog opening direction based on position
-    const datePickerPosition = this.getBoundingClientRect().x;
-    if (datePickerPosition > (2 * window.innerWidth) / 3) {
-      this._openingDirection = "left";
-    } else if (datePickerPosition < window.innerWidth / 3) {
-      this._openingDirection = "right";
-    } else {
-      this._openingDirection = "center";
-    }
-
     if (
       (!this.hasUpdated && this.ranges === undefined) ||
       (changedProps.has("hass") &&
@@ -158,10 +154,11 @@ export class HaDateRangePicker extends LitElement {
         start-date=${this.startDate}
         end-date=${this.endDate}
         ?ranges=${this.ranges !== false}
-        opening-direction=${this._openingDirection}
+        opening-direction=${this.openingDirection ||
+        this._calcedOpeningDirection}
         first-day=${firstWeekdayIndex(this.hass.locale)}
       >
-        <div slot="input" class="date-range-inputs">
+        <div slot="input" class="date-range-inputs" @click=${this._handleClick}>
           ${!this.minimal
             ? html`<ha-svg-icon .path=${mdiCalendar}></ha-svg-icon>
                 <ha-textfield
@@ -265,6 +262,22 @@ export class HaDateRangePicker extends LitElement {
     }
   }
 
+  private _handleClick() {
+    // calculate opening direction if not set
+    if (!this._dateRangePicker.open && !this.openingDirection) {
+      const datePickerPosition = this.getBoundingClientRect().x;
+      let opens: "right" | "left" | "center" | "inline";
+      if (datePickerPosition > (2 * window.innerWidth) / 3) {
+        opens = "left";
+      } else if (datePickerPosition < window.innerWidth / 3) {
+        opens = "right";
+      } else {
+        opens = "center";
+      }
+      this._calcedOpeningDirection = opens;
+    }
+  }
+
   static get styles(): CSSResultGroup {
     return css`
       ha-svg-icon {