diff --git a/packages/components/datepicker/__screenshots__/01-dark.png b/packages/components/datepicker/__screenshots__/01-dark.png
index 0b90b6524..9ba8e0806 100644
Binary files a/packages/components/datepicker/__screenshots__/01-dark.png and b/packages/components/datepicker/__screenshots__/01-dark.png differ
diff --git a/packages/components/datepicker/__screenshots__/01-light.png b/packages/components/datepicker/__screenshots__/01-light.png
index c7752ef89..6165a4c63 100644
Binary files a/packages/components/datepicker/__screenshots__/01-light.png and b/packages/components/datepicker/__screenshots__/01-light.png differ
diff --git a/packages/components/datepicker/datepicker-input.directive.ts b/packages/components/datepicker/datepicker-input.directive.ts
index 036cc2e02..b5af344f7 100644
--- a/packages/components/datepicker/datepicker-input.directive.ts
+++ b/packages/components/datepicker/datepicker-input.directive.ts
@@ -61,7 +61,7 @@ import {
     validationTooltipHideDelay,
     validationTooltipShowDelay
 } from '@koobiq/components/core';
-import { KbqFormFieldControl } from '@koobiq/components/form-field';
+import { KbqFormField, KbqFormFieldControl } from '@koobiq/components/form-field';
 import type { KbqWarningTooltipTrigger } from '@koobiq/components/tooltip';
 import { Subject, Subscription } from 'rxjs';
 import { KbqCalendar } from './calendar.component';
@@ -273,9 +273,12 @@ interface DateTimeObject {
 export class KbqDatepickerInput<D>
     implements KbqFormFieldControl<D>, ControlValueAccessor, Validator, OnDestroy, DoCheck, AfterContentInit
 {
+    /** @docs-private */
+    protected readonly formField = inject(KbqFormField, { optional: true, host: true });
     /** @docs-private */
     protected readonly localeService = inject(KBQ_LOCALE_SERVICE, { optional: true });
 
+    /** @docs-private */
     protected readonly externalConfiguration = inject(KBQ_DATEPICKER_CONFIGURATION, { optional: true });
 
     protected configuration;
@@ -865,6 +868,11 @@ export class KbqDatepickerInput<D>
         this.errorStateTracker.updateErrorState();
     }
 
+    /** Returns the ElementRef of the formField if it exists; otherwise, returns the ElementRef of the input. */
+    getOrigin(): ElementRef {
+        return this.formField ? this.formField.getConnectedOverlayOrigin() : this.elementRef;
+    }
+
     private saveTimePart(selected: D) {
         if (!this.value) {
             return selected;
diff --git a/packages/components/datepicker/datepicker.component.ts b/packages/components/datepicker/datepicker.component.ts
index f09534c23..a4c642473 100644
--- a/packages/components/datepicker/datepicker.component.ts
+++ b/packages/components/datepicker/datepicker.component.ts
@@ -456,7 +456,7 @@ export class KbqDatepicker<D> implements OnDestroy {
     private createPopupPositionStrategy(): PositionStrategy {
         return this.overlay
             .position()
-            .flexibleConnectedTo(this.datepickerInput.elementRef)
+            .flexibleConnectedTo(this.datepickerInput.getOrigin())
             .withTransformOriginOn('.kbq-datepicker__content')
             .withFlexibleDimensions(false)
             .withViewportMargin(8)
diff --git a/tools/public_api_guard/components/datepicker.api.md b/tools/public_api_guard/components/datepicker.api.md
index f633e4518..4bad4b5c5 100644
--- a/tools/public_api_guard/components/datepicker.api.md
+++ b/tools/public_api_guard/components/datepicker.api.md
@@ -28,6 +28,7 @@ import * as i8 from '@angular/common';
 import { InjectionToken } from '@angular/core';
 import { KbqButton } from '@koobiq/components/button';
 import { KbqDateFormats } from '@koobiq/components/core';
+import { KbqFormField } from '@koobiq/components/form-field';
 import { KbqFormFieldControl } from '@koobiq/components/form-field';
 import { KbqLocaleService } from '@koobiq/components/core';
 import type { KbqWarningTooltipTrigger } from '@koobiq/components/tooltip';
@@ -308,7 +309,6 @@ export class KbqDatepickerInput<D> implements KbqFormFieldControl<D>, ControlVal
     set errorState(value: boolean);
     get errorStateMatcher(): ErrorStateMatcher;
     set errorStateMatcher(value: ErrorStateMatcher);
-    // (undocumented)
     protected readonly externalConfiguration: unknown;
     // (undocumented)
     focus(): void;
@@ -316,6 +316,8 @@ export class KbqDatepickerInput<D> implements KbqFormFieldControl<D>, ControlVal
     focusChanged(isFocused: boolean): void;
     // (undocumented)
     focused: boolean;
+    protected readonly formField: KbqFormField | null;
+    getOrigin(): ElementRef;
     // (undocumented)
     get id(): string;
     set id(value: string);