From df3686106195750ea6bda60234f13d79e5435969 Mon Sep 17 00:00:00 2001
From: Bozhidara Pachilova <bozhidara.pp@gmail.com>
Date: Mon, 11 Aug 2025 16:30:23 +0300
Subject: [PATCH 01/20] feat(drp): use templates for calendar header parts as
 DP + test

---
 .../date-range-picker.component.spec.ts       | 69 ++++++++++++++++++-
 .../date-range-picker.component.ts            | 17 ++++-
 .../src/lib/date-range-picker/public_api.ts   |  6 +-
 3 files changed, 87 insertions(+), 5 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts
index 01d03dc791d..31cba4024fc 100644
--- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts
@@ -15,7 +15,7 @@ import { DateRangeType } from '../core/dates';
 import { IgxDateRangePickerComponent, IgxDateRangeEndComponent } from './public_api';
 import { AutoPositionStrategy, IgxOverlayService } from '../services/public_api';
 import { AnimationMetadata, AnimationOptions } from '@angular/animations';
-import { IgxCalendarComponent, WEEKDAYS } from '../calendar/public_api';
+import { IgxCalendarComponent, IgxCalendarHeaderTemplateDirective, IgxCalendarHeaderTitleTemplateDirective, IgxCalendarSubheaderTemplateDirective, WEEKDAYS } from '../calendar/public_api';
 import { Subject } from 'rxjs';
 import { AsyncPipe } from '@angular/common';
 import { AnimationService } from '../services/animation/animation';
@@ -44,6 +44,9 @@ const CSS_CLASS_OVERLAY_CONTENT = 'igx-overlay__content';
 const CSS_CLASS_DATE_RANGE = 'igx-date-range-picker';
 const CSS_CLASS_CALENDAR_DATE = 'igx-days-view__date';
 const CSS_CLASS_INACTIVE_DATE = 'igx-days-view__date--inactive';
+const CSS_CLASS_CALENDAR_HEADER = '.igx-calendar__header-date';
+const CSS_CLASS_CALENDAR_HEADER_TITLE = '.igx-calendar__header-year';
+const CSS_CLASS_CALENDAR_SUBHEADER = '.igx-calendar-picker__dates';
 
 describe('IgxDateRangePicker', () => {
     describe('Unit tests: ', () => {
@@ -1562,6 +1565,62 @@ describe('IgxDateRangePicker', () => {
                 expect(dateRange.locale).toEqual('en-US');
                 expect(dateRange.weekStart).toEqual(WEEKDAYS.FRIDAY);
             }));
+
+            it('Should render calendar with header in dialog mode by default', fakeAsync(() => {
+                fixture = TestBed.createComponent(DateRangeDefaultComponent);
+                fixture.detectChanges();
+                dateRange = fixture.componentInstance.dateRange;
+                dateRange.mode = 'dialog';
+                dateRange.open();
+                tick();
+                fixture.detectChanges();
+
+                expect(dateRange['_calendar'].hasHeader).toBeTrue();
+                const calendarHeader = fixture.debugElement.query(By.css(CSS_CLASS_CALENDAR_HEADER));
+                expect(calendarHeader).toBeTruthy('Calendar header should be present');
+            }));
+
+            describe('Templated Calendar Header', () => {
+                let dateRangeDebugEl: DebugElement;
+                beforeEach(fakeAsync(() => {
+                    TestBed.configureTestingModule({
+                        imports: [DateRangeTemplatesComponent]
+                    }).compileComponents();
+
+                    fixture = TestBed.createComponent(DateRangeTemplatesComponent);
+                    fixture.detectChanges();
+                    dateRangeDebugEl = fixture.debugElement.queryAll(By.directive(IgxDateRangePickerComponent))[0];
+                    dateRange = dateRangeDebugEl.componentInstance;
+                    dateRange.mode = 'dialog';
+                    dateRange.open();
+                    tick();
+                    fixture.detectChanges();
+                }));
+
+                it('Should use the custom template for header title', fakeAsync(() => {
+                    const headerTitleElement = dateRangeDebugEl.query(By.css(CSS_CLASS_CALENDAR_HEADER_TITLE));
+                    expect(headerTitleElement).toBeTruthy('Header title element should be present');
+                    if (headerTitleElement) {
+                        expect(headerTitleElement.nativeElement.textContent.trim()).toBe('Test header title');
+                    }
+                }));
+
+                it('Should use the custom template for header', fakeAsync(() => {
+                    const headerElement = dateRangeDebugEl.query(By.css(CSS_CLASS_CALENDAR_HEADER));
+                    expect(headerElement).toBeTruthy('Header element should be present');
+                    if (headerElement) {
+                        expect(headerElement.nativeElement.textContent.trim()).toBe('Test header');
+                    }
+                }));
+
+                it('Should use the custom template for subheader', fakeAsync(() => {
+                    const headerElement = dateRangeDebugEl.query(By.css(CSS_CLASS_CALENDAR_SUBHEADER));
+                    expect(headerElement).toBeTruthy('Subheader element should be present');
+                    if (headerElement) {
+                        expect(headerElement.nativeElement.textContent.trim()).toBe('Test subheader');
+                    }
+                }));
+            });
         });
     });
 });
