diff --git a/CHANGELOG.md b/CHANGELOG.md
index bf83fc33a69..7cd2086c3ff 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -68,6 +68,8 @@ All notable changes for each version of this project will be documented in this
 
 ### Bug Fixes
 
+- `IgxDatePickerComponent`, `IgxDateRangePickerComponent`
+    - An open calendar no longer accepts date selections while the picker is disabled.
 - **Forms**
     - `IgxSnackbarComponent` - The default action button now renders with `type="button"`. Previously, when the snackbar was inside a `form` (for example as part of a grid), it became the default button of the form, so pressing Enter in any input of the form clicked it, which triggered the snackbar action and submitted the form.
     - `IgxQueryBuilderComponent` - The add expression and the group (AND/OR) buttons now render with `type="button"`. Previously, clicking them inside a `form` submitted it. Pressing Enter in the query builder inputs also no longer submits a surrounding `form`.
diff --git a/projects/igniteui-angular/date-picker/src/date-picker/README.md b/projects/igniteui-angular/date-picker/src/date-picker/README.md
index 07072ffefa7..b2a8b4f20e5 100644
--- a/projects/igniteui-angular/date-picker/src/date-picker/README.md
+++ b/projects/igniteui-angular/date-picker/src/date-picker/README.md
@@ -123,7 +123,7 @@ The date picker also supports binding through `ngModel` if two-way date-bind is
 | `locale` | Locale settings used in `displayFormat` and for localizing the calendar.  | string |
 | `overlaySettings` | Changes the default overlay settings used by the `IgxDatePickerComponent`. | OverlaySettings |
 | `placeholder` | Sets the placeholder text for empty input. | string |
-| `disabled` | Disables or enables the picker. | boolean |
+| `disabled` | Disables or enables the picker, including date selection in an open calendar. | boolean |
 | `outlet` | **Deprecated.** The container used for the pop up element. | IgxOverlayOutletDirective \| ElementRef |
 | `type` | Determines how the picker will be styled. | IgxInputGroupType |
 | `spinLoop` | Determines if the currently spun date segment should loop over. | boolean |
diff --git a/projects/igniteui-angular/date-picker/src/date-picker/calendar-container/calendar-container.component.html b/projects/igniteui-angular/date-picker/src/date-picker/calendar-container/calendar-container.component.html
index 1d0f778d9ac..18035abc128 100644
--- a/projects/igniteui-angular/date-picker/src/date-picker/calendar-container/calendar-container.component.html
+++ b/projects/igniteui-angular/date-picker/src/date-picker/calendar-container/calendar-container.component.html
@@ -25,6 +25,7 @@
                 <button
                     #todayButton
                     type="button"
+                    [disabled]="isDisabled()"
                     igxButton="flat"
                     igxRipple
                     (click)="todaySelection.emit({ owner: this })"
@@ -36,9 +37,10 @@
     }
 </ng-template>
 