@@ -1684,6 +1743,9 @@ export class DateRangeCustomComponent extends DateRangeTestComponent {
         <igx-picker-toggle igxPrefix>
             <igx-icon>flight_takeoff</igx-icon>
         </igx-picker-toggle>
+        <ng-template igxCalendarHeader let-formatCalendar>Test header</ng-template>
+        <ng-template igxCalendarHeaderTitle let-formatCalendar>Test header title</ng-template>
+        <ng-template igxCalendarSubheader let-formatCalendar>Test subheader</ng-template>
     </igx-date-range-picker>
     <igx-date-range-picker #suffixSingleRange>
         <igx-picker-toggle igxSuffix>
@@ -1727,7 +1789,10 @@ export class DateRangeCustomComponent extends DateRangeTestComponent {
         IgxInputDirective,
         IgxDateTimeEditorDirective,
         IgxPrefixDirective,
-        IgxSuffixDirective
+        IgxSuffixDirective,
+        IgxCalendarHeaderTemplateDirective,
+        IgxCalendarHeaderTitleTemplateDirective,
+        IgxCalendarSubheaderTemplateDirective
     ]
 })
 export class DateRangeTemplatesComponent extends DateRangeTestComponent {
diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts
index e6b5edca0ba..f0c66d5bb64 100644
--- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts
+++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts
@@ -13,7 +13,7 @@ import {
 import { fromEvent, merge, MonoTypeOperatorFunction, noop, Subscription } from 'rxjs';
 import { filter, takeUntil } from 'rxjs/operators';
 
-import { CalendarSelection, IgxCalendarComponent } from '../calendar/public_api';
+import { CalendarSelection, IgxCalendarComponent, IgxCalendarHeaderTemplateDirective, IgxCalendarHeaderTitleTemplateDirective, IgxCalendarSubheaderTemplateDirective } from '../calendar/public_api';
 import { DateRangeType } from '../core/dates';
 import { DateRangePickerResourceStringsEN, IDateRangePickerResourceStrings } from '../core/i18n/date-range-picker-resources';
 import { IBaseCancelableBrowserEventArgs, isDate, parseDate, PlatformUtil } from '../core/utils';
@@ -311,6 +311,16 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
     @ContentChild(IgxDateRangeSeparatorDirective, { read: TemplateRef })
     public dateSeparatorTemplate: TemplateRef<any>;
 
+
+    @ContentChild(IgxCalendarHeaderTitleTemplateDirective)
+    private headerTitleTemplate: IgxCalendarHeaderTitleTemplateDirective;
+
+    @ContentChild(IgxCalendarHeaderTemplateDirective)
+    private headerTemplate: IgxCalendarHeaderTemplateDirective;
+
+    @ContentChild(IgxCalendarSubheaderTemplateDirective)
+    private subheaderTemplate: IgxCalendarSubheaderTemplateDirective;
+
     /** @hidden @internal */
     public get dateSeparator(): string {
         if (this._dateSeparator === null) {
@@ -1080,13 +1090,16 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
 
     private _initializeCalendarContainer(componentInstance: IgxCalendarContainerComponent) {
         this._calendar = componentInstance.calendar;
-        this.calendar.hasHeader = false;
+        this.calendar.hasHeader = !this.isDropdown;
         this.calendar.locale = this.locale;
         this.calendar.selection = CalendarSelection.RANGE;
         this.calendar.weekStart = this.weekStart;
         this.calendar.hideOutsideDays = this.hideOutsideDays;
         this.calendar.monthsViewNumber = this.displayMonthsCount;
         this.calendar.showWeekNumbers = this.showWeekNumbers;
+        this._calendar.headerTitleTemplate = this.headerTitleTemplate;
+        this._calendar.headerTemplate = this.headerTemplate;
+        this._calendar.subheaderTemplate = this.subheaderTemplate;
         this.calendar.selected.pipe(takeUntil(this._destroy$)).subscribe((ev: Date[]) => this.handleSelection(ev));
 
         componentInstance.mode = this.mode;
diff --git a/projects/igniteui-angular/src/lib/date-range-picker/public_api.ts b/projects/igniteui-angular/src/lib/date-range-picker/public_api.ts
index 2b0e4fa2367..f25a96a786a 100644
--- a/projects/igniteui-angular/src/lib/date-range-picker/public_api.ts
+++ b/projects/igniteui-angular/src/lib/date-range-picker/public_api.ts
@@ -1,3 +1,4 @@
+import { IgxCalendarHeaderTemplateDirective, IgxCalendarHeaderTitleTemplateDirective, IgxCalendarSubheaderTemplateDirective } from '../calendar/calendar.directives';
 import { IgxPickerToggleComponent } from '../date-common/picker-icons.common';
 import { IgxHintDirective } from '../directives/hint/hint.directive';
 import { IgxLabelDirective } from '../directives/label/label.directive';
@@ -19,5 +20,8 @@ export const IGX_DATE_RANGE_PICKER_DIRECTIVES = [
     IgxLabelDirective,
     IgxPrefixDirective,
     IgxSuffixDirective,
-    IgxHintDirective
+    IgxHintDirective,
+    IgxCalendarHeaderTemplateDirective,
+    IgxCalendarSubheaderTemplateDirective,
+    IgxCalendarHeaderTitleTemplateDirective
 ] as const;

From 0fe1c0f4e8883e2aa63c9fafe1cc401bc5c2b4be Mon Sep 17 00:00:00 2001
From: Bozhidara Pachilova <bozhidara.pp@gmail.com>
Date: Mon, 11 Aug 2025 16:48:07 +0300
Subject: [PATCH 02/20] chore(dp): add calendar header templates to public api
 dirs array

---
 projects/igniteui-angular/src/lib/date-picker/public_api.ts | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/projects/igniteui-angular/src/lib/date-picker/public_api.ts b/projects/igniteui-angular/src/lib/date-picker/public_api.ts
index ce993452a99..f6d632c3cce 100644
--- a/projects/igniteui-angular/src/lib/date-picker/public_api.ts
+++ b/projects/igniteui-angular/src/lib/date-picker/public_api.ts
@@ -1,3 +1,4 @@
+import { IgxCalendarHeaderTemplateDirective, IgxCalendarHeaderTitleTemplateDirective, IgxCalendarSubheaderTemplateDirective } from '../calendar/calendar.directives';
 import { IgxPickerActionsDirective, IgxPickerClearComponent, IgxPickerToggleComponent } from '../date-common/picker-icons.common';
 import { IgxHintDirective } from '../directives/hint/hint.directive';
 import { IgxLabelDirective } from '../directives/label/label.directive';
@@ -16,5 +17,8 @@ export const IGX_DATE_PICKER_DIRECTIVES = [
     IgxLabelDirective,
     IgxPrefixDirective,
     IgxSuffixDirective,
-    IgxHintDirective
+    IgxHintDirective,
+    IgxCalendarHeaderTemplateDirective,
+    IgxCalendarSubheaderTemplateDirective,
+    IgxCalendarHeaderTitleTemplateDirective
 ] as const;

From e7553e7d2ecf22bf49954e87dbd79657d9f8a558 Mon Sep 17 00:00:00 2001
From: Bozhidara Pachilova <bozhidara.pp@gmail.com>
Date: Mon, 11 Aug 2025 17:06:48 +0300
Subject: [PATCH 03/20] refactor(picker-base): port headerOrientation prop in
 base class+test for TP,DRP

---
 .../lib/date-common/picker-base.directive.ts  | 13 ++++++++-
 .../lib/date-picker/date-picker.component.ts  | 13 ---------
 .../date-range-picker.component.spec.ts       | 26 ++++++++++++++++-
 .../date-range-picker.component.ts            |  1 +
 .../time-picker/time-picker.component.spec.ts | 29 ++++++++++++++++++-
 .../lib/time-picker/time-picker.component.ts  | 13 ---------
 6 files changed, 66 insertions(+), 29 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts b/projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts
index e32b343d088..fdd90e1ab3d 100644
--- a/projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts
+++ b/projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts
@@ -14,7 +14,7 @@ import { IBaseCancelableBrowserEventArgs, IBaseEventArgs } from '../core/utils';
 import { IgxOverlayOutletDirective } from '../directives/toggle/toggle.directive';
 import { OverlaySettings } from '../services/overlay/utilities';
 import { IgxPickerToggleComponent } from './picker-icons.common';
-import { PickerInteractionMode } from './types';
+import { PickerHeaderOrientation, PickerInteractionMode } from './types';
 import { WEEKDAYS } from '../calendar/calendar';
 import { DateRange } from '../date-range-picker/date-range-picker-inputs.common';
 import { IGX_INPUT_GROUP_TYPE, IgxInputGroupType } from '../input-group/inputGroupType';
@@ -78,6 +78,17 @@ export abstract class PickerBaseDirective implements IToggleView, EditorProvider
     @Input()
     public mode: PickerInteractionMode = PickerInteractionMode.DropDown;
 
+    /**
+     * Gets/Sets the orientation of the `IgxDatePickerComponent` header.
+     *
+     *  @example
+     * ```html
+     * <igx-date-picker headerOrientation="vertical"></igx-date-picker>
+     * ```
+     */
+    @Input()
+    public headerOrientation: PickerHeaderOrientation = PickerHeaderOrientation.Horizontal;
+
     /**
      * Overlay settings used to display the pop-up element.
      *
diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
index a3a6935af7d..3d1f3d1588e 100644
--- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
+++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
@@ -51,7 +51,6 @@ import { IBaseCancelableBrowserEventArgs, isDate, PlatformUtil } from '../core/u
 import { IgxCalendarContainerComponent } from '../date-common/calendar-container/calendar-container.component';
 import { PickerBaseDirective } from '../date-common/picker-base.directive';
 import { IgxPickerActionsDirective, IgxPickerClearComponent } from '../date-common/public_api';
-import { PickerHeaderOrientation } from '../date-common/types';
 import { DateTimeUtil } from '../date-common/util/date-time.util';
 import { DatePart, DatePartDeltas, IgxDateTimeEditorDirective } from '../directives/date-time-editor/public_api';
 import { IgxOverlayOutletDirective } from '../directives/toggle/toggle.directive';
@@ -162,17 +161,6 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
     @Input()
     public formatter: (val: Date) => string;
 
-    /**
-     * Gets/Sets the orientation of the `IgxDatePickerComponent` header.
-     *
-     *  @example
-     * ```html
-     * <igx-date-picker headerOrientation="vertical"></igx-date-picker>
-     * ```
-     */
-    @Input()
-    public headerOrientation: PickerHeaderOrientation = PickerHeaderOrientation.Horizontal;
-
     /**
      * Gets/Sets the today button's label.
      *
@@ -989,7 +977,6 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
         this.setCalendarViewDate();
 
         componentInstance.mode = this.mode;
-        // componentInstance.headerOrientation = this.headerOrientation;
         componentInstance.closeButtonLabel = this.cancelButtonLabel;
         componentInstance.todayButtonLabel = this.todayButtonLabel;
         componentInstance.pickerActions = this.pickerActions;
diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts
index 31cba4024fc..541cb58bd00 100644
--- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts
@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed, fakeAsync, tick, waitForAsync, flush } from '@angular/core/testing';
 import { Component, OnInit, ViewChild, DebugElement, ChangeDetectionStrategy } from '@angular/core';
 import { IgxInputDirective, IgxInputState, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective } from '../input-group/public_api';
-import { PickerInteractionMode } from '../date-common/types';
+import { PickerHeaderOrientation, PickerInteractionMode } from '../date-common/types';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { FormsModule, ReactiveFormsModule, UntypedFormBuilder, UntypedFormControl, Validators } from '@angular/forms';
 import { By } from '@angular/platform-browser';
@@ -1580,6 +1580,30 @@ describe('IgxDateRangePicker', () => {
                 expect(calendarHeader).toBeTruthy('Calendar header should be present');
             }));
 
+            it('should set calendar headerOrientation prop in dialog mode', fakeAsync(() => {
+                fixture = TestBed.createComponent(DateRangeDefaultComponent);
+                fixture.detectChanges();
+                dateRange = fixture.componentInstance.dateRange;
+
+                dateRange.mode = 'dialog';
+                dateRange.open();
+                tick();
+                fixture.detectChanges();
+
+                expect(dateRange['_calendar'].headerOrientation).toBe(PickerHeaderOrientation.Horizontal);
+
+                dateRange.close();
+                tick();
+                fixture.detectChanges();
+
+                dateRange.headerOrientation = PickerHeaderOrientation.Vertical;
+                dateRange.open();
+                tick();
+                fixture.detectChanges();
+
+                expect(dateRange['_calendar'].headerOrientation).toBe(PickerHeaderOrientation.Vertical);
+            }));
+
             describe('Templated Calendar Header', () => {
                 let dateRangeDebugEl: DebugElement;
                 beforeEach(fakeAsync(() => {
diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts
index f0c66d5bb64..e9fb6f12aee 100644
--- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts
+++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts
@@ -1100,6 +1100,7 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
         this._calendar.headerTitleTemplate = this.headerTitleTemplate;
         this._calendar.headerTemplate = this.headerTemplate;
         this._calendar.subheaderTemplate = this.subheaderTemplate;
+        this._calendar.headerOrientation = this.headerOrientation;
         this.calendar.selected.pipe(takeUntil(this._destroy$)).subscribe((ev: Date[]) => this.handleSelection(ev));
 
         componentInstance.mode = this.mode;
diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts
index fa12ed3f60a..4fcb31e7917 100644
--- a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts
@@ -37,6 +37,7 @@ const CSS_CLASS_HEADER_HOUR = '.igx-time-picker__header-hour';
 const CSS_CLASS_OVERLAY_WRAPPER = 'igx-overlay__wrapper';
 const TIME_PICKER_TOGGLE_ICON = 'access_time';
 const TIME_PICKER_CLEAR_ICON = 'clear';
+const CSS_CLASS_TIME_PICKER_VERTICAL = '.igx-time-picker--vertical';
 
 describe('IgxTimePicker', () => {
     let timePicker: IgxTimePickerComponent;
@@ -465,7 +466,7 @@ describe('IgxTimePicker', () => {
     });
 
     describe('Interaction tests', () => {
-        let timePickerElement: DebugElement;
+        let timePickerElement: HTMLElement;
         let timePickerDebElement: DebugElement;
         let inputGroup: DebugElement;
         let hourColumn: DebugElement;
@@ -1140,6 +1141,7 @@ describe('IgxTimePicker', () => {
                 fixture = TestBed.createComponent(IgxTimePickerTestComponent);
                 fixture.detectChanges();
                 timePicker = fixture.componentInstance.timePicker;
+                timePickerDebElement = fixture.debugElement.query(By.css(CSS_CLASS_TIMEPICKER));
                 timePickerElement = fixture.debugElement.query(By.css(CSS_CLASS_TIMEPICKER)).nativeElement;
                 inputGroup = fixture.debugElement.query(By.css(`.${CSS_CLASS_INPUTGROUP}`));
                 hourColumn = fixture.debugElement.query(By.css(`.${CSS_CLASS_HOURLIST}`));
@@ -1570,6 +1572,31 @@ describe('IgxTimePicker', () => {
                 inputEl = fixture.nativeElement.querySelector(CSS_CLASS_INPUT);
                 expect(inputEl.placeholder).toEqual('sample placeholder');
             }));
+
+            it('should set headerOrientation prop in dialog mode', fakeAsync(() => {
+                timePicker.mode = PickerInteractionMode.Dialog;
+                timePicker.open();
+                tick();
+                fixture.detectChanges();
+                expect(timePicker.headerOrientation).toEqual('horizontal');
+                let dialogDivVertical = timePickerDebElement.query(By.css(CSS_CLASS_TIME_PICKER_VERTICAL));
+                expect(dialogDivVertical).toBeNull();
+
+                timePicker.close();
+                tick();
+                fixture.detectChanges();
+
+                timePicker.mode = PickerInteractionMode.Dialog;
+                timePicker.headerOrientation = 'vertical';
+                fixture.detectChanges();
+
+                timePicker.open();
+                tick();
+                fixture.detectChanges();
+
+                dialogDivVertical = timePickerDebElement.query(By.css(CSS_CLASS_TIME_PICKER_VERTICAL));
+                expect(dialogDivVertical).not.toBeNull();
+            }));
         });
 
         describe('Keyboard navigation', () => {
diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts
index c5174302fec..d70f0bddb6a 100644
--- a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts
+++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.ts
@@ -239,19 +239,6 @@ export class IgxTimePickerComponent extends PickerBaseDirective
     @Input()
     public formatter: (val: Date) => string;
 
-    /**
-     * Sets the orientation of the picker's header.
-     *
-     * @remarks
-     * Available in dialog mode only. Default value is `horizontal`.
-     *
-     * ```html
-     * <igx-time-picker [headerOrientation]="'vertical'"></igx-time-picker>
-     * ```
-     */
-    @Input()
-    public headerOrientation: PickerHeaderOrientation = PickerHeaderOrientation.Horizontal;
-
     /** @hidden @internal */
     @Input({ transform: booleanAttribute })
     public readOnly = false;

From 999a9151b1a4b296a7683f22620eeb6af6798f94 Mon Sep 17 00:00:00 2001
From: Bozhidara Pachilova <bozhidara.pp@gmail.com>
Date: Mon, 11 Aug 2025 17:29:36 +0300
Subject: [PATCH 04/20] feat(picker-base): add hideHeader prop + tests

---
 .../lib/date-common/picker-base.directive.ts  | 11 +++++++++
 .../date-picker/date-picker.component.spec.ts | 14 +++++++++++
 .../lib/date-picker/date-picker.component.ts  |  2 +-
 .../date-range-picker.component.spec.ts       | 23 ++++++++++++++++---
 .../date-range-picker.component.ts            |  2 +-
 .../time-picker/time-picker.component.html    |  2 +-
 .../time-picker/time-picker.component.spec.ts | 14 +++++++++++
 7 files changed, 62 insertions(+), 6 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts b/projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts
index fdd90e1ab3d..9d3a4db6214 100644
--- a/projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts
+++ b/projects/igniteui-angular/src/lib/date-common/picker-base.directive.ts
@@ -89,6 +89,17 @@ export abstract class PickerBaseDirective implements IToggleView, EditorProvider
     @Input()
     public headerOrientation: PickerHeaderOrientation = PickerHeaderOrientation.Horizontal;
 
+    /**
+     * Gets/Sets whether the header is hidden in dialog mode.
+     *
+     *  @example
+     * ```html
+     * <igx-date-picker mode="dialog" [hideHeader]="true"></igx-date-picker>
+     * ```
+     */
+    @Input({ transform: booleanAttribute })
+    public hideHeader = false;
+
     /**
      * Overlay settings used to display the pop-up element.
      *
diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts
index d208aed8cd2..e9b73b1df9e 100644
--- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts
@@ -32,6 +32,7 @@ const DATE_PICKER_CLEAR_ICON = 'clear';
 
 const CSS_CLASS_INPUT_GROUP_REQUIRED = 'igx-input-group--required';
 const CSS_CLASS_INPUT_GROUP_INVALID = 'igx-input-group--invalid';
+const CSS_CLASS_CALENDAR_HEADER = '.igx-calendar__header';
 
 describe('IgxDatePicker', () => {
     describe('Integration tests', () => {
@@ -66,6 +67,19 @@ describe('IgxDatePicker', () => {
                 expect(suffix).toHaveSize(1);
                 expect(suffix[0].nativeElement.innerText).toEqual(DATE_PICKER_CLEAR_ICON);
             });
+
+            it('should hide the calendar header if hideHeader is true in dialog mode', fakeAsync(() => {
+                const datePicker = fixture.componentInstance.datePicker;
+                datePicker.mode = 'dialog';
+                datePicker.hideHeader = true;
+                datePicker.open();
+                tick();
+                fixture.detectChanges();
+
+                expect(datePicker['_calendar'].hasHeader).toBeFalse();
+                const calendarHeader = fixture.debugElement.query(By.css(CSS_CLASS_CALENDAR_HEADER));
+                expect(calendarHeader).toBeFalsy('Calendar header should not be present');
+            }));
         });
 
         describe('Events', () => {
diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
index 3d1f3d1588e..ec948983b26 100644
--- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
+++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
@@ -954,7 +954,7 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
 
     private _initializeCalendarContainer(componentInstance: IgxCalendarContainerComponent) {
         this._calendar = componentInstance.calendar;
-        this._calendar.hasHeader = !this.isDropdown;
+        this._calendar.hasHeader = !this.isDropdown && !this.hideHeader;
         this._calendar.formatOptions = this.pickerCalendarFormat;
         this._calendar.formatViews = this.pickerFormatViews;
         this._calendar.locale = this.locale;
diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts
index 541cb58bd00..c86068504f5 100644
--- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts
@@ -44,9 +44,10 @@ const CSS_CLASS_OVERLAY_CONTENT = 'igx-overlay__content';
 const CSS_CLASS_DATE_RANGE = 'igx-date-range-picker';
 const CSS_CLASS_CALENDAR_DATE = 'igx-days-view__date';
 const CSS_CLASS_INACTIVE_DATE = 'igx-days-view__date--inactive';
-const CSS_CLASS_CALENDAR_HEADER = '.igx-calendar__header-date';
+const CSS_CLASS_CALENDAR_HEADER_TEMPLATE = '.igx-calendar__header-date';
 const CSS_CLASS_CALENDAR_HEADER_TITLE = '.igx-calendar__header-year';
 const CSS_CLASS_CALENDAR_SUBHEADER = '.igx-calendar-picker__dates';
+const CSS_CLASS_CALENDAR_HEADER = '.igx-calendar__header';
 
 describe('IgxDateRangePicker', () => {
     describe('Unit tests: ', () => {
@@ -1576,7 +1577,7 @@ describe('IgxDateRangePicker', () => {
                 fixture.detectChanges();
 
                 expect(dateRange['_calendar'].hasHeader).toBeTrue();
-                const calendarHeader = fixture.debugElement.query(By.css(CSS_CLASS_CALENDAR_HEADER));
+                const calendarHeader = fixture.debugElement.query(By.css(CSS_CLASS_CALENDAR_HEADER_TEMPLATE));
                 expect(calendarHeader).toBeTruthy('Calendar header should be present');
             }));
 
@@ -1604,6 +1605,22 @@ describe('IgxDateRangePicker', () => {
                 expect(dateRange['_calendar'].headerOrientation).toBe(PickerHeaderOrientation.Vertical);
             }));
 
+            it('should hide the calendar header if hideHeader is true in dialog mode', fakeAsync(() => {
+                fixture = TestBed.createComponent(DateRangeDefaultComponent);
+                fixture.detectChanges();
+                dateRange = fixture.componentInstance.dateRange;
+
+                dateRange.mode = 'dialog';
+                dateRange.hideHeader = true;
+                dateRange.open();
+                tick();
+                fixture.detectChanges();
+
+                expect(dateRange['_calendar'].hasHeader).toBeFalse();
+                const calendarHeader = fixture.debugElement.query(By.css(CSS_CLASS_CALENDAR_HEADER));
+                expect(calendarHeader).toBeFalsy('Calendar header should not be present');
+            }));
+
             describe('Templated Calendar Header', () => {
                 let dateRangeDebugEl: DebugElement;
                 beforeEach(fakeAsync(() => {
@@ -1630,7 +1647,7 @@ describe('IgxDateRangePicker', () => {
                 }));
 
                 it('Should use the custom template for header', fakeAsync(() => {
-                    const headerElement = dateRangeDebugEl.query(By.css(CSS_CLASS_CALENDAR_HEADER));
+                    const headerElement = dateRangeDebugEl.query(By.css(CSS_CLASS_CALENDAR_HEADER_TEMPLATE));
                     expect(headerElement).toBeTruthy('Header element should be present');
                     if (headerElement) {
                         expect(headerElement.nativeElement.textContent.trim()).toBe('Test header');
diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts
index e9fb6f12aee..59aba0e39fa 100644
--- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts
+++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts
@@ -1090,7 +1090,7 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
 
     private _initializeCalendarContainer(componentInstance: IgxCalendarContainerComponent) {
         this._calendar = componentInstance.calendar;
-        this.calendar.hasHeader = !this.isDropdown;
+        this._calendar.hasHeader = !this.isDropdown && !this.hideHeader;
         this.calendar.locale = this.locale;
         this.calendar.selection = CalendarSelection.RANGE;
         this.calendar.weekStart = this.weekStart;
diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.html b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.html
index 79cd4288ccd..c0358f97a63 100644
--- a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.html
+++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.html
@@ -62,7 +62,7 @@
 <div #toggleDirective="toggle" igxToggle role="dialog" class="igx-time-picker"
     [ngClass]="{'igx-time-picker--dropdown': isDropdown, 'igx-time-picker--vertical': isVertical && !isDropdown}">
     <div class="igx-time-picker__main">
-        @if (!isDropdown) {
+        @if (!this.isDropdown && !this.hideHeader) {
             <div class="igx-time-picker__header">
                 <h2 class="igx-time-picker__header-hour">
                     <span>{{ selectedDate | timeFormatPipe }}</span>
diff --git a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts
index 4fcb31e7917..8eafb66af26 100644
--- a/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/time-picker/time-picker.component.spec.ts
@@ -34,6 +34,7 @@ const CSS_CLASS_SECONDSLIST = '.igx-time-picker__secondsList';
 const CSS_CLASS_AMPMLIST = 'igx-time-picker__ampmList';
 const CSS_CLASS_SELECTED_ITEM = '.igx-time-picker__item--selected';
 const CSS_CLASS_HEADER_HOUR = '.igx-time-picker__header-hour';
+const CSS_CLASS_HEADER = '.igx-time-picker__header';
 const CSS_CLASS_OVERLAY_WRAPPER = 'igx-overlay__wrapper';
 const TIME_PICKER_TOGGLE_ICON = 'access_time';
 const TIME_PICKER_CLEAR_ICON = 'clear';
@@ -1597,6 +1598,19 @@ describe('IgxTimePicker', () => {
                 dialogDivVertical = timePickerDebElement.query(By.css(CSS_CLASS_TIME_PICKER_VERTICAL));
                 expect(dialogDivVertical).not.toBeNull();
             }));
+
+            it('should hide the calendar header if hideHeader is true in dialog mode', fakeAsync(() => {
+                timePicker.mode = PickerInteractionMode.Dialog;
+                timePicker.hideHeader = true;
+                fixture.detectChanges();
+
+                timePicker.open();
+                tick();
+                fixture.detectChanges();
+
+                const header = fixture.debugElement.query(By.css(CSS_CLASS_HEADER));
+                expect(header).toBeNull();
+            }));
         });
 
         describe('Keyboard navigation', () => {

From 37fd4d4da3d964df03bfa2b622b8314197a370c0 Mon Sep 17 00:00:00 2001
From: Bozhidara Pachilova <bozhidara.pp@gmail.com>
Date: Mon, 11 Aug 2025 18:05:45 +0300
Subject: [PATCH 05/20] feat(dp, drp): add orientation property + tests

---
 .../src/lib/date-common/types.ts              |  7 +++++
 .../date-picker/date-picker.component.spec.ts | 25 +++++++++++++++++-
 .../lib/date-picker/date-picker.component.ts  | 11 ++++++++
 .../date-range-picker.component.spec.ts       | 26 ++++++++++++++++++-
 .../date-range-picker.component.ts            | 11 ++++++++
 5 files changed, 78 insertions(+), 2 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/date-common/types.ts b/projects/igniteui-angular/src/lib/date-common/types.ts
index 1814dbeac77..29b8f505d6f 100644
--- a/projects/igniteui-angular/src/lib/date-common/types.ts
+++ b/projects/igniteui-angular/src/lib/date-common/types.ts
@@ -5,6 +5,13 @@ export const PickerHeaderOrientation = {
 } as const;
 export type PickerHeaderOrientation = (typeof PickerHeaderOrientation)[keyof typeof PickerHeaderOrientation];
 
+/** Calendar orientation. */
+export const PickerCalendarOrientation = {
+    Horizontal: 'horizontal',
+    Vertical: 'vertical'
+} as const;
+export type PickerCalendarOrientation = (typeof PickerCalendarOrientation)[keyof typeof PickerCalendarOrientation];
+
 /**
  * This enumeration is used to configure whether the date/time picker has an editable input with drop down
  * or is readonly - the date/time is selected only through a dialog.
diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts
index e9b73b1df9e..c42fcac06bd 100644
--- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts
@@ -14,7 +14,7 @@ import {
 } from '../services/public_api';
 import { Component, DebugElement, ElementRef, EventEmitter, QueryList, Renderer2, ViewChild } from '@angular/core';
 import { By } from '@angular/platform-browser';
-import { PickerHeaderOrientation, PickerInteractionMode } from '../date-common/types';
+import { PickerCalendarOrientation, PickerHeaderOrientation, PickerInteractionMode } from '../date-common/types';
 import { DatePart } from '../directives/date-time-editor/date-time-editor.common';
 import { DateRangeDescriptor, DateRangeType } from '../core/dates';
 import { IgxOverlayOutletDirective } from '../directives/toggle/toggle.directive';
@@ -33,6 +33,7 @@ const DATE_PICKER_CLEAR_ICON = 'clear';
 const CSS_CLASS_INPUT_GROUP_REQUIRED = 'igx-input-group--required';
 const CSS_CLASS_INPUT_GROUP_INVALID = 'igx-input-group--invalid';
 const CSS_CLASS_CALENDAR_HEADER = '.igx-calendar__header';
+const CSS_CLASS_CALENDAR_WRAPPER_VERTICAL = 'igx-calendar__wrapper--vertical';
 
 describe('IgxDatePicker', () => {
     describe('Integration tests', () => {
@@ -80,6 +81,28 @@ describe('IgxDatePicker', () => {
                 const calendarHeader = fixture.debugElement.query(By.css(CSS_CLASS_CALENDAR_HEADER));
                 expect(calendarHeader).toBeFalsy('Calendar header should not be present');
             }));
+
+            it('should set calendar orientation property', fakeAsync(() => {
+                const datePicker = fixture.componentInstance.datePicker;
+                datePicker.orientation = PickerCalendarOrientation.Horizontal;
+                datePicker.open();
+                tick();
+                fixture.detectChanges();
+
+                expect(datePicker['_calendar'].orientation).toEqual(PickerCalendarOrientation.Horizontal.toString());
+                expect(datePicker['_calendar'].wrapper.nativeElement).not.toHaveClass(CSS_CLASS_CALENDAR_WRAPPER_VERTICAL);
+                datePicker.close();
+                tick();
+                fixture.detectChanges();
+
+                datePicker.orientation = PickerCalendarOrientation.Vertical;
+                datePicker.open();
+                tick();
+                fixture.detectChanges();
+
+                expect(datePicker['_calendar'].orientation).toEqual(PickerCalendarOrientation.Vertical.toString());
+                expect(datePicker['_calendar'].wrapper.nativeElement).toHaveClass(CSS_CLASS_CALENDAR_WRAPPER_VERTICAL);
+            }));
         });
 
         describe('Events', () => {
diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
index ec948983b26..e030735e37f 100644
--- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
+++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
@@ -67,6 +67,7 @@ import { IgxIconComponent } from '../icon/icon.component';
 import { IgxTextSelectionDirective } from '../directives/text-selection/text-selection.directive';
 import { getCurrentResourceStrings } from '../core/i18n/resources';
 import { fadeIn, fadeOut } from 'igniteui-angular/animations';
+import { PickerCalendarOrientation } from '../date-common/types';
 
 let NEXT_ID = 0;
 
@@ -139,6 +140,15 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
     @Input()
     public displayMonthsCount = 1;
 
+    /**
+    * Gets/Sets the orientation of the multiple months displayed in the picker's calendar's days view.
+    *
+    * @example
+    * <igx-date-picker orientation="vertical"></igx-date-picker>
+    */
+    @Input()
+    public orientation: PickerCalendarOrientation = PickerCalendarOrientation.Horizontal;
+
     /**
      * Show/hide week numbers
      *
@@ -967,6 +977,7 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
         this._calendar.hideOutsideDays = this.hideOutsideDays;
         this._calendar.monthsViewNumber = this.displayMonthsCount;
         this._calendar.showWeekNumbers = this.showWeekNumbers;
+        this._calendar.orientation = this.orientation;
         this._calendar.selected.pipe(takeUntil(this._destroy$)).subscribe((ev: Date) => this.handleSelection(ev));
         this.setDisabledDates();
 
diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts
index c86068504f5..734449cd530 100644
--- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts
@@ -1,7 +1,7 @@
 import { ComponentFixture, TestBed, fakeAsync, tick, waitForAsync, flush } from '@angular/core/testing';
 import { Component, OnInit, ViewChild, DebugElement, ChangeDetectionStrategy } from '@angular/core';
 import { IgxInputDirective, IgxInputState, IgxLabelDirective, IgxPrefixDirective, IgxSuffixDirective } from '../input-group/public_api';
-import { PickerHeaderOrientation, PickerInteractionMode } from '../date-common/types';
+import { PickerCalendarOrientation, PickerHeaderOrientation, PickerInteractionMode } from '../date-common/types';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { FormsModule, ReactiveFormsModule, UntypedFormBuilder, UntypedFormControl, Validators } from '@angular/forms';
 import { By } from '@angular/platform-browser';
@@ -48,6 +48,7 @@ const CSS_CLASS_CALENDAR_HEADER_TEMPLATE = '.igx-calendar__header-date';
 const CSS_CLASS_CALENDAR_HEADER_TITLE = '.igx-calendar__header-year';
 const CSS_CLASS_CALENDAR_SUBHEADER = '.igx-calendar-picker__dates';
 const CSS_CLASS_CALENDAR_HEADER = '.igx-calendar__header';
+const CSS_CLASS_CALENDAR_WRAPPER_VERTICAL = 'igx-calendar__wrapper--vertical';
 
 describe('IgxDateRangePicker', () => {
     describe('Unit tests: ', () => {
@@ -1621,6 +1622,29 @@ describe('IgxDateRangePicker', () => {
                 expect(calendarHeader).toBeFalsy('Calendar header should not be present');
             }));
 
+            it('should set calendar orientation property', fakeAsync(() => {
+                fixture = TestBed.createComponent(DateRangeDefaultComponent);
+                fixture.detectChanges();
+                dateRange = fixture.componentInstance.dateRange;
+                dateRange.open();
+                tick();
+                fixture.detectChanges();
+
+                expect(dateRange['_calendar'].orientation).toEqual(PickerCalendarOrientation.Horizontal.toString());
+                expect(dateRange['_calendar'].wrapper.nativeElement).not.toHaveClass(CSS_CLASS_CALENDAR_WRAPPER_VERTICAL);
+                dateRange.close();
+                tick();
+                fixture.detectChanges();
+
+                dateRange.orientation = PickerCalendarOrientation.Vertical;
+                dateRange.open();
+                tick();
+                fixture.detectChanges();
+
+                expect(dateRange['_calendar'].orientation).toEqual(PickerCalendarOrientation.Vertical.toString());
+                expect(dateRange['_calendar'].wrapper.nativeElement).toHaveClass(CSS_CLASS_CALENDAR_WRAPPER_VERTICAL);
+            }));
+
             describe('Templated Calendar Header', () => {
                 let dateRangeDebugEl: DebugElement;
                 beforeEach(fakeAsync(() => {
diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts
index 59aba0e39fa..d316fc201aa 100644
--- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts
+++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts
@@ -35,6 +35,7 @@ import { IgxPrefixDirective } from '../directives/prefix/prefix.directive';
 import { IgxIconComponent } from '../icon/icon.component';
 import { getCurrentResourceStrings } from '../core/i18n/resources';
 import { fadeIn, fadeOut } from 'igniteui-angular/animations';
+import { PickerCalendarOrientation } from '../date-common/types';
 
 const SingleInputDatesConcatenationString = ' - ';
 
@@ -93,6 +94,15 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
     @Input()
     public displayMonthsCount = 2;
 
+    /**
+     * Gets/Sets the orientation of the multiple months displayed in the picker's calendar's days view.
+     *
+     * @example
+     * <igx-date-range-picker orientation="vertical"></igx-date-range-picker>
+     */
+    @Input()
+    public orientation: PickerCalendarOrientation = PickerCalendarOrientation.Horizontal;
+
     /**
      * Gets/Sets whether dates that are not part of the current month will be displayed.
      *
@@ -1101,6 +1111,7 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
         this._calendar.headerTemplate = this.headerTemplate;
         this._calendar.subheaderTemplate = this.subheaderTemplate;
         this._calendar.headerOrientation = this.headerOrientation;
+        this._calendar.orientation = this.orientation;
         this.calendar.selected.pipe(takeUntil(this._destroy$)).subscribe((ev: Date[]) => this.handleSelection(ev));
 
         componentInstance.mode = this.mode;

From b94049e03c78b738abd099e625f1686fdd06f835 Mon Sep 17 00:00:00 2001
From: Bozhidara Pachilova <bozhidara.pp@gmail.com>
Date: Mon, 11 Aug 2025 18:24:35 +0300
Subject: [PATCH 06/20] feat(drp): limit displayMonthsCount between 1 and 2

---
 .../igniteui-angular/src/lib/core/utils.ts     | 13 +++++++++++++
 .../date-range-picker.component.spec.ts        | 18 ++++++++++++++++++
 .../date-range-picker.component.ts             | 13 ++++++++++---
 3 files changed, 41 insertions(+), 3 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/core/utils.ts b/projects/igniteui-angular/src/lib/core/utils.ts
index a787a9cdcd5..749b85832e5 100644
--- a/projects/igniteui-angular/src/lib/core/utils.ts
+++ b/projects/igniteui-angular/src/lib/core/utils.ts
@@ -225,6 +225,19 @@ export const isEqual = (obj1, obj2): boolean => {
     return obj1 === obj2;
 };
 
+/**
+ * Limits a number to a range between a minimum and a maximum value.
+ *
+ * @param number
+ * @param min
+ * @param max
+ * @returns: `number`
+ * @hidden
+ */
+export const clamp = (number: number, min: number, max: number) =>
+    Math.max(min, Math.min(number, max));
+
+
 /**
  * Utility service taking care of various utility functions such as
  * detecting browser features, general cross browser DOM manipulation, etc.
diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts
index 734449cd530..62088bc06f0 100644
--- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts
@@ -1645,6 +1645,24 @@ describe('IgxDateRangePicker', () => {
                 expect(dateRange['_calendar'].wrapper.nativeElement).toHaveClass(CSS_CLASS_CALENDAR_WRAPPER_VERTICAL);
             }));
 
+            it('should limit the displayMonthsCount property between 1 and 2', fakeAsync(() => {
+                fixture = TestBed.createComponent(DateRangeDefaultComponent);
+                fixture.detectChanges();
+                dateRange = fixture.componentInstance.dateRange;
+                dateRange.open();
+                tick();
+
+                dateRange.displayMonthsCount = 3;
+                fixture.detectChanges();
+
+                expect(dateRange.displayMonthsCount).toBe(2);
+
+                dateRange.displayMonthsCount = -1;
+                fixture.detectChanges();
+
+                expect(dateRange.displayMonthsCount).toBe(1);
+            }));
+
             describe('Templated Calendar Header', () => {
                 let dateRangeDebugEl: DebugElement;
                 beforeEach(fakeAsync(() => {
diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts
index d316fc201aa..a01675eb8a7 100644
--- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts
+++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts
@@ -16,7 +16,7 @@ import { filter, takeUntil } from 'rxjs/operators';
 import { CalendarSelection, IgxCalendarComponent, IgxCalendarHeaderTemplateDirective, IgxCalendarHeaderTitleTemplateDirective, IgxCalendarSubheaderTemplateDirective } from '../calendar/public_api';
 import { DateRangeType } from '../core/dates';
 import { DateRangePickerResourceStringsEN, IDateRangePickerResourceStrings } from '../core/i18n/date-range-picker-resources';
-import { IBaseCancelableBrowserEventArgs, isDate, parseDate, PlatformUtil } from '../core/utils';
+import { clamp, IBaseCancelableBrowserEventArgs, isDate, parseDate, PlatformUtil } from '../core/utils';
 import { IgxCalendarContainerComponent } from '../date-common/calendar-container/calendar-container.component';
 import { PickerBaseDirective } from '../date-common/picker-base.directive';
 import { IgxPickerActionsDirective } from '../date-common/picker-icons.common';
@@ -92,7 +92,13 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
      * ```
      */
     @Input()
-    public displayMonthsCount = 2;
+    public get displayMonthsCount(): number {
+        return this._displayMonthsCount;
+    }
+
+    public set displayMonthsCount(value: number) {
+        this._displayMonthsCount = clamp(value, 1, 2);
+    }
 
     /**
      * Gets/Sets the orientation of the multiple months displayed in the picker's calendar's days view.
@@ -468,6 +474,7 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
     private _calendarContainer?: HTMLElement;
     private _positionSettings: PositionSettings;
     private _focusedInput: IgxDateRangeInputsBaseComponent;
+    private _displayMonthsCount = 2;
     private _overlaySubFilter:
         [MonoTypeOperatorFunction<OverlayEventArgs>, MonoTypeOperatorFunction<OverlayEventArgs | OverlayCancelableEventArgs>] = [
             filter(x => x.id === this._overlayId),
@@ -1105,7 +1112,7 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
         this.calendar.selection = CalendarSelection.RANGE;
         this.calendar.weekStart = this.weekStart;
         this.calendar.hideOutsideDays = this.hideOutsideDays;
-        this.calendar.monthsViewNumber = this.displayMonthsCount;
+        this.calendar.monthsViewNumber = this._displayMonthsCount;
         this.calendar.showWeekNumbers = this.showWeekNumbers;
         this._calendar.headerTitleTemplate = this.headerTitleTemplate;
         this._calendar.headerTemplate = this.headerTemplate;

From 062203d581db8e1aceb1e2d2c20f75d5ce45f4b5 Mon Sep 17 00:00:00 2001
From: Bozhidara Pachilova <bozhidara.pp@gmail.com>
Date: Tue, 12 Aug 2025 17:07:04 +0300
Subject: [PATCH 07/20] feat(drp): add specialDates prop + test

---
 .../date-range-picker.component.spec.ts       | 21 +++++++++++
 .../date-range-picker.component.ts            | 35 ++++++++++++++-----
 2 files changed, 48 insertions(+), 8 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts
index 62088bc06f0..9878d2485c0 100644
--- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts
@@ -1663,6 +1663,27 @@ describe('IgxDateRangePicker', () => {
                 expect(dateRange.displayMonthsCount).toBe(1);
             }));
 
+            it('should set the specialDates of the calendar', fakeAsync(() => {
+                fixture = TestBed.createComponent(DateRangeDefaultComponent);
+                fixture.detectChanges();
+                dateRange = fixture.componentInstance.dateRange;
+
+                const specialDates = [{
+                    type: DateRangeType.Between, dateRange: [
+                        new Date(new Date().getFullYear(), new Date().getMonth(), 3),
+                        new Date(new Date().getFullYear(), new Date().getMonth(), 8)
+                    ]
+                }];
+                dateRange.specialDates = specialDates;
+                fixture.detectChanges();
+
+                dateRange.open();
+                tick();
+                fixture.detectChanges();
+
+                expect(dateRange['_calendar'].specialDates).toEqual(specialDates);
+            }));
+
             describe('Templated Calendar Header', () => {
                 let dateRangeDebugEl: DebugElement;
                 beforeEach(fakeAsync(() => {
diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts
index a01675eb8a7..71e412bb702 100644
--- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts
+++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts
@@ -14,7 +14,7 @@ import { fromEvent, merge, MonoTypeOperatorFunction, noop, Subscription } from '
 import { filter, takeUntil } from 'rxjs/operators';
 
 import { CalendarSelection, IgxCalendarComponent, IgxCalendarHeaderTemplateDirective, IgxCalendarHeaderTitleTemplateDirective, IgxCalendarSubheaderTemplateDirective } from '../calendar/public_api';
-import { DateRangeType } from '../core/dates';
+import { DateRangeDescriptor, DateRangeType } from '../core/dates';
 import { DateRangePickerResourceStringsEN, IDateRangePickerResourceStrings } from '../core/i18n/date-range-picker-resources';
 import { clamp, IBaseCancelableBrowserEventArgs, isDate, parseDate, PlatformUtil } from '../core/utils';
 import { IgxCalendarContainerComponent } from '../date-common/calendar-container/calendar-container.component';
@@ -234,6 +234,23 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
         return this._maxValue;
     }
 
+    /**
+     * Gets/Sets the special dates descriptors.
+     *
+     * @example
+     * ```typescript
+     * let specialDates = this.dateRangePicker.specialDates;
+     * this.dateRangePicker.specialDates = [ {type: DateRangeType.Weekends}, ... ];
+     * ```
+     */
+    @Input()
+    public get specialDates(): DateRangeDescriptor[] {
+        return this._specialDates;
+    }
+    public set specialDates(value: DateRangeDescriptor[]) {
+        this._specialDates = value;
+    }
+
     /**
      * An accessor that sets the resource strings.
      * By default it uses EN resources.
@@ -475,6 +492,7 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
     private _positionSettings: PositionSettings;
     private _focusedInput: IgxDateRangeInputsBaseComponent;
     private _displayMonthsCount = 2;
+    private _specialDates: DateRangeDescriptor[] = null;
     private _overlaySubFilter:
         [MonoTypeOperatorFunction<OverlayEventArgs>, MonoTypeOperatorFunction<OverlayEventArgs | OverlayCancelableEventArgs>] = [
             filter(x => x.id === this._overlayId),
@@ -1108,18 +1126,19 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
     private _initializeCalendarContainer(componentInstance: IgxCalendarContainerComponent) {
         this._calendar = componentInstance.calendar;
         this._calendar.hasHeader = !this.isDropdown && !this.hideHeader;
-        this.calendar.locale = this.locale;
-        this.calendar.selection = CalendarSelection.RANGE;
-        this.calendar.weekStart = this.weekStart;
-        this.calendar.hideOutsideDays = this.hideOutsideDays;
-        this.calendar.monthsViewNumber = this._displayMonthsCount;
-        this.calendar.showWeekNumbers = this.showWeekNumbers;
+        this._calendar.locale = this.locale;
+        this._calendar.selection = CalendarSelection.RANGE;
+        this._calendar.weekStart = this.weekStart;
+        this._calendar.hideOutsideDays = this.hideOutsideDays;
+        this._calendar.monthsViewNumber = this._displayMonthsCount;
+        this._calendar.showWeekNumbers = this.showWeekNumbers;
         this._calendar.headerTitleTemplate = this.headerTitleTemplate;
         this._calendar.headerTemplate = this.headerTemplate;
         this._calendar.subheaderTemplate = this.subheaderTemplate;
         this._calendar.headerOrientation = this.headerOrientation;
         this._calendar.orientation = this.orientation;
-        this.calendar.selected.pipe(takeUntil(this._destroy$)).subscribe((ev: Date[]) => this.handleSelection(ev));
+        this._calendar.specialDates = this.specialDates;
+        this._calendar.selected.pipe(takeUntil(this._destroy$)).subscribe((ev: Date[]) => this.handleSelection(ev));
 
         componentInstance.mode = this.mode;
         componentInstance.closeButtonLabel = !this.isDropdown ? this.doneButtonText : null;

From 93cb0b0d18a49dcc8af62cd8e0167897775eb67f Mon Sep 17 00:00:00 2001
From: Bozhidara Pachilova <bozhidara.pp@gmail.com>
Date: Tue, 12 Aug 2025 18:29:23 +0300
Subject: [PATCH 08/20] feat(drp): add disabledDates prop + test

---
 .../src/lib/calendar/common/helpers.ts        | 42 ++++++----
 .../src/lib/calendar/common/model.ts          |  8 ++
 .../date-range-picker.component.spec.ts       | 64 +++++++++++++++
 .../date-range-picker.component.ts            | 81 +++++++++++++++----
 src/app/date-range/date-range.sample.html     |  2 +-
 src/app/date-range/date-range.sample.ts       |  9 ++-
 6 files changed, 175 insertions(+), 31 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/calendar/common/helpers.ts b/projects/igniteui-angular/src/lib/calendar/common/helpers.ts
index 4d4d0c1a30a..8971144bb59 100644
--- a/projects/igniteui-angular/src/lib/calendar/common/helpers.ts
+++ b/projects/igniteui-angular/src/lib/calendar/common/helpers.ts
@@ -88,20 +88,34 @@ export function getClosestActiveDate(
  * @remarks
  * By default, `unit` is set to 'day'.
  */
-export function* calendarRange(options: CalendarRangeParams) {
-    let low = toCalendarDay(options.start);
-    const unit = options.unit ?? "day";
-    const high =
-        typeof options.end === "number"
-            ? low.add(unit, options.end)
-            : toCalendarDay(options.end);
-
-    const reverse = high.lessThan(low);
-    const step = reverse ? -1 : 1;
-
-    while (!reverse ? low.lessThan(high) : low.greaterThan(high)) {
-        yield low;
-        low = low.add(unit, step);
+export function* calendarRange(
+    options: CalendarRangeParams
+): Generator<CalendarDay, void, unknown> {
+    const { start, end, unit = 'day', inclusive = false } = options;
+
+    let currentDate = toCalendarDay(start);
+    const endDate =
+        typeof end === 'number'
+            ? toCalendarDay(start).add(unit, end)
+            : toCalendarDay(end);
+
+    const isReversed = endDate.lessThan(currentDate);
+    const step = isReversed ? -1 : 1;
+
+    const shouldContinue = () => {
+        if (inclusive) {
+            return isReversed
+                ? currentDate.greaterThanOrEqual(endDate)
+                : currentDate.lessThanOrEqual(endDate);
+        }
+        return isReversed
+            ? currentDate.greaterThan(endDate)
+            : currentDate.lessThan(endDate);
+    };
+
+    while (shouldContinue()) {
+        yield currentDate;
+        currentDate = currentDate.add(unit, step);
     }
 }
 
diff --git a/projects/igniteui-angular/src/lib/calendar/common/model.ts b/projects/igniteui-angular/src/lib/calendar/common/model.ts
index b91c878d303..54f471dd479 100644
--- a/projects/igniteui-angular/src/lib/calendar/common/model.ts
+++ b/projects/igniteui-angular/src/lib/calendar/common/model.ts
@@ -7,6 +7,7 @@ export type CalendarRangeParams = {
     start: DayParameter;
     end: DayParameter | number;
     unit?: DayInterval;
+    inclusive?: boolean;
 };
 
 type CalendarDayParams = {
@@ -237,11 +238,18 @@ export class CalendarDay {
     public greaterThan(value: DayParameter) {
         return this.timestamp > toCalendarDay(value).timestamp;
     }
+    public greaterThanOrEqual(value: DayParameter) {
+        return this.timestamp >= toCalendarDay(value).timestamp;
+    }
 
     public lessThan(value: DayParameter) {
         return this.timestamp < toCalendarDay(value).timestamp;
     }
 
+    public lessThanOrEqual(value: DayParameter) {
+        return this.timestamp <= toCalendarDay(value).timestamp;
+    }
+
     public toString() {
         return `${this.native}`;
     }
diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts
index 9878d2485c0..3cbe2b08b53 100644
--- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts
@@ -275,6 +275,42 @@ describe('IgxDateRangePicker', () => {
             expect((dateRange as any).calendar.disabledDates[1].type).toEqual(DateRangeType.After);
             expect((dateRange as any).calendar.disabledDates[1].dateRange[0]).toEqual(new Date(dateRange.maxValue));
         }));
+
+        it('should validate correctly when disabledDates are set', () => {
+            const dateRange = new IgxDateRangePickerComponent(elementRef, 'en-US', platform, mockInjector, null, null, null);
+            dateRange.ngOnInit();
+
+            dateRange.registerOnChange(mockNgControl.registerOnChangeCb);
+            dateRange.registerOnValidatorChange(mockNgControl.registerOnValidatorChangeCb);
+            mockNgControl.registerOnValidatorChangeCb.calls.reset();
+            spyOnProperty((dateRange as any), 'calendar').and.returnValue(mockCalendar);
+
+            const start = new Date(new Date().getFullYear(), new Date().getMonth(), 10);
+            const end = new Date(new Date().getFullYear(), new Date().getMonth(), 18);
+
+            const disabledDates = [{
+                type: DateRangeType.Between, dateRange: [ start, end ]
+            }];
+            dateRange.disabledDates = disabledDates;
+            expect(mockNgControl.registerOnValidatorChangeCb).toHaveBeenCalledTimes(1);
+
+
+            const validRange = {
+                start: new Date(new Date().getFullYear(), new Date().getMonth(), 2),
+                end: new Date(new Date().getFullYear(), new Date().getMonth(), 5),
+            };
+            dateRange.writeValue(validRange);
+            const mockFormControl = new UntypedFormControl(dateRange.value);
+            expect(dateRange.validate(mockFormControl)).toBeNull();
+
+            (dateRange as any).updateCalendar();
+            expect((dateRange as any).calendar.disabledDates.length).toEqual(1);
+            expect((dateRange as any).calendar.disabledDates[0].type).toEqual(DateRangeType.Between);
+
+            start.setDate(start.getDate() - 2);
+            dateRange.writeValue({ start, end });
+            expect(dateRange.validate(mockFormControl)).toEqual({ dateIsDisabled: true });
+        });
     });
 
     describe('Integration tests', () => {
@@ -1684,6 +1720,34 @@ describe('IgxDateRangePicker', () => {
                 expect(dateRange['_calendar'].specialDates).toEqual(specialDates);
             }));
 
+            it('should set the disabledDates of the calendar', fakeAsync(() => {
+                fixture = TestBed.createComponent(DateRangeDefaultComponent);
+                fixture.detectChanges();
+                dateRange = fixture.componentInstance.dateRange;
+
+                const disabledDates = [{
+                    type: DateRangeType.Between, dateRange: [
+                        new Date(new Date().getFullYear(), new Date().getMonth(), 3),
+                        new Date(new Date().getFullYear(), new Date().getMonth(), 8)
+                    ]
+                }];
+                dateRange.disabledDates = disabledDates;
+                fixture.detectChanges();
+
+                dateRange.open();
+                tick();
+                fixture.detectChanges();
+
+                expect(dateRange['_calendar'].disabledDates).toEqual(disabledDates);
+
+                // should not allow to select a date from the disabled dates
+                startDate = new Date(new Date().getFullYear(), new Date().getMonth(), 4);
+                endDate = new Date(new Date().getFullYear(), new Date().getMonth(), 6);
+
+                selectDateRangeFromCalendar(startDate, endDate);
+                expect(dateRange.value).toBeNull();
+            }));
+
             describe('Templated Calendar Header', () => {
                 let dateRangeDebugEl: DebugElement;
                 beforeEach(fakeAsync(() => {
diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts
index 71e412bb702..72d82b47bba 100644
--- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts
+++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts
@@ -36,6 +36,7 @@ import { IgxIconComponent } from '../icon/icon.component';
 import { getCurrentResourceStrings } from '../core/i18n/resources';
 import { fadeIn, fadeOut } from 'igniteui-angular/animations';
 import { PickerCalendarOrientation } from '../date-common/types';
+import { calendarRange, isDateInRanges } from '../calendar/common/helpers';
 
 const SingleInputDatesConcatenationString = ' - ';
 
@@ -234,6 +235,24 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
         return this._maxValue;
     }
 
+    /**
+     * Gets/Sets the disabled dates descriptors.
+     *
+     * @example
+     * ```typescript
+     * let disabledDates = this.dateRangePicker.disabledDates;
+     * this.dateRangePicker.disabledDates = [ {type: DateRangeType.Weekends}, ...];
+     * ```
+     */
+    @Input()
+    public get disabledDates(): DateRangeDescriptor[] {
+        return this._disabledDates;
+    }
+    public set disabledDates(value: DateRangeDescriptor[]) {
+        this._disabledDates = value;
+        this.onValidatorChange();
+    }
+
     /**
      * Gets/Sets the special dates descriptors.
      *
@@ -493,6 +512,7 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
     private _focusedInput: IgxDateRangeInputsBaseComponent;
     private _displayMonthsCount = 2;
     private _specialDates: DateRangeDescriptor[] = null;
+    private _disabledDates: DateRangeDescriptor[] = null;
     private _overlaySubFilter:
         [MonoTypeOperatorFunction<OverlayEventArgs>, MonoTypeOperatorFunction<OverlayEventArgs | OverlayCancelableEventArgs>] = [
             filter(x => x.id === this._overlayId),
@@ -650,16 +670,19 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
                 }
             }
 
-            const min = parseDate(this.minValue);
-            const max = parseDate(this.maxValue);
+            if (this._isValueInDisabledRange(value)) {
+                Object.assign(errors, { dateIsDisabled: true });
+            }
+
+            const { minValue, maxValue } = this._getMinMaxDates();
             const start = parseDate(value.start);
             const end = parseDate(value.end);
-            if ((min && start && DateTimeUtil.lessThanMinValue(start, min, false))
-                || (min && end && DateTimeUtil.lessThanMinValue(end, min, false))) {
+            if ((minValue && start && DateTimeUtil.lessThanMinValue(start, minValue, false))
+                || (minValue && end && DateTimeUtil.lessThanMinValue(end, minValue, false))) {
                 Object.assign(errors, { minValue: true });
             }
-            if ((max && start && DateTimeUtil.greaterThanMaxValue(start, max, false))
-                || (max && end && DateTimeUtil.greaterThanMaxValue(end, max, false))) {
+            if ((maxValue && start && DateTimeUtil.greaterThanMaxValue(start, maxValue, false))
+                || (maxValue && end && DateTimeUtil.greaterThanMaxValue(end, maxValue, false))) {
                 Object.assign(errors, { maxValue: true });
             }
         }
@@ -928,15 +951,8 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
         if (!this.calendar) {
             return;
         }
-        this.calendar.disabledDates = [];
-        const minValue = this.parseMinValue(this.minValue);
-        if (minValue) {
-            this.calendar.disabledDates.push({ type: DateRangeType.Before, dateRange: [minValue] });
-        }
-        const maxValue = this.parseMaxValue(this.maxValue);
-        if (maxValue) {
-            this.calendar.disabledDates.push({ type: DateRangeType.After, dateRange: [maxValue] });
-        }
+        this._setDisabledDates();
+        const { minValue, maxValue } = this._getMinMaxDates();
 
         const range: Date[] = [];
         if (this.value?.start && this.value?.end) {
@@ -1140,9 +1156,44 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
         this._calendar.specialDates = this.specialDates;
         this._calendar.selected.pipe(takeUntil(this._destroy$)).subscribe((ev: Date[]) => this.handleSelection(ev));
 
+        this._setDisabledDates();
+
         componentInstance.mode = this.mode;
         componentInstance.closeButtonLabel = !this.isDropdown ? this.doneButtonText : null;
         componentInstance.pickerActions = this.pickerActions;
         componentInstance.calendarClose.pipe(takeUntil(this._destroy$)).subscribe(() => this.close());
     }
+
+    private _setDisabledDates(): void {
+        if (!this.calendar) {
+            return;
+        }
+        this.calendar.disabledDates = this.disabledDates ? [...this.disabledDates] : [];
+        const { minValue, maxValue } = this._getMinMaxDates();
+        if (minValue) {
+            this.calendar.disabledDates.push({ type: DateRangeType.Before, dateRange: [minValue] });
+        }
+        if (maxValue) {
+            this.calendar.disabledDates.push({ type: DateRangeType.After, dateRange: [maxValue] });
+        }
+    }
+
+    private _getMinMaxDates() {
+        const minValue = this.parseMinValue(this.minValue);
+        const maxValue = this.parseMaxValue(this.maxValue);
+        return { minValue, maxValue };
+    }
+
+    private _isValueInDisabledRange(value: DateRange) {
+        if (value && this.disabledDates) {
+            const isOutsideDisabledRange = Array.from(
+                calendarRange({
+                    start: parseDate(this.value.start),
+                    end: parseDate(this.value.end),
+                    inclusive: true
+                })).every((date) => !isDateInRanges(date, this.disabledDates));
+            return !isOutsideDisabledRange;
+        }
+        return false;
+    }
 }
diff --git a/src/app/date-range/date-range.sample.html b/src/app/date-range/date-range.sample.html
index fceb8e868b9..d2f8822e7cd 100644
--- a/src/app/date-range/date-range.sample.html
+++ b/src/app/date-range/date-range.sample.html
@@ -10,7 +10,7 @@ <h5>Without forms</h5>
                     <button igxButton="contained" igxRipple (click)="changeWeekStart(5)">Change weekStart to Friday</button>
                     <button igxButton="contained" igxRipple (click)="changeWeekStart(0)">Change weekStart to Sunday</button>
                 </div>
-                <igx-date-range-picker  #dr1 mode="dialog"></igx-date-range-picker>
+                <igx-date-range-picker #dr1 mode="dialog" [disabledDates]="disabledDates"></igx-date-range-picker>
 
                 <p>Drop down single input with custom suffix</p>
                 <igx-date-range-picker>
diff --git a/src/app/date-range/date-range.sample.ts b/src/app/date-range/date-range.sample.ts
index 52a26f19be6..ae4c174e027 100644
--- a/src/app/date-range/date-range.sample.ts
+++ b/src/app/date-range/date-range.sample.ts
@@ -1,7 +1,7 @@
 import { Component, ViewChild } from '@angular/core';
 import { JsonPipe } from '@angular/common';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl, ValidatorFn, AbstractControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { DateRange, IgxButtonDirective, IgxDateRangeEndComponent, IgxDateRangePickerComponent, IgxDateRangeStartComponent, IgxDateTimeEditorDirective, IgxIconComponent, IgxInputDirective, IgxLabelDirective, IgxPickerToggleComponent, IgxPrefixDirective, IgxRadioComponent, IgxRippleDirective, IgxSuffixDirective, IGX_INPUT_GROUP_TYPE, IChangeCheckboxEventArgs } from 'igniteui-angular';
+import { DateRangeType } from 'igniteui-angular/src/lib/calendar/common/types';
 
 
 @Component({
@@ -37,6 +37,13 @@ export class DateRangeSampleComponent {
     public updateOnOptions: string[] = ['change', 'blur', 'submit'];
     public updateOn = 'blur';
 
+    public disabledDates = [{
+        type: DateRangeType.Between, dateRange: [
+            new Date(new Date().getFullYear(), new Date().getMonth(), 20),
+            new Date(new Date().getFullYear(), new Date().getMonth(), 25)
+        ]
+    }];
+
     constructor(fb: UntypedFormBuilder) {
         const today = new Date();
         const in5days = new Date();

From bdf35c12739c7fb1165663b3b3ecff3f1ad433d9 Mon Sep 17 00:00:00 2001
From: Bozhidara Pachilova <bozhidara.pp@gmail.com>
Date: Wed, 13 Aug 2025 13:44:00 +0300
Subject: [PATCH 09/20] feat(dp): update calendar selection on typing + test

---
 .../date-picker/date-picker.component.spec.ts | 28 ++++++++++++++++++-
 .../lib/date-picker/date-picker.component.ts  |  3 ++
 2 files changed, 30 insertions(+), 1 deletion(-)

diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts
index c42fcac06bd..fe642397cbf 100644
--- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts
@@ -249,6 +249,32 @@ describe('IgxDatePicker', () => {
                     .toBeTrue();
                 expect(datePicker.isFocused).toBeTrue();
             }));
+
+            it('should update the calendar selection on typing', fakeAsync(() => {
+                const date = new Date(2025, 0, 1);
+                datePicker.value = date;
+                datePicker.open();
+                fixture.detectChanges();
+
+                const input = fixture.debugElement.query(By.css('.igx-input-group__input'));
+                input.nativeElement.focus();
+                tick();
+                fixture.detectChanges();
+
+                fixture.detectChanges();
+                UIInteractions.simulateTyping('02/01/2025', input);
+
+                const expectedDate = new Date(2025, 0, 2);
+                expect(datePicker.value).toEqual(expectedDate);
+                expect(datePicker.activeDate).toEqual(expectedDate);
+
+                const activeDescendantDate = new Date(expectedDate.setHours(0, 0, 0, 0)).getTime().toString();
+                expect(datePicker['_calendar'].activeDate).toEqual(expectedDate);
+                expect(datePicker['_calendar'].viewDate.getMonth()).toEqual(expectedDate.getMonth());
+                expect(datePicker['_calendar'].value).toEqual(expectedDate);
+                const wrapper = fixture.debugElement.query(By.css('.igx-calendar__wrapper')).nativeElement;
+                expect(wrapper.getAttribute('aria-activedescendant')).toEqual(activeDescendantDate);
+            }));
         });
 
         describe('NgControl integration', () => {
@@ -776,7 +802,7 @@ describe('IgxDatePicker', () => {
 
             mockCdr = jasmine.createSpyObj('ChangeDetectorRef', ['detectChanges']);
 
-            mockCalendar = { selected: new EventEmitter<any>() };
+            mockCalendar = { selected: new EventEmitter<any>(), selectDate: () => {} };
             const mockComponentInstance = {
                 calendar: mockCalendar,
                 todaySelection: new EventEmitter<any>(),
diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
index e030735e37f..db57291aeff 100644
--- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
+++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
@@ -833,6 +833,9 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
             return;
         }
         this._dateValue = DateTimeUtil.isValidDate(value) ? value : DateTimeUtil.parseIsoDate(value);
+        if (this._calendar) {
+            this._calendar.selectDate(this._dateValue);
+        }
     }
 
     private updateValidity() {

From bcdb2533d32f4f34c8e1d80bb06f715adfe22e85 Mon Sep 17 00:00:00 2001
From: Bozhidara Pachilova <bozhidara.pp@gmail.com>
Date: Wed, 13 Aug 2025 13:45:31 +0300
Subject: [PATCH 10/20] refactor(calendar): don't block selection for disabled
 date through model/API

---
 projects/igniteui-angular/src/lib/calendar/calendar-base.ts | 6 ++----
 .../src/lib/calendar/calendar.component.spec.ts             | 3 ++-
 2 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/calendar/calendar-base.ts b/projects/igniteui-angular/src/lib/calendar/calendar-base.ts
index 94f0a85d2a0..b7d5ce5b61b 100644
--- a/projects/igniteui-angular/src/lib/calendar/calendar-base.ts
+++ b/projects/igniteui-angular/src/lib/calendar/calendar-base.ts
@@ -707,7 +707,7 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
 
         switch (this.selection) {
             case CalendarSelection.SINGLE:
-                if (isDate(value) && !this.isDateDisabled(value as Date)) {
+                if (isDate(value)) {
                     this.selectSingle(value as Date);
                 }
                 break;
@@ -807,9 +807,7 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
                     : [value, this.lastSelectedDate];
 
                 const unselectedDates = [this._startDate, ...this.generateDateRange(this._startDate, this._endDate)]
-                    .filter(date => !this.isDateDisabled(date)
-                        && this.selectedDates.every((d: Date) => d.getTime() !== date.getTime())
-                    );
+                    .filter(date => this.selectedDates.every((d: Date) => d.getTime() !== date.getTime()));
 
                 // select all dates from last selected to shift clicked date
                 if (this.selectedDates.some((date: Date) => date.getTime() === this.lastSelectedDate.getTime())
diff --git a/projects/igniteui-angular/src/lib/calendar/calendar.component.spec.ts b/projects/igniteui-angular/src/lib/calendar/calendar.component.spec.ts
index 9da0f57cb38..2e9696dac8a 100644
--- a/projects/igniteui-angular/src/lib/calendar/calendar.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/calendar/calendar.component.spec.ts
@@ -1767,7 +1767,8 @@ describe("IgxCalendar - ", () => {
                 });
 
                 it("Should not select date from model, if it is part of disabled dates", () => {
-                    expect(calendar.value).toBeFalsy();
+                    // Changed per WC alignment task #16131 - calendar should not block selection of dates through API/model
+                    expect(calendar.value).toBeTruthy();
                 });
 
                 it("Should not select date from model in range selection, if model passes null", () => {

From f3c0c78de4ae80298a2bfc74159718fc4aa7f4db Mon Sep 17 00:00:00 2001
From: Bozhidara Pachilova <bozhidara.pp@gmail.com>
Date: Wed, 13 Aug 2025 13:52:27 +0300
Subject: [PATCH 11/20] feat(dp): add activeDate property + tests

---
 .../date-picker/date-picker.component.spec.ts | 53 +++++++++++++++++++
 .../lib/date-picker/date-picker.component.ts  | 18 ++++++-
 2 files changed, 69 insertions(+), 2 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts
index fe642397cbf..2de35643238 100644
--- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts
@@ -103,6 +103,59 @@ describe('IgxDatePicker', () => {
                 expect(datePicker['_calendar'].orientation).toEqual(PickerCalendarOrientation.Vertical.toString());
                 expect(datePicker['_calendar'].wrapper.nativeElement).toHaveClass(CSS_CLASS_CALENDAR_WRAPPER_VERTICAL);
             }));
+
+            it('should initialize activeDate with current date, when not set', fakeAsync(() => {
+                const datePicker = fixture.componentInstance.datePicker;
+                datePicker.value = null;
+                fixture.detectChanges();
+                const todayDate = new Date();
+                const today = new Date(todayDate.setHours(0, 0, 0, 0)).getTime().toString();
+
+                expect(datePicker.activeDate).toEqual(todayDate);
+
+                datePicker.open();
+                fixture.detectChanges();
+
+                expect(datePicker['_calendar'].activeDate).toEqual(todayDate);
+                expect(datePicker['_calendar'].value).toBeUndefined();
+                const wrapper = fixture.debugElement.query(By.css('.igx-calendar__wrapper')).nativeElement;
+                expect(wrapper.getAttribute('aria-activedescendant')).toEqual(today);
+            }));
+
+            it('should initialize activeDate = value when it is not set, but value is', fakeAsync(() => {
+                const datePicker = fixture.componentInstance.datePicker;
+                const date = fixture.componentInstance.date;
+
+                expect(datePicker.activeDate).toEqual(date);
+                datePicker.open();
+                fixture.detectChanges();
+
+                const activeDescendantDate = new Date(date.setHours(0, 0, 0, 0)).getTime().toString();
+                expect(datePicker['_calendar'].activeDate).toEqual(date);
+                expect(datePicker['_calendar'].value).toEqual(date);
+                const wrapper = fixture.debugElement.query(By.css('.igx-calendar__wrapper')).nativeElement;
+                expect(wrapper.getAttribute('aria-activedescendant')).toEqual(activeDescendantDate);
+            }));
+
+            it('should set activeDate correctly', fakeAsync(() => {
+                const datePicker = fixture.componentInstance.datePicker;
+                const targetDate = new Date(2025, 0, 1);
+                datePicker.activeDate = new Date(targetDate);
+                fixture.detectChanges();
+
+                expect(datePicker.activeDate).toEqual(targetDate);
+                expect(datePicker.value).toEqual(fixture.componentInstance.date);
+
+                datePicker.open();
+                fixture.detectChanges();
+
+                const activeDescendantDate = new Date(targetDate.setHours(0, 0, 0, 0)).getTime().toString();
+                expect(datePicker['_calendar'].activeDate).toEqual(targetDate);
+                expect(datePicker['_calendar'].viewDate.getMonth()).toEqual(targetDate.getMonth());
+                expect(datePicker['_calendar'].value).toEqual(fixture.componentInstance.date);
+                const wrapper = fixture.debugElement.query(By.css('.igx-calendar__wrapper')).nativeElement;
+                expect(wrapper.getAttribute('aria-activedescendant')).toEqual(activeDescendantDate);
+            }));
         });
 
         describe('Events', () => {
diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
index db57291aeff..785ad28eb55 100644
--- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
+++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
@@ -160,6 +160,17 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
     @Input({ transform: booleanAttribute })
     public showWeekNumbers: boolean;
 
+    @Input()
+    public get activeDate(): Date {
+        const today = new Date(new Date().setHours(0, 0, 0, 0));
+        const dateValue = DateTimeUtil.isValidDate(this._dateValue) ? new Date(this._dateValue.setHours(0, 0, 0, 0)) : null;
+        return this._activeDate ?? dateValue ?? this._calendar?.activeDate ?? today;
+    }
+
+    public set activeDate(value: Date) {
+        this._activeDate = value;
+    }
+
     /**
      * Gets/Sets a custom formatter function on the selected or passed date.
      *
@@ -468,6 +479,7 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
     private _calendarContainer?: HTMLElement;
     private _specialDates: DateRangeDescriptor[] = null;
     private _disabledDates: DateRangeDescriptor[] = null;
+    private _activeDate: Date = null;
     private _overlaySubFilter:
         [MonoTypeOperatorFunction<OverlayEventArgs>,
             MonoTypeOperatorFunction<OverlayEventArgs | OverlayCancelableEventArgs>] = [
@@ -873,7 +885,10 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
             date.setMilliseconds(this.dateValue.getMilliseconds());
         }
         this.value = date;
-        this._calendar.viewDate = date;
+        if (this._calendar) {
+            this._calendar.activeDate = this.activeDate;
+            this._calendar.viewDate = this.activeDate;
+        }
         this.close();
     }
 
@@ -964,7 +979,6 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
         }
     }
 
-
     private _initializeCalendarContainer(componentInstance: IgxCalendarContainerComponent) {
         this._calendar = componentInstance.calendar;
         this._calendar.hasHeader = !this.isDropdown && !this.hideHeader;

From 0cb144b6534716cb82ff2a931c926a85ae1d1e2b Mon Sep 17 00:00:00 2001
From: Bozhidara Pachilova <bozhidara.pp@gmail.com>
Date: Wed, 13 Aug 2025 13:54:33 +0300
Subject: [PATCH 12/20] refactor(dp): align the calendar activeDate with WC

---
 .../date-picker/date-picker.component.spec.ts | 23 +++++++++++++++++
 .../lib/date-picker/date-picker.component.ts  | 25 ++-----------------
 2 files changed, 25 insertions(+), 23 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts
index 2de35643238..31b8951725a 100644
--- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts
@@ -156,6 +156,29 @@ describe('IgxDatePicker', () => {
                 const wrapper = fixture.debugElement.query(By.css('.igx-calendar__wrapper')).nativeElement;
                 expect(wrapper.getAttribute('aria-activedescendant')).toEqual(activeDescendantDate);
             }));
+
+            it('should set activeDate of the calendar to value of picker even when it is outside the enabled range, i.e. > maxValue', fakeAsync(() => {
+                const datePicker = fixture.componentInstance.datePicker;
+                const maxDate = new Date(2025, 7, 1);
+                datePicker.maxValue = maxDate;
+                fixture.detectChanges();
+
+                const valueGreaterThanMax = new Date(2025, 10, 1);
+                datePicker.value = valueGreaterThanMax;
+                fixture.detectChanges();
+
+                expect(datePicker.activeDate).toEqual(valueGreaterThanMax);
+
+                datePicker.open();
+                fixture.detectChanges();
+
+                const activeDescendantDate = new Date(valueGreaterThanMax.setHours(0, 0, 0, 0)).getTime().toString();
+                expect(datePicker['_calendar'].activeDate).toEqual(valueGreaterThanMax);
+                expect(datePicker['_calendar'].viewDate.getMonth()).toEqual(valueGreaterThanMax.getMonth());
+                expect(datePicker['_calendar'].value).toEqual(valueGreaterThanMax);
+                const wrapper = fixture.debugElement.query(By.css('.igx-calendar__wrapper')).nativeElement;
+                expect(wrapper.getAttribute('aria-activedescendant')).toEqual(activeDescendantDate);
+            }));
         });
 
         describe('Events', () => {
diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
index 785ad28eb55..71d1ab1e4f3 100644
--- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
+++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
@@ -472,7 +472,6 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
     private _dateValue: Date;
     private _overlayId: string;
     private _value: Date | string;
-    private _targetViewDate: Date;
     private _ngControl: NgControl = null;
     private _statusChanges$: Subscription;
     private _calendar: IgxCalendarComponent;
@@ -926,13 +925,6 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
             this.opened.emit({ owner: this });
 
             this._calendar.wrapper?.nativeElement?.focus();
-
-            if (this._targetViewDate) {
-                this._targetViewDate.setHours(0, 0, 0, 0);
-                // INFO: We need to set the active date to the target view date so there's something to
-                // navigate when the calendar is opened.
-                this._calendar.activeDate = this._targetViewDate;
-            }
         });
 
         this._overlayService.closing.pipe(...this._overlaySubFilter).subscribe((e: OverlayCancelableEventArgs) => {
@@ -1002,7 +994,8 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
             // calendar will throw if the picker's value is InvalidDate #9208
             this._calendar.value = this.dateValue;
         }
-        this.setCalendarViewDate();
+        this._calendar.activeDate = this.activeDate;
+        this._calendar.viewDate = this.activeDate;
 
         componentInstance.mode = this.mode;
         componentInstance.closeButtonLabel = this.cancelButtonLabel;
@@ -1012,18 +1005,4 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
         componentInstance.calendarClose.pipe(takeUntil(this._destroy$)).subscribe(() => this.close());
         componentInstance.todaySelection.pipe(takeUntil(this._destroy$)).subscribe(() => this.selectToday());
     }
-
-    private setCalendarViewDate() {
-        const { minValue, maxValue } = this.getMinMaxDates();
-        const dateValue = DateTimeUtil.isValidDate(this.dateValue) ? this.dateValue : new Date();
-        if (minValue && DateTimeUtil.lessThanMinValue(dateValue, minValue)) {
-            this._calendar.viewDate = this._targetViewDate = minValue;
-            return;
-        }
-        if (maxValue && DateTimeUtil.greaterThanMaxValue(dateValue, maxValue)) {
-            this._calendar.viewDate = this._targetViewDate = maxValue;
-            return;
-        }
-        this._calendar.viewDate = this._targetViewDate = dateValue;
-    }
 }

From 5b4821bd8b136c3379b7a75f815afa810e0f329b Mon Sep 17 00:00:00 2001
From: Bozhidara Pachilova <bozhidara.pp@gmail.com>
Date: Wed, 13 Aug 2025 13:56:18 +0300
Subject: [PATCH 13/20] feat(dp): update calendar days view on typing & value
 is another view-month/year

---
 .../date-picker/date-picker.component.spec.ts   | 17 +++++++++++++++++
 .../lib/date-picker/date-picker.component.ts    |  8 ++++++++
 2 files changed, 25 insertions(+)

diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts
index 31b8951725a..72d0ae2a7a0 100644
--- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts
@@ -343,6 +343,23 @@ describe('IgxDatePicker', () => {
                 const expectedDate = new Date(2025, 0, 2);
                 expect(datePicker.value).toEqual(expectedDate);
                 expect(datePicker.activeDate).toEqual(expectedDate);
+            it('should update the calendar view and active date on typing a date that is not in the current view', fakeAsync(() => {
+                const date = new Date(2025, 0, 1);
+                datePicker.value = date;
+                datePicker.open();
+                fixture.detectChanges();
+
+                const input = fixture.debugElement.query(By.css('.igx-input-group__input'));
+                input.nativeElement.focus();
+                tick();
+                fixture.detectChanges();
+
+                fixture.detectChanges();
+                UIInteractions.simulateTyping('02/11/2025', input);
+
+                const expectedDate = new Date(2025, 10, 2);
+                expect(datePicker.value).toEqual(expectedDate);
+                expect(datePicker.activeDate).toEqual(expectedDate);
 
                 const activeDescendantDate = new Date(expectedDate.setHours(0, 0, 0, 0)).getTime().toString();
                 expect(datePicker['_calendar'].activeDate).toEqual(expectedDate);
diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
index 71d1ab1e4f3..f24cbaf792d 100644
--- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
+++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.ts
@@ -160,6 +160,11 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
     @Input({ transform: booleanAttribute })
     public showWeekNumbers: boolean;
 
+
+    /**
+     * Gets/Sets the date which is shown in the calendar picker and is highlighted.
+     * By default it is the current date, or the value of the picker, if set.
+     */
     @Input()
     public get activeDate(): Date {
         const today = new Date(new Date().setHours(0, 0, 0, 0));
@@ -846,6 +851,9 @@ export class IgxDatePickerComponent extends PickerBaseDirective implements Contr
         this._dateValue = DateTimeUtil.isValidDate(value) ? value : DateTimeUtil.parseIsoDate(value);
         if (this._calendar) {
             this._calendar.selectDate(this._dateValue);
+            this._calendar.activeDate = this.activeDate;
+            this._calendar.viewDate = this.activeDate;
+            this.cdr.detectChanges();
         }
     }
 

From 62cfb04d8f202f211e46c964ed4152dfc314a9a0 Mon Sep 17 00:00:00 2001
From: Bozhidara Pachilova <bozhidara.pp@gmail.com>
Date: Wed, 13 Aug 2025 14:17:15 +0300
Subject: [PATCH 14/20] fix(drp): check start and end values for disabledDates
 validation

---
 .../src/lib/date-range-picker/date-range-picker.component.ts    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts
index 72d82b47bba..7d3091edc04 100644
--- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts
+++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts
@@ -1185,7 +1185,7 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
     }
 
     private _isValueInDisabledRange(value: DateRange) {
-        if (value && this.disabledDates) {
+        if (value && value.start && value.end && this.disabledDates) {
             const isOutsideDisabledRange = Array.from(
                 calendarRange({
                     start: parseDate(this.value.start),

From cc7b014b8d08c363beb06b57f701b214fd468223 Mon Sep 17 00:00:00 2001
From: Bozhidara Pachilova <bozhidara.pp@gmail.com>
Date: Wed, 13 Aug 2025 15:47:22 +0300
Subject: [PATCH 15/20] feat(drp): align activeDate behavior with WC + tests

---
 .../src/lib/calendar/calendar-base.ts         |   2 +-
 .../date-picker/date-picker.component.spec.ts |   9 ++
 .../date-range-picker.component.spec.ts       | 131 ++++++++++++++++--
 .../date-range-picker.component.ts            |  44 +++++-
 4 files changed, 176 insertions(+), 10 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/calendar/calendar-base.ts b/projects/igniteui-angular/src/lib/calendar/calendar-base.ts
index b7d5ce5b61b..f1df4db3341 100644
--- a/projects/igniteui-angular/src/lib/calendar/calendar-base.ts
+++ b/projects/igniteui-angular/src/lib/calendar/calendar-base.ts
@@ -715,7 +715,7 @@ export class IgxCalendarBaseDirective implements ControlValueAccessor {
                 this.selectMultiple(value);
                 break;
             case CalendarSelection.RANGE:
-                this.selectRange(value, true);
+                this.selectRange(value);
                 break;
         }
     }
diff --git a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts
index 72d0ae2a7a0..76226569d2f 100644
--- a/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/date-picker/date-picker.component.spec.ts
@@ -343,6 +343,15 @@ describe('IgxDatePicker', () => {
                 const expectedDate = new Date(2025, 0, 2);
                 expect(datePicker.value).toEqual(expectedDate);
                 expect(datePicker.activeDate).toEqual(expectedDate);
+
+                const activeDescendantDate = new Date(expectedDate.setHours(0, 0, 0, 0)).getTime().toString();
+                expect(datePicker['_calendar'].activeDate).toEqual(expectedDate);
+                expect(datePicker['_calendar'].viewDate.getMonth()).toEqual(expectedDate.getMonth());
+                expect(datePicker['_calendar'].value).toEqual(expectedDate);
+                const wrapper = fixture.debugElement.query(By.css('.igx-calendar__wrapper')).nativeElement;
+                expect(wrapper.getAttribute('aria-activedescendant')).toEqual(activeDescendantDate);
+            }));
+
             it('should update the calendar view and active date on typing a date that is not in the current view', fakeAsync(() => {
                 const date = new Date(2025, 0, 1);
                 datePicker.value = date;
diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts
index 3cbe2b08b53..c59835febd8 100644
--- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts
@@ -63,6 +63,7 @@ describe('IgxDateRangePicker', () => {
         let mockCalendar: IgxCalendarComponent;
         let mockDaysView: any;
         let mockAnimationService: AnimationService;
+        let mockCdr: any;
         const elementRef = { nativeElement: null };
         const platform = {} as any;
         const mockNgControl = jasmine.createSpyObj('NgControl',
@@ -88,6 +89,9 @@ describe('IgxDateRangePicker', () => {
             mockInjector = jasmine.createSpyObj('Injector', {
                 get: mockNgControl
             });
+            mockCdr = jasmine.createSpyObj('ChangeDetectorRef', {
+                detectChanges: () => { }
+            });
             mockAnimationBuilder = {
                 build: (a: AnimationMetadata | AnimationMetadata[]) => ({
                     create: (e: any, opt?: AnimationOptions) => ({
@@ -244,7 +248,7 @@ describe('IgxDateRangePicker', () => {
         });
 
         it('should disable calendar dates when min and/or max values as dates are provided', () => {
-            const dateRange = new IgxDateRangePickerComponent(elementRef, 'en-US', platform, mockInjector, null, overlay);
+            const dateRange = new IgxDateRangePickerComponent(elementRef, 'en-US', platform, mockInjector, mockCdr, overlay);
             dateRange.ngOnInit();
 
             spyOnProperty((dateRange as any), 'calendar').and.returnValue(mockCalendar);
@@ -260,7 +264,7 @@ describe('IgxDateRangePicker', () => {
         });
 
         it('should disable calendar dates when min and/or max values as strings are provided', fakeAsync(() => {
-            const dateRange = new IgxDateRangePickerComponent(elementRef, 'en', platform, mockInjector, null, null, null);
+            const dateRange = new IgxDateRangePickerComponent(elementRef, 'en', platform, mockInjector, mockCdr, null, null);
             dateRange.ngOnInit();
 
             spyOnProperty((dateRange as any), 'calendar').and.returnValue(mockCalendar);
@@ -277,7 +281,7 @@ describe('IgxDateRangePicker', () => {
         }));
 
         it('should validate correctly when disabledDates are set', () => {
-            const dateRange = new IgxDateRangePickerComponent(elementRef, 'en-US', platform, mockInjector, null, null, null);
+            const dateRange = new IgxDateRangePickerComponent(elementRef, 'en-US', platform, mockInjector, mockCdr, null, null);
             dateRange.ngOnInit();
 
             dateRange.registerOnChange(mockNgControl.registerOnChangeCb);
@@ -1317,6 +1321,60 @@ describe('IgxDateRangePicker', () => {
                     expect(dateRange.opening.emit).toHaveBeenCalledTimes(0);
                     expect(dateRange.opened.emit).toHaveBeenCalledTimes(0);
                 }));
+
+                it('should update the calendar selection on typing', fakeAsync(() => {
+                    const range = { start: new Date(2025, 0, 16), end: new Date(2025, 0, 20) };
+                    dateRange.value = range;
+                    fixture.detectChanges();
+                    dateRange.open();
+                    fixture.detectChanges();
+
+                    expect((dateRange['_calendar'].value as Date[]).length).toBe(5);
+
+                    startInput.triggerEventHandler('focus', {});
+                    fixture.detectChanges();
+                    UIInteractions.simulateTyping('01/18/2025', startInput);
+
+                    tick(DEBOUNCE_TIME);
+                    fixture.detectChanges();
+
+                    expect((dateRange['_calendar'].value as Date[]).length).toBe(3);
+
+                    startDate = new Date(2025, 0, 18);
+                    const expectedRange = { start: startDate, end: new Date(2025, 0, 20) };
+                    expect(dateRange.value).toEqual(expectedRange);
+                    expect(dateRange.activeDate).toEqual(expectedRange.start);
+
+                    const activeDescendantDate = new Date(startDate.setHours(0, 0, 0, 0)).getTime().toString();
+                    expect(dateRange['_calendar'].activeDate).toEqual(startDate);
+                    expect(dateRange['_calendar'].viewDate.getMonth()).toEqual(startDate.getMonth());
+                    expect(dateRange['_calendar'].value[0]).toEqual(startDate);
+                    expect(dateRange['_calendar'].wrapper.nativeElement.getAttribute('aria-activedescendant')).toEqual(activeDescendantDate);
+                }));
+
+                it('should update the calendar view and active date on typing a date that is not in the current view', fakeAsync(() => {
+                    const range = { start: new Date(2025, 0, 16), end: new Date(2025, 0, 20) };
+                    dateRange.value = range;
+                    fixture.detectChanges();
+                    dateRange.open();
+                    fixture.detectChanges();
+
+                    expect((dateRange['_calendar'].value as Date[]).length).toBe(5);
+
+                    startInput.triggerEventHandler('focus', {});
+                    fixture.detectChanges();
+                    UIInteractions.simulateTyping('11/18/2025', startInput);
+
+                    tick(DEBOUNCE_TIME);
+                    fixture.detectChanges();
+
+                    startDate = new Date(2025, 10, 18);
+
+                    const activeDescendantDate = new Date(startDate.setHours(0, 0, 0, 0)).getTime().toString();
+                    expect(dateRange['_calendar'].activeDate).toEqual(startDate);
+                    expect(dateRange['_calendar'].viewDate.getMonth()).toEqual(startDate.getMonth());
+                    expect(dateRange['_calendar'].wrapper.nativeElement.getAttribute('aria-activedescendant')).toEqual(activeDescendantDate);
+                }));
             });
 
             it('should focus the last focused input after the calendar closes - dropdown', fakeAsync(() => {
@@ -1739,13 +1797,70 @@ describe('IgxDateRangePicker', () => {
                 fixture.detectChanges();
 
                 expect(dateRange['_calendar'].disabledDates).toEqual(disabledDates);
+            }));
 
-                // should not allow to select a date from the disabled dates
-                startDate = new Date(new Date().getFullYear(), new Date().getMonth(), 4);
-                endDate = new Date(new Date().getFullYear(), new Date().getMonth(), 6);
+             it('should initialize activeDate with current date, when not set', fakeAsync(() => {
+                fixture = TestBed.createComponent(DateRangeDefaultComponent);
+                fixture.detectChanges();
+                dateRange = fixture.componentInstance.dateRange;
+                const todayDate = new Date();
+                const today = new Date(todayDate.setHours(0, 0, 0, 0)).getTime().toString();
+
+                expect(dateRange.activeDate).toEqual(todayDate);
+
+                dateRange.open();
+                fixture.detectChanges();
+
+                expect(dateRange['_calendar'].activeDate).toEqual(todayDate);
+                expect(dateRange['_calendar'].value).toEqual([]);
+                const wrapper = fixture.debugElement.query(By.css('.igx-calendar__wrapper')).nativeElement;
+                expect(wrapper.getAttribute('aria-activedescendant')).toEqual(today);
+            }));
+
+            it('should initialize activeDate = first defined in value (start/end) when it is not set, but value is', fakeAsync(() => {
+                fixture = TestBed.createComponent(DateRangeDefaultComponent);
+                fixture.detectChanges();
+                dateRange = fixture.componentInstance.dateRange;
+                let range = { start: new Date(2025, 0, 1), end: new Date(2025, 0, 5) };
+                dateRange.value = range;
+                fixture.detectChanges();
+
+                expect(dateRange.activeDate).toEqual(range.start);
+                dateRange.open();
+                fixture.detectChanges();
+
+                const activeDescendantDate = new Date(range.start.setHours(0, 0, 0, 0)).getTime().toString();
+                expect(dateRange['_calendar'].activeDate).toEqual(range.start);
+                expect(dateRange['_calendar'].value[0]).toEqual(range.start);
+                const wrapper = fixture.debugElement.query(By.css('.igx-calendar__wrapper')).nativeElement;
+                expect(wrapper.getAttribute('aria-activedescendant')).toEqual(activeDescendantDate);
+
+                range = { ...range, start: null};
+                dateRange.value = range;
+                fixture.detectChanges();
+
+                expect(dateRange.activeDate).toEqual(range.end);
+            }));
+
+            it('should set activeDate correctly', fakeAsync(() => {
+                const targetDate = new Date(2025, 11, 1);
+                 fixture = TestBed.createComponent(DateRangeDefaultComponent);
+                fixture.detectChanges();
+                dateRange = fixture.componentInstance.dateRange;
+                const range = { start: new Date(2025, 0, 1), end: new Date(2025, 0, 5) };
+                dateRange.value = range;
+                dateRange.activeDate = targetDate;
+                fixture.detectChanges();
+
+                expect(dateRange.activeDate).toEqual(targetDate);
+                dateRange.open();
+                fixture.detectChanges();
 
-                selectDateRangeFromCalendar(startDate, endDate);
-                expect(dateRange.value).toBeNull();
+                const activeDescendantDate = new Date(targetDate.setHours(0, 0, 0, 0)).getTime().toString();
+                expect(dateRange['_calendar'].activeDate).toEqual(targetDate);
+                expect(dateRange['_calendar'].value[0]).toEqual(range.start);
+                const wrapper = fixture.debugElement.query(By.css('.igx-calendar__wrapper')).nativeElement;
+                expect(wrapper.getAttribute('aria-activedescendant')).toEqual(activeDescendantDate);
             }));
 
             describe('Templated Calendar Header', () => {
diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts
index 7d3091edc04..8defad6ac60 100644
--- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts
+++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts
@@ -387,6 +387,21 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
             || DateTimeUtil.DEFAULT_INPUT_FORMAT;
     }
 
+    /**
+     * Gets/Sets the date which is shown in the calendar picker and is highlighted.
+     * By default it is the current date, or the value of the picker, if set.
+    */
+    @Input()
+    public get activeDate(): Date {
+        const today = new Date(new Date().setHours(0, 0, 0, 0));
+        const dateValue = DateTimeUtil.isValidDate(this._firstDefinedInRange) ? new Date(this._firstDefinedInRange.setHours(0, 0, 0, 0)) : null;
+        return this._activeDate ?? dateValue ?? this._calendar?.activeDate ?? today;
+    }
+
+    public set activeDate(value: Date) {
+        this._activeDate = value;
+    }
+
     /**
      * @example
      * ```html
@@ -499,6 +514,14 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
         return Object.assign({}, this._dialogOverlaySettings, this.overlaySettings);
     }
 
+    private get _firstDefinedInRange(): Date | null {
+        if (!this.value) {
+            return null;
+        }
+        const range = this.toRangeOfDates(this.value);
+        return range?.start ?? range?.end ?? null;
+    }
+
     private _resourceStrings = getCurrentResourceStrings(DateRangePickerResourceStringsEN);
     private _doneButtonText = null;
     private _dateSeparator = null;
@@ -513,6 +536,7 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
     private _displayMonthsCount = 2;
     private _specialDates: DateRangeDescriptor[] = null;
     private _disabledDates: DateRangeDescriptor[] = null;
+    private _activeDate: Date | null = null;
     private _overlaySubFilter:
         [MonoTypeOperatorFunction<OverlayEventArgs>, MonoTypeOperatorFunction<OverlayEventArgs | OverlayCancelableEventArgs>] = [
             filter(x => x.id === this._overlayId),
@@ -810,6 +834,7 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
         if (this.isDropdown && selectionData?.length > 1) {
             this.close();
         }
+        this._setCalendarActiveDate();
     }
 
     private handleClosing(e: IBaseCancelableBrowserEventArgs): void {
@@ -970,7 +995,8 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
         } else if (range.length === 0 && this.calendar.monthViews) {
             this.calendar.deselectDate();
         }
-        this.calendar.viewDate = range[0] || new Date();
+        this._setCalendarActiveDate();
+        this._cdr.detectChanges();
     }
 
     private swapEditorDates(): void {
@@ -1031,6 +1057,10 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
                         } else {
                             this.value = { start: value, end: null };
                         }
+                        if (this.calendar) {
+                            this._setCalendarActiveDate(parseDate(value));
+                            this._cdr.detectChanges();
+                        }
                     });
                 end.dateTimeEditor.valueChange
                     .pipe(takeUntil(this._destroy$))
@@ -1040,6 +1070,10 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
                         } else {
                             this.value = { start: null, end: value as Date };
                         }
+                        if (this.calendar) {
+                            this._setCalendarActiveDate(parseDate(value));
+                            this._cdr.detectChanges();
+                        }
                     });
             }
         }
@@ -1157,6 +1191,7 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
         this._calendar.selected.pipe(takeUntil(this._destroy$)).subscribe((ev: Date[]) => this.handleSelection(ev));
 
         this._setDisabledDates();
+        this._setCalendarActiveDate();
 
         componentInstance.mode = this.mode;
         componentInstance.closeButtonLabel = !this.isDropdown ? this.doneButtonText : null;
@@ -1196,4 +1231,11 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
         }
         return false;
     }
+
+    private _setCalendarActiveDate(value = null): void {
+        if (this._calendar) {
+            this._calendar.activeDate = value ?? this.activeDate;
+            this._calendar.viewDate = value ?? this.activeDate;
+        }
+    }
 }

From c0858a8995ec083e103b7245889d3f80bff60b48 Mon Sep 17 00:00:00 2001
From: Bozhidara Pachilova <bozhidara.pp@gmail.com>
Date: Wed, 13 Aug 2025 16:19:37 +0300
Subject: [PATCH 16/20] feat(drp): typing a single value results in calendar
 range of single date

---
 .../date-range-picker.component.spec.ts       |  5 ++--
 .../date-range-picker.component.ts            | 28 +++++++------------
 2 files changed, 13 insertions(+), 20 deletions(-)

diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts
index c59835febd8..6ea553ea318 100644
--- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts
@@ -1129,7 +1129,8 @@ describe('IgxDateRangePicker', () => {
                     expect(endInput.nativeElement.value).toEqual(inputEndDate);
                 });
 
-                it('should select a range from the calendar only when the two inputs are filled in', fakeAsync(() => {
+                it('should select a range from the calendar only when any of the two inputs are filled in', fakeAsync(() => {
+                    // refactored to any of the two inputs, instead of both, to match the behavior in WC - #16131
                     startInput.triggerEventHandler('focus', {});
                     fixture.detectChanges();
                     UIInteractions.simulateTyping('11/10/2015', startInput);
@@ -1138,7 +1139,7 @@ describe('IgxDateRangePicker', () => {
                     tick(DEBOUNCE_TIME);
                     fixture.detectChanges();
                     const rangePicker = fixture.componentInstance.dateRange;
-                    expect((rangePicker as any).calendar.selectedDates.length).toBe(0);
+                    expect((rangePicker as any).calendar.selectedDates.length).toBe(1);
 
                     calendar = document.getElementsByClassName(CSS_CLASS_CALENDAR)[0];
                     UIInteractions.triggerKeyDownEvtUponElem('Escape', calendar);
diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts
index 8defad6ac60..c1dcdfc3076 100644
--- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts
+++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.ts
@@ -977,16 +977,20 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
             return;
         }
         this._setDisabledDates();
-        const { minValue, maxValue } = this._getMinMaxDates();
 
         const range: Date[] = [];
-        if (this.value?.start && this.value?.end) {
+        if (this.value) {
             const _value = this.toRangeOfDates(this.value);
-            if (DateTimeUtil.greaterThanMaxValue(_value.start, _value.end)) {
-                this.swapEditorDates();
+            if (_value.start && _value.end) {
+                if (DateTimeUtil.greaterThanMaxValue(_value.start, _value.end)) {
+                    this.swapEditorDates();
+                }
             }
-            if (this.valueInRange(this.value, minValue, maxValue)) {
-                range.push(_value.start, _value.end);
+            if (_value.start) {
+                range.push(_value.start);
+            }
+            if (_value.end) {
+                range.push(_value.end);
             }
         }
 
@@ -1008,18 +1012,6 @@ export class IgxDateRangePickerComponent extends PickerBaseDirective
         }
     }
 
-    private valueInRange(value: DateRange, minValue?: Date, maxValue?: Date): boolean {
-        const _value = this.toRangeOfDates(value);
-        if (minValue && DateTimeUtil.lessThanMinValue(_value.start, minValue, false)) {
-            return false;
-        }
-        if (maxValue && DateTimeUtil.greaterThanMaxValue(_value.end, maxValue, false)) {
-            return false;
-        }
-
-        return true;
-    }
-
     private extractRange(selection: Date[]): DateRange {
         return {
             start: selection[0] || null,

From dd21608e093b0d626ab21b0df583c7f4eb9aa012 Mon Sep 17 00:00:00 2001
From: Bozhidara Pachilova <bozhidara.pp@gmail.com>
Date: Wed, 13 Aug 2025 18:35:36 +0300
Subject: [PATCH 17/20] feat(drp-sample): add WC drp + properties panel for
 manual testing

---
 src/app/date-range/date-range.sample.html     | 104 +++++++++++
 src/app/date-range/date-range.sample.scss     |   4 +
 src/app/date-range/date-range.sample.ts       | 170 +++++++++++++++++-
 .../properties-panel.component.html           |   5 +
 .../properties-panel.component.ts             |   6 +-
 .../property-change.service.ts                |   3 +-
 6 files changed, 285 insertions(+), 7 deletions(-)

diff --git a/src/app/date-range/date-range.sample.html b/src/app/date-range/date-range.sample.html
index d2f8822e7cd..11c5e1258dd 100644
--- a/src/app/date-range/date-range.sample.html
+++ b/src/app/date-range/date-range.sample.html
@@ -1,3 +1,107 @@
+<div class="angular-wc" [igSize]="properties.size">
+  <div class="angular-wc">
+    <h6>Angular Date Range Picker, two inputs, template-driven form</h6>
+    <igx-date-range-picker
+      name="dp3"
+      [(ngModel)]="properties.value"
+      [mode]="properties.mode"
+      [disabled]="properties.disabled"
+      [required]="properties.required"
+      [displayFormat]="properties.displayFormat"
+      [minValue]="properties.minValue"
+      [maxValue]="properties.maxValue"
+      [disabledDates]="disabledDates"
+      [specialDates]="specialDates"
+      [hasHeader]="properties.hasHeader"
+      [orientation]="properties.orientation"
+      [headerOrientation]="properties.headerOrientation"
+      [displayMonthsCount]="properties.visibleMonths"
+    >
+      <igx-date-range-start>
+        @if (properties.headerTemplate) {
+            <ng-template igxCalendarHeader let-formatCalendar>
+                Custom header content
+            </ng-template>
+        }
+        @if (properties.calendarTitle) {
+            <ng-template igxCalendarHeaderTitle let-formatCalendar>
+                Custom calendar title
+            </ng-template>
+        }
+        @if (properties.separator) {
+            <ng-template igxDateRangeSeparator>
+                <span>{{ properties.separator }}</span>
+            </ng-template>
+        }
+        <igx-picker-toggle igxPrefix>
+          <igx-icon>date_range</igx-icon>
+        </igx-picker-toggle>
+        <igx-picker-clear igxSuffix>
+          <igx-icon>clear</igx-icon>
+        </igx-picker-clear>
+        <label igxLabel>Start date</label>
+        <input
+          igxInput
+          [igxDateTimeEditor]="properties.inputFormat"
+          type="text"
+          [placeholder]="properties.placeholder"
+        />
+      </igx-date-range-start>
+      <igx-date-range-end>
+        <igx-picker-toggle igxPrefix>
+          <igx-icon>date_range</igx-icon>
+        </igx-picker-toggle>
+        <igx-picker-clear igxSuffix>
+          <igx-icon>clear</igx-icon>
+        </igx-picker-clear>
+        <label igxLabel>End date</label>
+        <input
+          igxInput
+          [igxDateTimeEditor]="properties.inputFormat"
+          type="text"
+          [placeholder]="properties.placeholder"
+        />
+      </igx-date-range-end>
+    </igx-date-range-picker>
+  </div>
+
+  <div class="angular-wc">
+    <h6>WC Date Range Picker, two inputs</h6>
+    <igc-date-range-picker
+      use-two-inputs
+      outlined
+      [value]="properties.value"
+      [mode]="properties.mode"
+      [required]="properties.required"
+      [disabled]="properties.disabled"
+      [placeholderStart]="properties.placeholder"
+      [placeholderEnd]="properties.placeholder"
+      [inputFormat]="properties.inputFormat"
+      [displayFormat]="properties.displayFormat"
+      [min]="properties.minValue"
+      [max]="properties.maxValue"
+      [disabledDates]="disabledDates"
+      [specialDates]="specialDates"
+      [hasHeader]="properties.hasHeader"
+      [orientation]="properties.orientation"
+      [headerOrientation]="properties.headerOrientation"
+      [visibleMonths]="properties.visibleMonths"
+      label-start="Start date"
+      label-end="End date"
+    >
+      @if (properties.headerTemplate) {
+        <span slot="header-date"> Custom header content </span>
+      }
+      @if (properties.calendarTitle) {
+        <span slot="title"> Custom calendar title </span>
+      }
+      @if (properties.separator) {
+        <span slot="separator">{{ properties.separator }}</span>
+      }
+    </igc-date-range-picker>
+  </div>
+</div>
+
 <section class="sample-content">
     <div class="sample-row">
         <div class="range-holder">
diff --git a/src/app/date-range/date-range.sample.scss b/src/app/date-range/date-range.sample.scss
index 12578644f4f..b78a07b6433 100644
--- a/src/app/date-range/date-range.sample.scss
+++ b/src/app/date-range/date-range.sample.scss
@@ -35,3 +35,7 @@ $range-sample-space: 16px;
     display: flex;
     max-width: 1200px;
 }
+
+.angular-wc, h6 {
+    margin: 18px;
+}
diff --git a/src/app/date-range/date-range.sample.ts b/src/app/date-range/date-range.sample.ts
index ae4c174e027..0db2ffc0a18 100644
--- a/src/app/date-range/date-range.sample.ts
+++ b/src/app/date-range/date-range.sample.ts
@@ -1,20 +1,38 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, CUSTOM_ELEMENTS_SCHEMA, DestroyRef, ViewChild } from '@angular/core';
 import { JsonPipe } from '@angular/common';
 import { UntypedFormGroup, UntypedFormBuilder, Validators, UntypedFormControl, ValidatorFn, AbstractControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
+import { DateRange, IgxButtonDirective, IgxDateRangePickerComponent, IgxDateTimeEditorDirective, IgxInputDirective, IgxLabelDirective, IgxRadioComponent, IgxRippleDirective, IGX_INPUT_GROUP_TYPE, IChangeCheckboxEventArgs, IGX_DATE_RANGE_PICKER_DIRECTIVES, IgxIconComponent, IgSizeDirective } from 'igniteui-angular';
 import { DateRangeType } from 'igniteui-angular/src/lib/calendar/common/types';
+import { defineComponents, IgcButtonComponent, IgcDateRangePickerComponent, IgcDateTimeInputComponent, IgcIconComponent } from 'igniteui-webcomponents';
+import { Properties, PropertyChangeService, PropertyPanelConfig } from '../properties-panel/property-change.service';
 
+defineComponents(IgcDateRangePickerComponent, IgcButtonComponent, IgcIconComponent, IgcDateTimeInputComponent);
 
 @Component({
     selector: 'app-date-range',
     templateUrl: './date-range.sample.html',
     styleUrls: ['./date-range.sample.scss'],
+    schemas: [CUSTOM_ELEMENTS_SCHEMA],
     providers: [
         {
             provide: IGX_INPUT_GROUP_TYPE,
             useValue: 'border'
         }
     ],
-    imports: [IgxButtonDirective, IgxRippleDirective, IgxDateRangePickerComponent, IgxPickerToggleComponent, IgxSuffixDirective, IgxIconComponent, IgxDateRangeStartComponent, IgxInputDirective, IgxDateTimeEditorDirective, IgxPrefixDirective, IgxDateRangeEndComponent, FormsModule, IgxLabelDirective, IgxRadioComponent, ReactiveFormsModule, JsonPipe]
+    imports: [
+        IgxButtonDirective,
+        IgxRippleDirective,
+        FormsModule,
+        IgxLabelDirective,
+        IgxRadioComponent,
+        ReactiveFormsModule,
+        JsonPipe,
+        IGX_DATE_RANGE_PICKER_DIRECTIVES,
+        IgxInputDirective,
+        IgxDateTimeEditorDirective,
+        IgxIconComponent,
+        IgSizeDirective
+    ]
 })
 export class DateRangeSampleComponent {
     @ViewChild('dr1', { static: true })
@@ -29,14 +47,23 @@ export class DateRangeSampleComponent {
     public range6Start = null;
     public range6End = null;
     public range6: DateRange = { start: this.range6Start, end: this.range6End };
-    public minDate: Date = new Date();
+    public minDate: Date = new Date(new Date().setDate(new Date().getDate() - 20));
     public maxDate: Date = new Date(new Date().setDate(new Date().getDate() + 25));
 
     public reactiveForm: UntypedFormGroup;
+    public DateRangeType = DateRangeType;
 
     public updateOnOptions: string[] = ['change', 'blur', 'submit'];
     public updateOn = 'blur';
 
+
+    public specialDates = [{
+        type: DateRangeType.Between, dateRange: [
+            new Date(new Date().getFullYear(), new Date().getMonth(), 3),
+            new Date(new Date().getFullYear(), new Date().getMonth(), 8)
+        ]
+    }];
+
     public disabledDates = [{
         type: DateRangeType.Between, dateRange: [
             new Date(new Date().getFullYear(), new Date().getMonth(), 20),
@@ -44,7 +71,131 @@ export class DateRangeSampleComponent {
         ]
     }];
 
-    constructor(fb: UntypedFormBuilder) {
+    public panelConfig: PropertyPanelConfig = {
+        size: {
+            control: {
+                type: 'button-group',
+                options: ['small', 'medium', 'large'],
+                defaultValue: 'medium',
+            }
+        },
+        mode: {
+            control: {
+                type: 'button-group',
+                options: ['dropdown', 'dialog'],
+                defaultValue: 'dropdown'
+            }
+        },
+        value: {
+            control: {
+                type: 'date-range',
+                defaultValue: this.range3
+            }
+        },
+        minValue: {
+            label: 'Min Value',
+            control: {
+                type: 'date',
+                defaultValue: this.minDate
+            }
+        },
+        maxValue: {
+            label: 'Max Value',
+            control: {
+                type: 'date',
+                defaultValue: this.maxDate
+            }
+        },
+        required: {
+            control: {
+                type: 'boolean',
+                defaultValue: false
+            }
+        },
+        disabled: {
+            control: {
+                type: 'boolean',
+                defaultValue: false
+            }
+        },
+        placeholder: {
+            control: {
+                type: 'text',
+                defaultValue: 'MM/dd/yyyy'
+            }
+        },
+        displayFormat: {
+            label: 'Display Format',
+            control: {
+                type: 'text'
+            }
+        },
+        inputFormat: {
+            label: 'Input Format',
+            control: {
+                type: 'text'
+            }
+        },
+        hasHeader: {
+            label: 'Has Header (for dialog mode)',
+            control: {
+                type: 'boolean',
+                defaultValue: true
+            }
+        },
+        orientation: {
+            label: 'Orientation',
+            control: {
+                type: 'button-group',
+                options: ['horizontal', 'vertical'],
+                defaultValue: 'horizontal'
+            }
+        },
+        headerOrientation: {
+            label: 'Header Orientation (dialog mode)',
+            control: {
+                type: 'button-group',
+                options: ['horizontal', 'vertical'],
+                defaultValue: 'horizontal'
+            }
+        },
+        headerTemplate: {
+            label: 'Show Header Template (dialog)',
+            control: {
+                type: 'boolean',
+                defaultValue: false
+            }
+        },
+        calendarTitle: {
+            label: 'Show Calendar Title (dialog)',
+            control: {
+                type: 'boolean',
+                defaultValue: false
+            }
+        },
+        separator: {
+            label: 'Separator text',
+            control: {
+                type: 'text',
+                defaultValue: 'to'
+            }
+        },
+        visibleMonths: {
+            label: 'Visible Months',
+            control: {
+                type: 'number',
+                defaultValue: 2,
+            }
+        },
+    };
+
+    public properties: Properties;
+
+    constructor(
+        fb: UntypedFormBuilder,
+        private propertyChangeService: PropertyChangeService,
+        private destroyRef: DestroyRef
+    ) {
         const today = new Date();
         const in5days = new Date();
         in5days.setDate(today.getDate() + 5);
@@ -60,6 +211,17 @@ export class DateRangeSampleComponent {
             start6: ['', { validators: Validators.required, updateOn: this.updateOn }],
             end6: ['', { validators: Validators.required, updateOn: this.updateOn }],
         });
+
+        this.propertyChangeService.setPanelConfig(this.panelConfig);
+
+        const propertyChange =
+            this.propertyChangeService.propertyChanges.subscribe(
+                (properties) => {
+                    this.properties = properties;
+                }
+            );
+
+        this.destroyRef.onDestroy(() => propertyChange.unsubscribe());
     }
 
     public updateOnChange(e: IChangeCheckboxEventArgs) {
diff --git a/src/app/properties-panel/properties-panel.component.html b/src/app/properties-panel/properties-panel.component.html
index 3063b6e079b..4095e896edb 100644
--- a/src/app/properties-panel/properties-panel.component.html
+++ b/src/app/properties-panel/properties-panel.component.html
@@ -46,6 +46,11 @@ <h5 class="properties-panel__title">Properties Panel</h5>
             <igx-date-picker [formControlName]="key" mode="dialog"></igx-date-picker>
             }
 
+            <!-- Date Range Picker -->
+            @if (getControlType(key) === 'date-range') {
+            <igx-date-range-picker [formControlName]="key" mode="dialog" type="border"></igx-date-range-picker>
+            }
+
             <!-- Time Picker -->
             @if (getControlType(key) === 'time') {
             <igx-time-picker [formControlName]="key"></igx-time-picker>
diff --git a/src/app/properties-panel/properties-panel.component.ts b/src/app/properties-panel/properties-panel.component.ts
index f63ea0afbf6..bea4a983f64 100644
--- a/src/app/properties-panel/properties-panel.component.ts
+++ b/src/app/properties-panel/properties-panel.component.ts
@@ -25,7 +25,8 @@ import {
     IgxSelectItemComponent,
     IgxDatePickerComponent,
     IgxTimePickerComponent,
-    IgxDateTimeEditorModule
+    IgxDateTimeEditorModule,
+    IgxDateRangePickerComponent
 } from 'igniteui-angular';
 
 @Component({
@@ -48,7 +49,8 @@ import {
         IgxSelectItemComponent,
         IgxDatePickerComponent,
         IgxTimePickerComponent,
-        IgxDateTimeEditorModule
+        IgxDateTimeEditorModule,
+        IgxDateRangePickerComponent
     ]
 })
 
diff --git a/src/app/properties-panel/property-change.service.ts b/src/app/properties-panel/property-change.service.ts
index 0448b055d5b..b6f0344d107 100644
--- a/src/app/properties-panel/property-change.service.ts
+++ b/src/app/properties-panel/property-change.service.ts
@@ -13,7 +13,8 @@ export type ControlType =
     'text' |
     'date' |
     'time' |
-    'date-time';
+    'date-time' |
+    'date-range';
 
 // eslint-disable-next-line @typescript-eslint/consistent-type-definitions
 export type PropertyPanelConfig = {

From 421e62a4a46fdd291270002e50119a52a4ee576e Mon Sep 17 00:00:00 2001
From: Bozhidara Pachilova <bozhidara.pp@gmail.com>
Date: Thu, 14 Aug 2025 13:13:03 +0300
Subject: [PATCH 18/20] chore(changelog): update with new features for DRP & DP

---
 CHANGELOG.md | 34 ++++++++++++++++++++++++++++++++++
 1 file changed, 34 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index b34431f83c1..412ccd981e8 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,40 @@
 
 All notable changes for each version of this project will be documented in this file.
 
+## Unreleased
+### New Features
+
+- `IgxDateRangePicker`
+    - Now has a complete set of properties to customize the calendar:
+        - `headerOrientation`
+        - `orientation`
+        - `hideHeader`
+        - `activeDate`
+        - `disabledDates`
+        - `specialDates`
+
+    - As well as the following templates, available to customize the contents of the calendar header in `dialog` mode:
+
+        - `igxCalendarHeader`
+        - `igxCalendarHeaderTitle`
+        - `igxCalendarSubheader`
+    - **Behavioral Changes**
+        - The calendar would be displayed with header in `dialog` mode by default.
+        - The picker would remain open when typing (in two-inputs and `dropdown` mode).
+        - The calendar selection would get updated with the typed value.
+        - The calendar view would be updated as per the typed value.
+        - The picker would display a clear icon by default in single input mode.
+- `IgxDatePicker`
+    - Similar to the `IgxDateRangePicker`, also completes the ability to customize the calendar by introducing the following
+    properties in addition to the existing ones:
+        - `hideHeader`
+        - `orientation`
+        - `activeDate`
+    - **Behavioral Changes**
+        - The calendar selection would get updated with the typed value.
+        - The calendar view would be updated as per the typed date value.
+
+
 ## 20.1.0
 ### New Features
 - `IgxCarousel`

From 3155f949cf05dfd9c1d412050a044a2dd1356ab8 Mon Sep 17 00:00:00 2001
From: Bozhidara Pachilova <bozhidara.pp@gmail.com>
Date: Tue, 26 Aug 2025 11:01:13 +0300
Subject: [PATCH 19/20] chore(*): remove fdescribe

---
 .../lib/date-range-picker/date-range-picker.component.spec.ts   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts
index 969f2e2a7d4..06d9f684cd8 100644
--- a/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts
+++ b/projects/igniteui-angular/src/lib/date-range-picker/date-range-picker.component.spec.ts
@@ -50,7 +50,7 @@ const CSS_CLASS_CALENDAR_HEADER_TITLE = '.igx-calendar__header-year';
 const CSS_CLASS_CALENDAR_SUBHEADER = '.igx-calendar-picker__dates';
 const CSS_CLASS_CALENDAR_HEADER = '.igx-calendar__header';
 const CSS_CLASS_CALENDAR_WRAPPER_VERTICAL = 'igx-calendar__wrapper--vertical';
-fdescribe('IgxDateRangePicker', () => {
+describe('IgxDateRangePicker', () => {
     describe('Unit tests: ', () => {
         let mockElement: any;
         let mockApplicationRef: any;

From ee66490a07c69ead1382eb7bd62a0041bb4fdd1f Mon Sep 17 00:00:00 2001
From: Bozhidara Pachilova <bozhidara.pp@gmail.com>
Date: Tue, 26 Aug 2025 16:07:25 +0300
Subject: [PATCH 20/20] chore(drp-dev-sample): bind hideHeader properly

---
 src/app/date-range/date-range.sample.html | 4 ++--
 src/app/date-range/date-range.sample.ts   | 6 +++---
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/src/app/date-range/date-range.sample.html b/src/app/date-range/date-range.sample.html
index 33438bae438..611ecdd549e 100644
--- a/src/app/date-range/date-range.sample.html
+++ b/src/app/date-range/date-range.sample.html
@@ -12,7 +12,7 @@ <h6>Angular Date Range Picker, two inputs, template-driven form</h6>
       [maxValue]="properties.maxValue"
       [disabledDates]="disabledDates"
       [specialDates]="specialDates"
-      [hasHeader]="properties.hasHeader"
+      [hideHeader]="properties.hideHeader"
       [orientation]="properties.orientation"
       [headerOrientation]="properties.headerOrientation"
       [displayMonthsCount]="properties.visibleMonths"
@@ -82,7 +82,7 @@ <h6>WC Date Range Picker, two inputs</h6>
       [max]="properties.maxValue"
       [disabledDates]="disabledDates"
       [specialDates]="specialDates"
-      [hasHeader]="properties.hasHeader"
+      [hideHeader]="properties.hideHeader"
       [orientation]="properties.orientation"
       [headerOrientation]="properties.headerOrientation"
       [visibleMonths]="properties.visibleMonths"
diff --git a/src/app/date-range/date-range.sample.ts b/src/app/date-range/date-range.sample.ts
index 1f4e0a678ee..32552780c44 100644
--- a/src/app/date-range/date-range.sample.ts
+++ b/src/app/date-range/date-range.sample.ts
@@ -162,11 +162,11 @@ export class DateRangeSampleComponent {
                 type: 'text'
             }
         },
-        hasHeader: {
-            label: 'Has Header (for dialog mode)',
+        hideHeader: {
+            label: 'Hide Header (for dialog mode)',
             control: {
                 type: 'boolean',
-                defaultValue: true
+                defaultValue: false
             }
         },
         orientation: {