-<igx-calendar></igx-calendar>
+<igx-calendar [inert]="isDisabled()"></igx-calendar>
  @if( usePredefinedRanges || (customRanges?.length || 0) > 0 ){
         <igx-predefined-ranges-area
+            [inert]="isDisabled()"
             [usePredefinedRanges]="usePredefinedRanges"
             [customRanges]="customRanges"
             [resourceStrings]="resourceStrings"
diff --git a/projects/igniteui-angular/date-picker/src/date-picker/calendar-container/calendar-container.component.ts b/projects/igniteui-angular/date-picker/src/date-picker/calendar-container/calendar-container.component.ts
index ebb5dff4009..caee6eca777 100644
--- a/projects/igniteui-angular/date-picker/src/date-picker/calendar-container/calendar-container.component.ts
+++ b/projects/igniteui-angular/date-picker/src/date-picker/calendar-container/calendar-container.component.ts
@@ -73,6 +73,7 @@ export class IgxCalendarContainerComponent {
         return this.mode === PickerInteractionMode.Dialog;
     }
 
+    public isDisabled = () => false;
     public usePredefinedRanges = false;
     public customRanges: CustomDateRange[] = [];
     public resourceStrings!: IDateRangePickerResourceStrings;
diff --git a/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.spec.ts b/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.spec.ts
index c7b21ba69e4..7b85cec2e14 100644
--- a/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.spec.ts
+++ b/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.spec.ts
@@ -832,6 +832,23 @@ describe('IgxDatePicker', () => {
                 vi.useRealTimers();
             });
 
+            it('should prevent interaction with an open calendar while disabled', async () => {
+                datePicker.open();
+                await vi.runAllTimersAsync();
+                detectChanges();
+                const calendar = document.querySelector<HTMLElement>('igx-calendar')!;
+
+                expect(calendar.inert).toBeFalsy();
+
+                datePicker.setDisabledState(true);
+                detectChanges();
+                expect(calendar.inert).toBeTruthy();
+
+                datePicker.setDisabledState(false);
+                detectChanges();
+                expect(calendar.inert).toBeFalsy();
+            });
+
             it('should activate today\'s date when reopening the calendar', async () => {
                 datePicker.clear();
                 datePicker.open();
diff --git a/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts b/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts
index a09da174dab..b6a4678b83c 100644
--- a/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts
+++ b/projects/igniteui-angular/date-picker/src/date-picker/date-picker.component.ts
@@ -957,6 +957,7 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
     }
 
     private _initializeCalendarContainer(componentInstance: IgxCalendarContainerComponent) {
+        componentInstance.isDisabled = () => this.disabled;
         this._calendar = componentInstance.calendar;
         this._calendar.hasHeader = !this.isDropdown && !this.hideHeader;
         this._calendar.formatOptions = this.pickerCalendarFormat;
diff --git a/projects/igniteui-angular/date-picker/src/date-range-picker/README.md b/projects/igniteui-angular/date-picker/src/date-range-picker/README.md
index 8bf2293762b..9e810b2e397 100644
--- a/projects/igniteui-angular/date-picker/src/date-range-picker/README.md
+++ b/projects/igniteui-angular/date-picker/src/date-range-picker/README.md
@@ -108,6 +108,7 @@ With projected inputs:
 ### Inputs
 | Name             | Type               | Description |
 |:-----------------|:-------------------|:------------|
+| disabled         | boolean            | Disables the picker, including date selection in an open calendar. |
 | doneButtonText   | string             | Changes the default text of the `done` button. It will show up only in `dialog` mode. Default value is `Done`. |
 | displayMonthsCount | number             | Sets the number displayed month views. Default is `2`. |
 | formatter        | function => string | Applies a custom formatter function on the selected or passed date. |
diff --git a/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.spec.ts b/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.spec.ts
index 10568830daa..2180892297f 100644
--- a/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.spec.ts
+++ b/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.spec.ts
@@ -510,6 +510,23 @@ describe('IgxDateRangePicker', () => {
             });
 
             describe('Properties & events tests', () => {
+                it('should prevent interaction with an open calendar while disabled', async () => {
+                    dateRange.open();
+                    await vi.runAllTimersAsync();
+                    detectChanges();
+                    const calendarElement = document.querySelector<HTMLElement>('igx-calendar')!;
+
+                    expect(calendarElement.inert).toBeFalsy();
+
+                    dateRange.setDisabledState(true);
+                    detectChanges();
+                    expect(calendarElement.inert).toBeTruthy();
+
+                    dateRange.setDisabledState(false);
+                    detectChanges();
+                    expect(calendarElement.inert).toBeFalsy();
+                });
+
                 it('should display placeholder', () => {
                     detectChanges();
                     expect(singleInputElement.nativeElement.placeholder).toEqual('MM/dd/yyyy - MM/dd/yyyy');
diff --git a/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts b/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts
index 07ec612e473..0df1e46a630 100644
--- a/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts
+++ b/projects/igniteui-angular/date-picker/src/date-range-picker/date-range-picker.component.ts
@@ -1344,6 +1344,7 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
     }
 
     private _initializeCalendarContainer(componentInstance: IgxCalendarContainerComponent) {
+        componentInstance.isDisabled = () => this.disabled;
         this._calendar = componentInstance.calendar;
         this._calendar.hasHeader = !this.isDropdown && !this.hideHeader;
         this._calendar.locale = this.locale;