diff --git a/.storybook/stories/datepicker/datepicker.stories.ts b/.storybook/stories/datepicker/datepicker.stories.ts
index 8eea1ec894..a0a92c6498 100644
--- a/.storybook/stories/datepicker/datepicker.stories.ts
+++ b/.storybook/stories/datepicker/datepicker.stories.ts
@@ -36,19 +36,14 @@ export default {
     getDateString: { control: { disable: true }, table: { disable: true } },
   },
   args: {
+    // inputs
     disabled: false,
     placeholder: '',
     id: '',
     // outputs
     clrDateChange: action('clrDateChange'),
     // story helpers
-    getDateObject: date => {
-      try {
-        return date && new Date(date).toISOString();
-      } catch {
-        return undefined;
-      }
-    },
+    getDateObject: date => new Date(date),
     getDateString: date => date && new Date(date).toISOString().split('T')[0],
   },
 };
@@ -61,7 +56,7 @@ const DatePickerTemplate: StoryFn = args => ({
         #date
         type="date"
         [id]="id"
-        [clrDate]="getDateObject(date.value || clrDate)"
+        [clrDate]="getDateObject(clrDate || date.value)"
         [min]="getDateString(min)"
         [max]="getDateString(max)"
         [disabled]="disabled"
diff --git a/.storybook/stories/datepicker/daterangepicker.stories.ts b/.storybook/stories/datepicker/daterangepicker.stories.ts
deleted file mode 100644
index fa4c288b04..0000000000
--- a/.storybook/stories/datepicker/daterangepicker.stories.ts
+++ /dev/null
@@ -1,120 +0,0 @@
-/*
- * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-
-import { ClrDatepickerModule, ClrDateRangeEndInput, ClrDateRangeStartInput, ClrFormsModule } from '@clr/angular';
-import { action } from '@storybook/addon-actions';
-import { moduleMetadata, StoryFn, StoryObj } from '@storybook/angular';
-import { CommonModules } from 'helpers/common';
-
-export default {
-  title: 'Datepicker/DateRangepicker',
-  component: ClrDateRangeStartInput,
-  subcomponents: { ClrDateRangeEndInput },
-  decorators: [
-    moduleMetadata({
-      imports: [...CommonModules, ClrFormsModule, ClrDatepickerModule],
-    }),
-  ],
-  argTypes: {
-    // inputs
-    clrRangeStartDate: { control: { type: 'date' } },
-    clrRangeEndDate: { control: { type: 'date' } },
-    max: { control: { type: 'date' } },
-    min: { control: { type: 'date' } },
-    disabled: { control: { type: 'boolean' } },
-    // outputs
-    clrRangeStartDateChange: { control: { disable: true } },
-    clrRangeEndDateChange: { control: { disable: true } },
-    // methods
-    onValueChange: { control: { disable: true }, table: { disable: true } },
-    setFocusStates: { control: { disable: true }, table: { disable: true } },
-    triggerValidation: { control: { disable: true }, table: { disable: true } },
-    getProviderFromContainer: { control: { disable: true }, table: { disable: true } },
-    // story helpers
-    getDateObject: { control: { disable: true }, table: { disable: true } },
-    getDateString: { control: { disable: true }, table: { disable: true } },
-  },
-  args: {
-    disabled: false,
-    placeholder: '',
-    id: '',
-    // outputs
-    clrRangeStartDateChange: action('clrRangeStartDateChange'),
-    clrRangeEndDateChange: action('clrRangeEndDateChange'),
-    // story helpers
-    getDateObject: date => {
-      try {
-        return date && new Date(date).toISOString();
-      } catch {
-        return undefined;
-      }
-    },
-    getDateString: date => date && new Date(date).toISOString().split('T')[0],
-  },
-};
-
-const DateRangePickerTemplate: StoryFn = args => ({
-  template: `
-    <clr-date-range-container [min]="getDateString(min)" [max]="getDateString(max)">
-      <label for="dateRangeCtrl">Date Range</label>
-      <input
-        #startDate
-        id="startDate"
-        aria-labelledby="dateRangeCtrl"
-        name="startDate"
-        type="date"
-        [disabled]="disabled"
-        [clrRangeStartDate]="getDateObject(clrRangeStartDate || startDate.value)"
-        (clrRangeStartDateChange)="clrRangeStartDateChange($event)"
-      />
-      <input
-        #endDate
-        id="endDate"
-        aria-labelledby="dateRangeCtrl"
-        name="endDate"
-        type="date"
-        [disabled]="disabled"
-        [clrRangeEndDate]="getDateObject(clrRangeEndDate || endDate.value)"
-        (clrRangeEndDateChange)="clrRangeEndDateChange($event)"
-      />
-    </clr-date-range-container>
-  `,
-  props: { ...args },
-});
-
-export const DateRangePicker: StoryObj = {
-  render: DateRangePickerTemplate,
-};
-
-export const DefaultDate: StoryObj = {
-  render: DateRangePickerTemplate,
-  args: {
-    clrRangeStartDate: '2024-06-22 00:00:00.000',
-    clrRangeEndDate: '2024-08-21 00:00:00.000',
-  },
-};
-
-export const Disabled: StoryObj = {
-  render: DateRangePickerTemplate,
-  args: {
-    disabled: true,
-  },
-};
-
-export const MinDate: StoryObj = {
-  render: DateRangePickerTemplate,
-  args: {
-    min: Date.now() - 2592000000,
-  },
-};
-
-export const MaxDate: StoryObj = {
-  render: DateRangePickerTemplate,
-  args: {
-    max: Date.now() + 2592000000,
-  },
-};
diff --git a/projects/angular/clarity.api.md b/projects/angular/clarity.api.md
index 8b2112e60d..0077c45e41 100644
--- a/projects/angular/clarity.api.md
+++ b/projects/angular/clarity.api.md
@@ -98,8 +98,8 @@ export class ClarityModule {
     // Warning: (ae-forgotten-export) The symbol "i7_6" needs to be exported by the entry point index.d.ts
     // Warning: (ae-forgotten-export) The symbol "i8_6" needs to be exported by the entry point index.d.ts
     // Warning: (ae-forgotten-export) The symbol "i9_2" needs to be exported by the entry point index.d.ts
-    // Warning: (ae-forgotten-export) The symbol "i10_5" needs to be exported by the entry point index.d.ts
-    // Warning: (ae-forgotten-export) The symbol "i11_5" needs to be exported by the entry point index.d.ts
+    // Warning: (ae-forgotten-export) The symbol "i10_4" needs to be exported by the entry point index.d.ts
+    // Warning: (ae-forgotten-export) The symbol "i11_4" needs to be exported by the entry point index.d.ts
     // Warning: (ae-forgotten-export) The symbol "i12_3" needs to be exported by the entry point index.d.ts
     // Warning: (ae-forgotten-export) The symbol "i13_3" needs to be exported by the entry point index.d.ts
     // Warning: (ae-forgotten-export) The symbol "i14_2" needs to be exported by the entry point index.d.ts
@@ -109,7 +109,7 @@ export class ClarityModule {
     // Warning: (ae-forgotten-export) The symbol "i18_2" needs to be exported by the entry point index.d.ts
     //
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ClarityModule, never, never, [typeof i1.ClrEmphasisModule, typeof i2_4.ClrDataModule, typeof i3_2.ClrIconModule, typeof i4_12.ClrModalModule, typeof i5_7.ClrLoadingModule, typeof i6_2.ClrConditionalModule, typeof i7_6.ClrFocusOnViewInitModule, typeof i8_6.ClrButtonModule, typeof i9_2.ClrFormsModule, typeof i10_5.ClrLayoutModule, typeof i11_5.ClrPopoverModule, typeof i12_3.ClrWizardModule, typeof i13_3.ClrSidePanelModule, typeof i14_2.ClrStepperModule, typeof i15.ClrSpinnerModule, typeof i16_2.ClrProgressBarModule, typeof i17_2.ClrPopoverModuleNext, typeof i18_2.ClrTimelineModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ClarityModule, never, never, [typeof i1.ClrEmphasisModule, typeof i2_4.ClrDataModule, typeof i3_2.ClrIconModule, typeof i4_12.ClrModalModule, typeof i5_7.ClrLoadingModule, typeof i6_2.ClrConditionalModule, typeof i7_6.ClrFocusOnViewInitModule, typeof i8_6.ClrButtonModule, typeof i9_2.ClrFormsModule, typeof i10_4.ClrLayoutModule, typeof i11_4.ClrPopoverModule, typeof i12_3.ClrWizardModule, typeof i13_3.ClrSidePanelModule, typeof i14_2.ClrStepperModule, typeof i15.ClrSpinnerModule, typeof i16_2.ClrProgressBarModule, typeof i17_2.ClrPopoverModuleNext, typeof i18_2.ClrTimelineModule]>;
 }
 
 // @public (undocumented)
@@ -186,8 +186,6 @@ export abstract class ClrAbstractContainer implements DynamicWrapper, OnDestroy,
     // (undocumented)
     addGrid(): boolean;
     // (undocumented)
-    additionalControls: NgControl[];
-    // (undocumented)
     control: NgControl;
     // (undocumented)
     controlClass(): string;
@@ -680,8 +678,6 @@ export class ClrCalendar implements OnDestroy {
     // (undocumented)
     get selectedDay(): DayModel;
     // (undocumented)
-    get selectedEndDay(): DayModel;
-    // (undocumented)
     get today(): DayModel;
     // (undocumented)
     static ɵcmp: i0.ɵɵComponentDeclaration<ClrCalendar, "clr-calendar", never, {}, {}, never, never, false, never>;
@@ -1990,16 +1986,12 @@ export class ClrDateContainer extends ClrAbstractContainer implements AfterViewI
     // Warning: (ae-forgotten-export) The symbol "DatepickerEnabledService" needs to be exported by the entry point index.d.ts
     // Warning: (ae-forgotten-export) The symbol "DateFormControlService" needs to be exported by the entry point index.d.ts
     // Warning: (ae-forgotten-export) The symbol "ViewManagerService" needs to be exported by the entry point index.d.ts
-    constructor(renderer: Renderer2, elem: ElementRef<HTMLElement>, toggleService: ClrPopoverToggleService, dateNavigationService: DateNavigationService, datepickerEnabledService: DatepickerEnabledService, dateFormControlService: DateFormControlService, dateIOService: DateIOService, commonStrings: ClrCommonStringsService, focusService: FocusService_2, viewManagerService: ViewManagerService, controlClassService: ControlClassService, layoutService: LayoutService, ngControlService: NgControlService, ifControlStateService: IfControlStateService);
+    constructor(renderer: Renderer2, toggleService: ClrPopoverToggleService, dateNavigationService: DateNavigationService, datepickerEnabledService: DatepickerEnabledService, dateFormControlService: DateFormControlService, dateIOService: DateIOService, commonStrings: ClrCommonStringsService, focusService: FocusService_2, viewManagerService: ViewManagerService, controlClassService: ControlClassService, layoutService: LayoutService, ngControlService: NgControlService, ifControlStateService: IfControlStateService);
     // (undocumented)
     set actionButton(button: ElementRef);
     // (undocumented)
     set clrPosition(position: string);
     // (undocumented)
-    clrRangeEndEl: ClrDateRangeEndInput;
-    // (undocumented)
-    clrRangeStartEl: ClrDateRangeStartInput;
-    // (undocumented)
     commonStrings: ClrCommonStringsService;
     // (undocumented)
     protected controlClassService: ControlClassService;
@@ -2012,10 +2004,6 @@ export class ClrDateContainer extends ClrAbstractContainer implements AfterViewI
     // (undocumented)
     protected layoutService: LayoutService;
     // (undocumented)
-    set max(dateString: string);
-    // (undocumented)
-    set min(dateString: string);
-    // (undocumented)
     ngAfterViewInit(): void;
     // (undocumented)
     protected ngControlService: NgControlService;
@@ -2024,58 +2012,28 @@ export class ClrDateContainer extends ClrAbstractContainer implements AfterViewI
     // (undocumented)
     get popoverPosition(): ClrPopoverPosition;
     // (undocumented)
-    set rangeOptions(rangeOptions: any);
-    // (undocumented)
     protected renderer: Renderer2;
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<ClrDateContainer, "clr-date-container, clr-date-range-container", never, { "clrPosition": "clrPosition"; "rangeOptions": "rangeOptions"; "min": "min"; "max": "max"; }, {}, ["clrRangeStartEl", "clrRangeEndEl"], ["label", "[clrDate]", "[clrRangeStartDate]", "[clrRangeEndDate]", "clr-control-helper", "clr-control-error", "clr-control-success"], false, [{ directive: typeof i1_6.ClrPopoverHostDirective; inputs: {}; outputs: {}; }]>;
-    // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<ClrDateContainer, [null, null, null, null, null, null, null, null, null, null, null, { optional: true; }, null, null]>;
-}
-
-// @public (undocumented)
-export class ClrDateInput extends ClrDateInputBase implements AfterViewInit {
-    // (undocumented)
-    set date(date: Date | string);
-    // (undocumented)
-    dateChange: EventEmitter<Date>;
-    // (undocumented)
-    ngAfterViewInit(): void;
-    // (undocumented)
-    ngOnInit(): void;
-    // (undocumented)
-    onValueChange(target: HTMLInputElement): void;
-    // (undocumented)
-    protected updateDate(value: Date, setByUserInteraction?: boolean, fieldName?: string): void;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ClrDateContainer, "clr-date-container", never, { "clrPosition": "clrPosition"; }, {}, never, ["label", "[clrDate]", "clr-control-helper", "clr-control-error", "clr-control-success"], false, [{ directive: typeof i1_6.ClrPopoverHostDirective; inputs: {}; outputs: {}; }]>;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ClrDateInput, "[clrDate]", never, { "date": "clrDate"; }, { "dateChange": "clrDateChange"; }, never, never, false, never>;
-    // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<ClrDateInput, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ClrDateContainer, [null, null, null, null, null, null, null, null, null, null, { optional: true; }, null, null]>;
 }
 
 // @public (undocumented)
-export class ClrDateInputBase extends WrappedFormControl<ClrDateContainer> implements OnInit, AfterViewInit, OnDestroy {
-    constructor(viewContainerRef: ViewContainerRef, injector: Injector, el: ElementRef<HTMLInputElement>, renderer: Renderer2, document: any, control: NgControl, container: ClrDateContainer, dateIOService: DateIOService, dateNavigationService: DateNavigationService, datepickerEnabledService: DatepickerEnabledService, dateFormControlService: DateFormControlService, platformId: any, focusService: FocusService_2, datepickerFocusService: DatepickerFocusService);
+export class ClrDateInput extends WrappedFormControl<ClrDateContainer> implements OnInit, AfterViewInit, OnDestroy {
+    constructor(viewContainerRef: ViewContainerRef, injector: Injector, el: ElementRef<HTMLInputElement>, renderer: Renderer2, control: NgControl, container: ClrDateContainer, dateIOService: DateIOService, dateNavigationService: DateNavigationService, datepickerEnabledService: DatepickerEnabledService, dateFormControlService: DateFormControlService, platformId: any, focusService: FocusService_2, datepickerFocusService: DatepickerFocusService);
     // (undocumented)
     protected control: NgControl;
     // (undocumented)
-    protected dateIOService: DateIOService;
-    // (undocumented)
-    protected dateNavigationService: DateNavigationService;
-    // (undocumented)
-    protected datepickerFocusService: DatepickerFocusService;
+    set date(date: Date | string);
     // (undocumented)
-    protected datepickerHasFormControl(): boolean;
+    dateChange: EventEmitter<Date>;
     // (undocumented)
     get disabled(): boolean | string;
     set disabled(value: boolean | string);
     // (undocumented)
-    protected document: any;
-    // (undocumented)
     protected el: ElementRef<HTMLInputElement>;
     // (undocumented)
-    protected getValidDateValueFromDate(date: Date): Date;
-    // (undocumented)
     protected index: number;
     // (undocumented)
     get inputType(): string;
@@ -2090,6 +2048,8 @@ export class ClrDateInputBase extends WrappedFormControl<ClrDateContainer> imple
     // (undocumented)
     ngOnInit(): void;
     // (undocumented)
+    onValueChange(target: HTMLInputElement): void;
+    // (undocumented)
     placeholder: string;
     // (undocumented)
     get placeholderText(): string;
@@ -2100,16 +2060,9 @@ export class ClrDateInputBase extends WrappedFormControl<ClrDateContainer> imple
     // (undocumented)
     triggerValidation(): void;
     // (undocumented)
-    protected updateInput(date: Date): void;
-    // (undocumented)
-    protected usingClarityDatepicker(): boolean;
-    // (undocumented)
-    protected usingNativeDatepicker(): boolean;
-    protected validateDateRange(): void;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ClrDateInput, "[clrDate]", never, { "placeholder": "placeholder"; "date": "clrDate"; "min": "min"; "max": "max"; "disabled": "disabled"; }, { "dateChange": "clrDateChange"; }, never, never, false, never>;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ClrDateInputBase, never, never, { "placeholder": "placeholder"; "min": "min"; "max": "max"; "disabled": "disabled"; }, {}, never, never, false, never>;
-    // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<ClrDateInputBase, [null, null, null, null, null, { optional: true; self: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, null, { optional: true; }, null]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ClrDateInput, [null, null, null, null, { optional: true; self: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, { optional: true; }, null, { optional: true; }, null]>;
 }
 
 // @public (undocumented)
@@ -2118,7 +2071,7 @@ export class ClrDateInputValidator implements Validator {
     // (undocumented)
     validate(control: AbstractControl): ValidationErrors;
     // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ClrDateInputValidator, "[clrDate], [clrRangeStartDate], [clrRangeEndDate]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<ClrDateInputValidator, "[clrDate]", never, {}, {}, never, never, false, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<ClrDateInputValidator, [{ optional: true; }]>;
 }
@@ -2139,122 +2092,33 @@ export class ClrDatepickerModule {
     // Warning: (ae-forgotten-export) The symbol "i7_4" needs to be exported by the entry point index.d.ts
     // Warning: (ae-forgotten-export) The symbol "i8_4" needs to be exported by the entry point index.d.ts
     // Warning: (ae-forgotten-export) The symbol "i9_4" needs to be exported by the entry point index.d.ts
-    // Warning: (ae-forgotten-export) The symbol "i10_3" needs to be exported by the entry point index.d.ts
-    // Warning: (ae-forgotten-export) The symbol "i11_2" needs to be exported by the entry point index.d.ts
     //
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ClrDatepickerModule, [typeof i1_18.ClrDay, typeof i2_12.ClrDateContainer, typeof i3_12.ClrDateInput, typeof i4_8.ClrDateRangeStartInput, typeof i5_6.ClrDateRangeEndInput, typeof i6_6.ClrDateInputValidator, typeof i6_6.ClrDateRangeStartInputValidator, typeof i6_6.ClrDateRangeEndInputValidator, typeof i7_4.ClrDatepickerViewManager, typeof i8_4.ClrMonthpicker, typeof i9_4.ClrYearpicker, typeof i10_3.ClrDaypicker, typeof i11_2.ClrCalendar], [typeof i6.CommonModule, typeof i39.CdkTrapFocusModule, typeof i7_3.ClrHostWrappingModule, typeof i6_2.ClrConditionalModule, typeof i17_2.ClrPopoverModuleNext, typeof i3_2.ClrIconModule, typeof i2_6.ClrCommonFormsModule], [typeof i1_18.ClrDay, typeof i2_12.ClrDateContainer, typeof i3_12.ClrDateInput, typeof i4_8.ClrDateRangeStartInput, typeof i5_6.ClrDateRangeEndInput, typeof i6_6.ClrDateInputValidator, typeof i6_6.ClrDateRangeStartInputValidator, typeof i6_6.ClrDateRangeEndInputValidator, typeof i7_4.ClrDatepickerViewManager, typeof i8_4.ClrMonthpicker, typeof i9_4.ClrYearpicker, typeof i10_3.ClrDaypicker, typeof i11_2.ClrCalendar]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ClrDatepickerModule, [typeof i1_18.ClrDay, typeof i2_12.ClrDateContainer, typeof i3_12.ClrDateInput, typeof i4_8.ClrDateInputValidator, typeof i5_6.ClrDatepickerViewManager, typeof i6_6.ClrMonthpicker, typeof i7_4.ClrYearpicker, typeof i8_4.ClrDaypicker, typeof i9_4.ClrCalendar], [typeof i6.CommonModule, typeof i39.CdkTrapFocusModule, typeof i7_3.ClrHostWrappingModule, typeof i6_2.ClrConditionalModule, typeof i17_2.ClrPopoverModuleNext, typeof i3_2.ClrIconModule, typeof i2_6.ClrCommonFormsModule], [typeof i1_18.ClrDay, typeof i2_12.ClrDateContainer, typeof i3_12.ClrDateInput, typeof i4_8.ClrDateInputValidator, typeof i5_6.ClrDatepickerViewManager, typeof i6_6.ClrMonthpicker, typeof i7_4.ClrYearpicker, typeof i8_4.ClrDaypicker, typeof i9_4.ClrCalendar]>;
 }
 
 // @public (undocumented)
 export class ClrDatepickerViewManager {
-    // Warning: (ae-forgotten-export) The symbol "DatePickerHelperService" needs to be exported by the entry point index.d.ts
-    constructor(commonStrings: ClrCommonStringsService, viewManagerService: ViewManagerService, dateIOService: DateIOService, datePickerHelperService: DatePickerHelperService, dateNavigationService: DateNavigationService);
+    constructor(commonStrings: ClrCommonStringsService, viewManagerService: ViewManagerService);
     // (undocumented)
     commonStrings: ClrCommonStringsService;
-    // (undocumented)
-    dateRangeOptions: any;
-    // (undocumented)
-    get hasRangeOptions(): any;
     get isDayView(): boolean;
     get isMonthView(): boolean;
     get isYearView(): boolean;
     // (undocumented)
-    onRangeOptionSelect(selectedRange: any): void;
-    // (undocumented)
     static ɵcmp: i0.ɵɵComponentDeclaration<ClrDatepickerViewManager, "clr-datepicker-view-manager", never, {}, {}, never, never, false, never>;
     // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<ClrDatepickerViewManager, [null, null, null, { optional: true; }, null]>;
-}
-
-// @public (undocumented)
-export class ClrDateRangeEndInput extends ClrDateInputBase implements AfterViewInit {
-    // (undocumented)
-    set date(date: Date | string);
-    // (undocumented)
-    dateChange: EventEmitter<Date>;
-    // (undocumented)
-    get inputSize(): number;
-    // (undocumented)
-    inputWidth: number;
-    // (undocumented)
-    ngAfterViewInit(): void;
-    // (undocumented)
-    ngOnInit(): void;
-    // (undocumented)
-    onValueChange(target: HTMLInputElement): void;
-    // (undocumented)
-    triggerControlInputValidation(): void;
-    // (undocumented)
-    protected updateDate(value: Date, setByUserInteraction?: boolean): void;
-    // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ClrDateRangeEndInput, "[clrRangeEndDate]", never, { "inputWidth": "inputWidth"; "date": "clrRangeEndDate"; }, { "dateChange": "clrRangeEndDateChange"; }, never, never, false, never>;
-    // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<ClrDateRangeEndInput, never>;
-}
-
-// @public (undocumented)
-export class ClrDateRangeEndInputValidator implements Validator {
-    constructor(dateIOService: DateIOService, dateNavigationService: DateNavigationService);
-    // (undocumented)
-    validate(control: AbstractControl): ValidationErrors;
-    // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ClrDateRangeEndInputValidator, "[clrRangeEndDate]", never, {}, {}, never, never, false, never>;
-    // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<ClrDateRangeEndInputValidator, [{ optional: true; }, { optional: true; }]>;
-}
-
-// @public (undocumented)
-export class ClrDateRangeStartInput extends ClrDateInputBase implements AfterViewInit {
-    // (undocumented)
-    set date(date: Date | string);
-    // (undocumented)
-    dateChange: EventEmitter<Date>;
-    // (undocumented)
-    get inputSize(): number;
-    // (undocumented)
-    inputWidth: number;
-    // (undocumented)
-    ngAfterViewInit(): void;
-    // (undocumented)
-    ngOnInit(): void;
-    // (undocumented)
-    onValueChange(target: HTMLInputElement): void;
-    // (undocumented)
-    triggerControlInputValidation(): void;
-    // (undocumented)
-    protected updateDate(value: Date, setByUserInteraction?: boolean): void;
-    // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ClrDateRangeStartInput, "[clrRangeStartDate]", never, { "inputWidth": "inputWidth"; "date": "clrRangeStartDate"; }, { "dateChange": "clrRangeStartDateChange"; }, never, never, false, never>;
-    // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<ClrDateRangeStartInput, never>;
-}
-
-// @public (undocumented)
-export class ClrDateRangeStartInputValidator implements Validator {
-    constructor(dateIOService: DateIOService, dateNavigationService: DateNavigationService);
-    // (undocumented)
-    validate(control: AbstractControl): ValidationErrors;
-    // (undocumented)
-    static ɵdir: i0.ɵɵDirectiveDeclaration<ClrDateRangeStartInputValidator, "[clrRangeStartDate]", never, {}, {}, never, never, false, never>;
-    // (undocumented)
-    static ɵfac: i0.ɵɵFactoryDeclaration<ClrDateRangeStartInputValidator, [{ optional: true; }, { optional: true; }]>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ClrDatepickerViewManager, never>;
 }
 
 // @public (undocumented)
 export class ClrDay {
-    constructor(_dateNavigationService: DateNavigationService, _datePickerHelperService: DatePickerHelperService, commonStrings: ClrCommonStringsService);
+    constructor(_dateNavigationService: DateNavigationService, _toggleService: ClrPopoverToggleService, dateFormControlService: DateFormControlService, commonStrings: ClrCommonStringsService);
     // (undocumented)
     get dayString(): string;
     // Warning: (ae-forgotten-export) The symbol "DayViewModel" needs to be exported by the entry point index.d.ts
     get dayView(): DayViewModel;
     set dayView(day: DayViewModel);
-    hoverListener(): void;
-    isInRange(): boolean;
-    // (undocumented)
-    get isRangeEndDay(): boolean;
-    // (undocumented)
-    get isRangeStartDay(): boolean;
     onDayViewFocus(): void;
     selectDay(): void;
     // (undocumented)
@@ -2580,13 +2444,13 @@ export class ClrFormsModule {
     // Warning: (ae-forgotten-export) The symbol "i6_7" needs to be exported by the entry point index.d.ts
     // Warning: (ae-forgotten-export) The symbol "i8_5" needs to be exported by the entry point index.d.ts
     // Warning: (ae-forgotten-export) The symbol "i9_5" needs to be exported by the entry point index.d.ts
-    // Warning: (ae-forgotten-export) The symbol "i10_4" needs to be exported by the entry point index.d.ts
-    // Warning: (ae-forgotten-export) The symbol "i11_3" needs to be exported by the entry point index.d.ts
+    // Warning: (ae-forgotten-export) The symbol "i10_3" needs to be exported by the entry point index.d.ts
+    // Warning: (ae-forgotten-export) The symbol "i11_2" needs to be exported by the entry point index.d.ts
     // Warning: (ae-forgotten-export) The symbol "i12_2" needs to be exported by the entry point index.d.ts
     // Warning: (ae-forgotten-export) The symbol "i13_2" needs to be exported by the entry point index.d.ts
     //
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ClrFormsModule, never, [typeof i6.CommonModule], [typeof i2_6.ClrCommonFormsModule, typeof i3_7.ClrCheckboxModule, typeof i4_5.ClrComboboxModule, typeof i5_5.ClrDatepickerModule, typeof i6_7.ClrFileInputModule, typeof i7_5.ClrInputModule, typeof i8_5.ClrPasswordModule, typeof i9_5.ClrRadioModule, typeof i10_4.ClrSelectModule, typeof i11_3.ClrTextareaModule, typeof i12_2.ClrRangeModule, typeof i13_2.ClrDatalistModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ClrFormsModule, never, [typeof i6.CommonModule], [typeof i2_6.ClrCommonFormsModule, typeof i3_7.ClrCheckboxModule, typeof i4_5.ClrComboboxModule, typeof i5_5.ClrDatepickerModule, typeof i6_7.ClrFileInputModule, typeof i7_5.ClrInputModule, typeof i8_5.ClrPasswordModule, typeof i9_5.ClrRadioModule, typeof i10_3.ClrSelectModule, typeof i11_2.ClrTextareaModule, typeof i12_2.ClrRangeModule, typeof i13_2.ClrDatalistModule]>;
 }
 
 // @public (undocumented)
@@ -3021,8 +2885,7 @@ export class ClrModalModule {
 
 // @public (undocumented)
 export class ClrMonthpicker implements AfterViewInit {
-    constructor(_localeHelperService: LocaleHelperService, _dateNavigationService: DateNavigationService, _datepickerFocusService: DatepickerFocusService, _elRef: ElementRef<HTMLElement>, _viewManagerService: ViewManagerService, commonStrings: ClrCommonStringsService);
-    get calendarEndMonthIndex(): number;
+    constructor(_viewManagerService: ViewManagerService, _localeHelperService: LocaleHelperService, _dateNavigationService: DateNavigationService, _datepickerFocusService: DatepickerFocusService, _elRef: ElementRef<HTMLElement>, commonStrings: ClrCommonStringsService);
     get calendarMonthIndex(): number;
     get calendarYear(): number;
     changeMonth(monthIndex: number): void;
@@ -3034,18 +2897,12 @@ export class ClrMonthpicker implements AfterViewInit {
     // (undocumented)
     get currentCalendarYear(): number;
     currentYear(): void;
-    // (undocumented)
-    getIsRangeEndMonth(monthIndex: number): boolean;
-    // (undocumented)
-    getIsRangeStartMonth(monthIndex: number): boolean;
     getTabIndex(monthIndex: number): number;
-    isInRange(monthIndex: number): boolean;
     // (undocumented)
     isSelected(monthIndex: number): boolean;
     get monthNames(): ReadonlyArray<string>;
     nextYear(): void;
     ngAfterViewInit(): void;
-    onHover(monthIndex: number): void;
     onKeyDown(event: KeyboardEvent): void;
     previousYear(): void;
     // (undocumented)
@@ -4248,10 +4105,10 @@ export class ClrTabsModule {
     // Warning: (ae-forgotten-export) The symbol "i5_11" needs to be exported by the entry point index.d.ts
     // Warning: (ae-forgotten-export) The symbol "i6_8" needs to be exported by the entry point index.d.ts
     // Warning: (ae-forgotten-export) The symbol "i7_7" needs to be exported by the entry point index.d.ts
-    // Warning: (ae-forgotten-export) The symbol "i11_4" needs to be exported by the entry point index.d.ts
+    // Warning: (ae-forgotten-export) The symbol "i11_3" needs to be exported by the entry point index.d.ts
     //
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ClrTabsModule, [typeof i1_41.ClrTabContent, typeof i2_29.ClrTab, typeof i3_21.ClrTabs, typeof i4_14.ClrTabOverflowContent, typeof i5_11.ClrTabLink, typeof i6_8.TabsWillyWonka, typeof i7_7.ActiveOompaLoompa], [typeof i6.CommonModule, typeof i6_2.ClrConditionalModule, typeof i3_2.ClrIconModule, typeof i11_4.ClrTemplateRefModule, typeof i49.ClrKeyFocusModule], [typeof i1_41.ClrTabContent, typeof i2_29.ClrTab, typeof i3_21.ClrTabs, typeof i4_14.ClrTabOverflowContent, typeof i5_11.ClrTabLink, typeof i6_8.TabsWillyWonka, typeof i7_7.ActiveOompaLoompa, typeof i6_2.ClrConditionalModule]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ClrTabsModule, [typeof i1_41.ClrTabContent, typeof i2_29.ClrTab, typeof i3_21.ClrTabs, typeof i4_14.ClrTabOverflowContent, typeof i5_11.ClrTabLink, typeof i6_8.TabsWillyWonka, typeof i7_7.ActiveOompaLoompa], [typeof i6.CommonModule, typeof i6_2.ClrConditionalModule, typeof i3_2.ClrIconModule, typeof i11_3.ClrTemplateRefModule, typeof i49.ClrKeyFocusModule], [typeof i1_41.ClrTabContent, typeof i2_29.ClrTab, typeof i3_21.ClrTabs, typeof i4_14.ClrTabOverflowContent, typeof i5_11.ClrTabLink, typeof i6_8.TabsWillyWonka, typeof i7_7.ActiveOompaLoompa, typeof i6_2.ClrConditionalModule]>;
 }
 
 // @public (undocumented)
@@ -4842,11 +4699,11 @@ export class ClrWizardModule {
     // Warning: (ae-forgotten-export) The symbol "i7_8" needs to be exported by the entry point index.d.ts
     // Warning: (ae-forgotten-export) The symbol "i8_7" needs to be exported by the entry point index.d.ts
     // Warning: (ae-forgotten-export) The symbol "i9_6" needs to be exported by the entry point index.d.ts
-    // Warning: (ae-forgotten-export) The symbol "i10_6" needs to be exported by the entry point index.d.ts
-    // Warning: (ae-forgotten-export) The symbol "i11_6" needs to be exported by the entry point index.d.ts
+    // Warning: (ae-forgotten-export) The symbol "i10_5" needs to be exported by the entry point index.d.ts
+    // Warning: (ae-forgotten-export) The symbol "i11_5" needs to be exported by the entry point index.d.ts
     //
     // (undocumented)
-    static ɵmod: i0.ɵɵNgModuleDeclaration<ClrWizardModule, [typeof i1_46.ClrWizard, typeof i2_34.ClrWizardPage, typeof i3_26.ClrWizardStepnav, typeof i4_17.ClrWizardStepnavItem, typeof i5_13.ClrWizardButton, typeof i6_9.ClrWizardHeaderAction, typeof i7_8.ClrWizardTitle, typeof i8_7.ClrWizardPageTitle, typeof i9_6.ClrWizardPageNavTitle, typeof i10_6.ClrWizardPageButtons, typeof i11_6.ClrWizardPageHeaderActions], [typeof i6.CommonModule, typeof i4_12.ClrModalModule, typeof i1_2.ClrAlertModule], [typeof i1_46.ClrWizard, typeof i2_34.ClrWizardPage, typeof i3_26.ClrWizardStepnav, typeof i4_17.ClrWizardStepnavItem, typeof i5_13.ClrWizardButton, typeof i6_9.ClrWizardHeaderAction, typeof i7_8.ClrWizardTitle, typeof i8_7.ClrWizardPageTitle, typeof i9_6.ClrWizardPageNavTitle, typeof i10_6.ClrWizardPageButtons, typeof i11_6.ClrWizardPageHeaderActions]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<ClrWizardModule, [typeof i1_46.ClrWizard, typeof i2_34.ClrWizardPage, typeof i3_26.ClrWizardStepnav, typeof i4_17.ClrWizardStepnavItem, typeof i5_13.ClrWizardButton, typeof i6_9.ClrWizardHeaderAction, typeof i7_8.ClrWizardTitle, typeof i8_7.ClrWizardPageTitle, typeof i9_6.ClrWizardPageNavTitle, typeof i10_5.ClrWizardPageButtons, typeof i11_5.ClrWizardPageHeaderActions], [typeof i6.CommonModule, typeof i4_12.ClrModalModule, typeof i1_2.ClrAlertModule], [typeof i1_46.ClrWizard, typeof i2_34.ClrWizardPage, typeof i3_26.ClrWizardStepnav, typeof i4_17.ClrWizardStepnavItem, typeof i5_13.ClrWizardButton, typeof i6_9.ClrWizardHeaderAction, typeof i7_8.ClrWizardTitle, typeof i8_7.ClrWizardPageTitle, typeof i9_6.ClrWizardPageNavTitle, typeof i10_5.ClrWizardPageButtons, typeof i11_5.ClrWizardPageHeaderActions]>;
 }
 
 // @public
@@ -5012,7 +4869,6 @@ export class ClrWizardTitle {
 // @public (undocumented)
 export class ClrYearpicker implements AfterViewInit {
     constructor(_dateNavigationService: DateNavigationService, _viewManagerService: ViewManagerService, _datepickerFocusService: DatepickerFocusService, _elRef: ElementRef<HTMLElement>, commonStrings: ClrCommonStringsService);
-    get calendarEndYear(): number;
     get calendarYear(): number;
     changeYear(year: number): void;
     // (undocumented)
@@ -5020,15 +4876,9 @@ export class ClrYearpicker implements AfterViewInit {
     // (undocumented)
     get currentCalendarYear(): number;
     currentDecade(): void;
-    // (undocumented)
-    getIsRangeEndYear(year: number): boolean;
-    // (undocumented)
-    getIsRangeStartYear(year: number): boolean;
     getTabIndex(year: number): number;
-    isInRange(year: number): boolean;
     nextDecade(): void;
     ngAfterViewInit(): void;
-    onHover(year: number): void;
     onKeyDown(event: KeyboardEvent): void;
     previousDecade(): void;
     // Warning: (ae-forgotten-export) The symbol "YearRangeModel" needs to be exported by the entry point index.d.ts
@@ -5228,7 +5078,7 @@ export function ToggleServiceFactory(): BehaviorSubject<boolean>;
 
 // @public (undocumented)
 export class WrappedFormControl<W extends DynamicWrapper> implements OnInit, DoCheck, OnDestroy {
-    constructor(vcr: ViewContainerRef, wrapperType: Type<W>, injector: Injector, _ngControl: NgControl | null, renderer: Renderer2, el: ElementRef);
+    constructor(vcr: ViewContainerRef, wrapperType: Type<W>, injector: Injector, ngControl: NgControl | null, renderer: Renderer2, el: ElementRef);
     // (undocumented)
     protected controlIdService: ControlIdService;
     // (undocumented)
diff --git a/projects/angular/src/forms/common/abstract-container.ts b/projects/angular/src/forms/common/abstract-container.ts
index 06396deab6..162e4268b2 100644
--- a/projects/angular/src/forms/common/abstract-container.ts
+++ b/projects/angular/src/forms/common/abstract-container.ts
@@ -27,7 +27,6 @@ export abstract class ClrAbstractContainer implements DynamicWrapper, OnDestroy,
   @ContentChild(ClrControlHelper) controlHelperComponent: ClrControlHelper;
 
   control: NgControl;
-  additionalControls: NgControl[];
   _dynamic = false;
 
   protected subscriptions: Subscription[] = [];
@@ -53,9 +52,6 @@ export abstract class ClrAbstractContainer implements DynamicWrapper, OnDestroy,
     this.subscriptions.push(
       this.ngControlService.controlChanges.subscribe(control => {
         this.control = control;
-      }),
-      this.ngControlService.additionalControlChanges.subscribe(controls => {
-        this.additionalControls = controls;
       })
     );
   }
@@ -94,7 +90,7 @@ export abstract class ClrAbstractContainer implements DynamicWrapper, OnDestroy,
   }
 
   private get touched() {
-    return !!(this.control?.touched || this.additionalControls?.some(control => control.touched));
+    return this.control?.touched;
   }
 
   ngAfterContentInit() {
diff --git a/projects/angular/src/forms/common/if-control-state/abstract-if-state.ts b/projects/angular/src/forms/common/if-control-state/abstract-if-state.ts
index 7880666898..8f4026be58 100644
--- a/projects/angular/src/forms/common/if-control-state/abstract-if-state.ts
+++ b/projects/angular/src/forms/common/if-control-state/abstract-if-state.ts
@@ -17,7 +17,6 @@ export abstract class AbstractIfState {
   protected subscriptions: Subscription[] = [];
   protected displayedContent = false;
   protected control: NgControl;
-  protected additionalControls: NgControl[];
 
   constructor(
     @Optional() protected ifControlStateService: IfControlStateService,
@@ -27,9 +26,6 @@ export abstract class AbstractIfState {
       this.subscriptions.push(
         this.ngControlService.controlChanges.subscribe(control => {
           this.control = control;
-        }),
-        this.ngControlService.additionalControlChanges.subscribe(controls => {
-          this.additionalControls = controls;
         })
       );
     }
diff --git a/projects/angular/src/forms/common/if-control-state/if-control-state.service.ts b/projects/angular/src/forms/common/if-control-state/if-control-state.service.ts
index 6b223a4c62..164aff5960 100644
--- a/projects/angular/src/forms/common/if-control-state/if-control-state.service.ts
+++ b/projects/angular/src/forms/common/if-control-state/if-control-state.service.ts
@@ -7,7 +7,7 @@
 
 import { Injectable, OnDestroy } from '@angular/core';
 import { NgControl } from '@angular/forms';
-import { BehaviorSubject, Observable, Subject, Subscription, takeUntil } from 'rxjs';
+import { BehaviorSubject, Observable, Subscription } from 'rxjs';
 
 import { NgControlService } from '../providers/ng-control.service';
 
@@ -21,8 +21,6 @@ export enum CONTROL_STATE {
 export class IfControlStateService implements OnDestroy {
   private subscriptions: Subscription[] = [];
   private control: NgControl;
-  private additionalControls: NgControl[];
-  private unSubscribeAdditionalControls: Subject<boolean> = new Subject();
 
   // Implement our own status changes observable, since Angular controls don't
   private _statusChanges = new BehaviorSubject(CONTROL_STATE.NONE);
@@ -36,25 +34,11 @@ export class IfControlStateService implements OnDestroy {
           // Subscribe to the status change events, only after touched
           // and emit the control
           this.subscriptions.push(
-            this.control.statusChanges?.subscribe(() => {
+            this.control.statusChanges.subscribe(() => {
               this.triggerStatusChange();
             })
           );
         }
-      }),
-
-      this.ngControlService.additionalControlChanges.subscribe((controls: NgControl[]) => {
-        if (controls) {
-          this.additionalControls = controls;
-          this.unSubscribeAdditionalControls.next(true);
-          // Subscribe to the status change events, only after touched
-          // and emit the control
-          this.additionalControls?.forEach((control: NgControl) => {
-            control?.statusChanges?.pipe(takeUntil(this.unSubscribeAdditionalControls)).subscribe(() => {
-              this.triggerStatusChange();
-            });
-          });
-        }
       })
     );
   }
@@ -65,7 +49,6 @@ export class IfControlStateService implements OnDestroy {
 
   ngOnDestroy() {
     this.subscriptions.forEach(subscription => subscription.unsubscribe());
-    this.unSubscribeAdditionalControls.next(true);
   }
 
   triggerStatusChange() {
@@ -73,15 +56,8 @@ export class IfControlStateService implements OnDestroy {
     if (this.control) {
       // These status values are mutually exclusive, so a control
       // cannot be both valid AND invalid or invalid AND disabled.
-      let finalStatus = CONTROL_STATE.NONE;
-      const additionalControlsStatus = this.additionalControls?.map(control => control.status) || [];
-      const combinedStatus = [this.control.status, ...additionalControlsStatus];
-      if (combinedStatus.includes(CONTROL_STATE.INVALID)) {
-        finalStatus = CONTROL_STATE.INVALID;
-      } else if (combinedStatus.includes(CONTROL_STATE.VALID)) {
-        finalStatus = CONTROL_STATE.VALID;
-      }
-      this._statusChanges.next(finalStatus);
+      const status = CONTROL_STATE[this.control.status];
+      this._statusChanges.next(['VALID', 'INVALID'].includes(status) ? status : CONTROL_STATE.NONE);
     }
   }
 }
diff --git a/projects/angular/src/forms/common/if-control-state/if-error.ts b/projects/angular/src/forms/common/if-control-state/if-error.ts
index ec79f3fcd0..1581383416 100644
--- a/projects/angular/src/forms/common/if-control-state/if-error.ts
+++ b/projects/angular/src/forms/common/if-control-state/if-error.ts
@@ -35,17 +35,14 @@ export class ClrIfError extends AbstractIfState {
    * @param state CONTROL_STATE
    */
   protected override handleState(state: CONTROL_STATE) {
-    if (this.error && this.control && !!this.control.invalid) {
+    if (this.error && this.control) {
       this.displayError(this.control.hasError(this.error));
-    } else if (this.error && !!this.additionalControls?.length) {
-      const invalidControl = this.additionalControls?.filter(control => control.hasError(this.error))[0];
-      this.displayError(!!invalidControl, invalidControl);
     } else {
       this.displayError(CONTROL_STATE.INVALID === state);
     }
   }
 
-  private displayError(invalid: boolean, control = this.control) {
+  private displayError(invalid: boolean) {
     /* if no container do nothing */
     if (!this.container) {
       return;
@@ -53,12 +50,12 @@ export class ClrIfError extends AbstractIfState {
     if (invalid) {
       if (this.displayedContent === false) {
         this.embeddedViewRef = this.container.createEmbeddedView(this.template, {
-          error: control.getError(this.error),
+          error: this.control.getError(this.error),
         });
         this.displayedContent = true;
       } else if (this.embeddedViewRef && this.embeddedViewRef.context) {
         // if view is already rendered, update the error object to keep it in sync
-        this.embeddedViewRef.context.error = control.getError(this.error);
+        this.embeddedViewRef.context.error = this.control.getError(this.error);
       }
     } else {
       this.container.clear();
diff --git a/projects/angular/src/forms/common/providers/ng-control.service.ts b/projects/angular/src/forms/common/providers/ng-control.service.ts
index 892ae12572..c901213f31 100644
--- a/projects/angular/src/forms/common/providers/ng-control.service.ts
+++ b/projects/angular/src/forms/common/providers/ng-control.service.ts
@@ -19,10 +19,7 @@ export interface Helpers {
 @Injectable()
 export class NgControlService {
   // Observable to subscribe to the control, since its not available immediately for projected content
-  private _control: NgControl;
   private _controlChanges = new Subject<NgControl>();
-  private _additionalControls: NgControl[] = [];
-  private _additionalControlChanges = new Subject<NgControl[]>();
 
   private _helpers = new Subject<Helpers>();
 
@@ -34,33 +31,11 @@ export class NgControlService {
     return this._helpers.asObservable();
   }
 
-  get additionalControlChanges(): Observable<NgControl[]> {
-    return this._additionalControlChanges.asObservable();
-  }
-
-  get hasAdditionalControls() {
-    return !!this._additionalControls?.length;
-  }
-
   setControl(control: NgControl) {
-    this._control = control;
     this._controlChanges.next(control);
   }
 
   setHelpers(state: Helpers) {
     this._helpers.next(state);
   }
-
-  addAdditionalControl(control: NgControl) {
-    this._additionalControls.push(control);
-    this._additionalControlChanges.next(this._additionalControls);
-  }
-
-  getControl() {
-    return this._control;
-  }
-
-  getAdditionalControls() {
-    return this._additionalControls;
-  }
 }
diff --git a/projects/angular/src/forms/common/wrapped-control.ts b/projects/angular/src/forms/common/wrapped-control.ts
index d83260dfde..23fe0426d5 100644
--- a/projects/angular/src/forms/common/wrapped-control.ts
+++ b/projects/angular/src/forms/common/wrapped-control.ts
@@ -58,8 +58,6 @@ export class WrappedFormControl<W extends DynamicWrapper> implements OnInit, DoC
   private _containerInjector: Injector;
   private differs: KeyValueDiffers;
   private differ: KeyValueDiffer<any, any>;
-  private additionalDiffer = new Map<NgControl, KeyValueDiffer<any, any>>();
-  private ngControl: NgControl | null;
 
   // I lost way too much time trying to make this work without injecting the ViewContainerRef and the Injector,
   // I'm giving up. So we have to inject these two manually for now.
@@ -67,7 +65,7 @@ export class WrappedFormControl<W extends DynamicWrapper> implements OnInit, DoC
     protected vcr: ViewContainerRef,
     protected wrapperType: Type<W>,
     injector: Injector,
-    private _ngControl: NgControl | null,
+    private ngControl: NgControl | null,
     renderer: Renderer2,
     el: ElementRef
   ) {
@@ -100,6 +98,10 @@ export class WrappedFormControl<W extends DynamicWrapper> implements OnInit, DoC
         })
       );
     }
+
+    if (ngControl) {
+      this.differ = this.differs.find(ngControl).create();
+    }
   }
 
   @Input()
@@ -114,10 +116,6 @@ export class WrappedFormControl<W extends DynamicWrapper> implements OnInit, DoC
     }
   }
 
-  private get hasAdditionalControls() {
-    return this.additionalDiffer.size > 0;
-  }
-
   ngOnInit() {
     this._containerInjector = new HostWrapper(this.wrapperType, this.vcr, this.index);
     this.controlIdService = this._containerInjector.get(ControlIdService);
@@ -133,24 +131,23 @@ export class WrappedFormControl<W extends DynamicWrapper> implements OnInit, DoC
       this._id = this.controlIdService.id;
     }
 
-    if (this.ngControlService && this._ngControl) {
-      if (!this.ngControlService.getControl()) {
-        this.ngControl = this._ngControl;
-        this.ngControlService.setControl(this.ngControl);
-        this.differ = this.differs.find(this._ngControl).create();
-      } else {
-        this.ngControl = this.ngControlService.getControl();
-        this.ngControlService.addAdditionalControl(this._ngControl);
-        this.additionalDiffer.set(this._ngControl, this.differs.find(this._ngControl).create());
-      }
+    if (this.ngControlService && this.ngControl) {
+      this.ngControlService.setControl(this.ngControl);
     }
   }
 
   ngDoCheck() {
-    this.triggerDoCheck(this.differ, this.ngControl);
-    if (this.hasAdditionalControls) {
-      for (const [ngControl, differ] of this.additionalDiffer) {
-        this.triggerDoCheck(differ, ngControl);
+    if (this.differ) {
+      const changes = this.differ.diff(this.ngControl);
+      if (changes) {
+        changes.forEachChangedItem(change => {
+          if (
+            (change.key === CHANGE_KEYS.FORM || change.key === CHANGE_KEYS.MODEL) &&
+            change.currentValue !== change.previousValue
+          ) {
+            this.triggerValidation();
+          }
+        });
       }
     }
   }
@@ -178,33 +175,11 @@ export class WrappedFormControl<W extends DynamicWrapper> implements OnInit, DoC
     }
   }
 
-  private triggerDoCheck(differ, ngControl) {
-    if (differ) {
-      const changes = differ.diff(ngControl);
-      if (changes) {
-        changes.forEachChangedItem(change => {
-          if (
-            (change.key === CHANGE_KEYS.FORM || change.key === CHANGE_KEYS.MODEL) &&
-            change.currentValue !== change.previousValue
-          ) {
-            this.triggerValidation();
-          }
-        });
-      }
-    }
-  }
-
   private markAsTouched(): void {
     if (this.ngControl) {
       this.ngControl.control.markAsTouched();
       this.ngControl.control.updateValueAndValidity();
     }
-    if (this.ngControlService && this.ngControlService.hasAdditionalControls) {
-      this.ngControlService.getAdditionalControls()?.forEach((ngControl: NgControl) => {
-        ngControl.control.markAsTouched();
-        ngControl.control.updateValueAndValidity();
-      });
-    }
   }
 
   private setAriaDescribedBy(helpers: Helpers) {
diff --git a/projects/angular/src/forms/datepicker/_datepicker.clarity.scss b/projects/angular/src/forms/datepicker/_datepicker.clarity.scss
index eb7d4bed35..75edbc22a1 100644
--- a/projects/angular/src/forms/datepicker/_datepicker.clarity.scss
+++ b/projects/angular/src/forms/datepicker/_datepicker.clarity.scss
@@ -34,15 +34,8 @@
   &:hover {
     background: datepicker-variables.$clr-calendar-btn-hover-color;
   }
-  &.in-range {
-    &:not(.is-today) {
-      border-radius: 0;
-    }
-    background: datepicker-variables.$clr-calendar-in-range-cell-border-color;
-  }
   &:focus {
     outline: tokens.$cds-alias-object-interaction-outline;
-    outline-color: -webkit-focus-ring-color;
     outline-offset: calc(-1 * tokens.$cds-global-space-2);
   }
   &:active {
@@ -59,24 +52,13 @@
 }
 
 @mixin generate-selected-date-style() {
-  &.is-selected,
-  &.is-start-range,
-  &.is-end-range {
+  &.is-selected {
     background: datepicker-variables.$clr-calendar-active-cell-background-color;
     color: datepicker-variables.$clr-calendar-active-cell-color;
     border: none;
-  }
-  &.is-start-range {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-  &.is-end-range {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  &.is-selected:focus {
-    background: datepicker-variables.$clr-calendar-active-focus-cell-background-color;
+    &:focus {
+      background: datepicker-variables.$clr-calendar-active-focus-cell-background-color;
+    }
   }
 }
 
@@ -93,48 +75,21 @@
 @include mixins.exports('datepicker.clarity') {
   .datepicker {
     display: flex;
-    flex-direction: row;
-    margin-top: tokens.$cds-global-space-4;
+    flex-direction: column;
+
+    //Dimensions
+    margin-top: datepicker-variables.$clr-calendar-margin-top;
+    padding: datepicker-variables.$clr-calendar-padding;
     width: datepicker-variables.$clr-calendar-width;
     height: datepicker-variables.$clr-calendar-height;
+
+    //Other Props
     background: datepicker-variables.$clr-calendar-background-color;
     border: tokens.$cds-alias-object-border-width-100 solid datepicker-variables.$clr-calendar-border-color;
     border-radius: tokens.$cds-alias-object-border-radius-100;
     box-shadow: tokens.$cds-alias-object-shadow-100;
+    overflow: hidden;
     z-index: map.get(variables.$clr-layers, dropdown-menu);
-    .datepicker-view-manager {
-      padding: tokens.$cds-global-space-7;
-    }
-    &.has-range-option {
-      width: calc(datepicker-variables.$clr-calendar-width + datepicker-variables.$clr-calendar-options-width);
-    }
-  }
-  .options-wrapper {
-    width: datepicker-variables.$clr-calendar-options-width;
-    padding: tokens.$cds-global-space-3 0;
-    flex-shrink: 0;
-    border-top-left-radius: tokens.$cds-alias-object-border-radius-100;
-    border-bottom-left-radius: tokens.$cds-alias-object-border-radius-100;
-    .range-option {
-      padding: tokens.$cds-global-space-5;
-      padding-left: tokens.$cds-global-space-7;
-      color: datepicker-variables.$clr-calendar-option-text-color;
-      cursor: pointer;
-      &.active {
-        border-left: mixins.baselinePx(3) solid datepicker-variables.$clr-calendar-active-option-border-color;
-        color: datepicker-variables.$clr-calendar-options-active-text-color;
-        background-color: datepicker-variables.$clr-calendar-options-active-background-color;
-      }
-      + .range-option {
-        margin: tokens.$cds-global-space-5 0;
-      }
-      &:hover,
-      &:focus {
-        background-color: datepicker-variables.$clr-calendar-option-hover-background-color;
-        outline: none;
-      }
-    }
-    background-color: datepicker-variables.$clr-calendar-options-background-color;
   }
 
   .calendar-header {
@@ -296,12 +251,6 @@
   .months {
     flex-wrap: wrap;
     flex-direction: row;
-
-    &.enlarged {
-      .month {
-        height: datepicker-variables.$clr-calendar-month-enlarged-cell-height;
-      }
-    }
   }
 
   .month,
diff --git a/projects/angular/src/forms/datepicker/_properties.datepicker.scss b/projects/angular/src/forms/datepicker/_properties.datepicker.scss
index bc156368a0..a801089326 100644
--- a/projects/angular/src/forms/datepicker/_properties.datepicker.scss
+++ b/projects/angular/src/forms/datepicker/_properties.datepicker.scss
@@ -13,9 +13,6 @@
       --clr-calendar-background-color: #{tokens.$cds-alias-object-container-background};
       --clr-calendar-border-color: #{tokens.$cds-alias-object-border-color-shade};
 
-      --clr-calendar-option-text-color: #{tokens.$cds-alias-object-interaction-color};
-      --clr-calendar-active-option-border-color: #{tokens.$cds-alias-object-interaction-background-highlight};
-
       --clr-calendar-btn-color: #{tokens.$cds-alias-object-interaction-color};
 
       --clr-calendar-today-date-cell-color: #{tokens.$cds-alias-typography-color-400};
diff --git a/projects/angular/src/forms/datepicker/_variables.datepicker.scss b/projects/angular/src/forms/datepicker/_variables.datepicker.scss
index a189c79cdc..4df2a58228 100644
--- a/projects/angular/src/forms/datepicker/_variables.datepicker.scss
+++ b/projects/angular/src/forms/datepicker/_variables.datepicker.scss
@@ -6,7 +6,6 @@
  */
 
 @use '@cds/core/tokens/tokens.scss';
-@use '../../utils/mixins';
 
 $clr-calendar-click-target: #{tokens.$cds-global-space-11};
 $clr-calendar-background-color: var(--clr-calendar-background-color) !default;
@@ -19,7 +18,6 @@ $clr-calendar-width: calc(
   calc(7 * #{tokens.$cds-global-space-11}) + calc(2 * #{tokens.$cds-global-space-7}) +
     calc(2 * #{tokens.$cds-alias-object-border-width-100})
 );
-$clr-calendar-options-width: mixins.baselinePx(150);
 
 //(8 = 6 date rows + 1 row for day heading + 1 row for calendar switches and month/year pickers) + 2 * 16px padding + 2px for border
 $clr-calendar-height: calc(
@@ -38,8 +36,8 @@ $clr-calendar-btn-padding: 0;
 
 $clr-calendar-year-cell-height: #{tokens.$cds-global-space-12};
 $clr-calendar-month-cell-height: #{tokens.$cds-global-space-11};
-$clr-calendar-month-enlarged-cell-height: #{tokens.$cds-global-space-12};
 $clr-calendar-month-cell-padding: #{tokens.$cds-global-space-6};
+
 $clr-calendar-picker-btn-font-size: var(--clr-calendar-picker-btn-font-size);
 $clr-calendar-picker-btn-font-weight: var(--clr-calendar-picker-btn-font-weight);
 
@@ -60,12 +58,4 @@ $clr-month-year-btn-width: calc(
   0.5 * #{$clr-calendar-width} - #{tokens.$cds-global-space-7} - #{tokens.$cds-alias-object-border-width-100}
 );
 
-$clr-calendar-option-text-color: var(--clr-calendar-option-text-color) !default;
-$clr-calendar-option-hover-background-color: var(--clr-calendar-btn-hover-color);
-$clr-calendar-options-background-color: var(--clr-vertical-nav-bg-color);
-$clr-calendar-active-option-border-color: var(--clr-calendar-active-option-border-color);
-$clr-calendar-in-range-cell-border-color: var(--clr-calendar-btn-hover-color);
 $clr-calendar-today-date-cell-border-color: var(--clr-calendar-today-date-cell-border-color);
-
-$clr-calendar-options-active-text-color: var(--clr-vertical-nav-item-active-color);
-$clr-calendar-options-active-background-color: var(--clr-vertical-nav-selected-bg-color);
diff --git a/projects/angular/src/forms/datepicker/all.spec.ts b/projects/angular/src/forms/datepicker/all.spec.ts
index 74195135f0..4b7b44b050 100644
--- a/projects/angular/src/forms/datepicker/all.spec.ts
+++ b/projects/angular/src/forms/datepicker/all.spec.ts
@@ -8,7 +8,7 @@
 import { addHelpers } from '../../data/datagrid/helpers.spec';
 import CalendarSpecs from './calendar.spec';
 import DateContainerSpecs from './date-container.spec';
-import DateInputSpecs from './date-input-base.spec';
+import DateInputSpecs from './date-input.spec';
 import DateInputValidatorSpecs from './date-input.validator.spec';
 import DatepickerViewManagerSpecs from './datepicker-view-manager.spec';
 import DayComponentSpecs from './day.spec';
diff --git a/projects/angular/src/forms/datepicker/calendar.spec.ts b/projects/angular/src/forms/datepicker/calendar.spec.ts
index 6d2aee30f4..7b8123262b 100644
--- a/projects/angular/src/forms/datepicker/calendar.spec.ts
+++ b/projects/angular/src/forms/datepicker/calendar.spec.ts
@@ -16,7 +16,6 @@ import { DateFormControlService } from './providers/date-form-control.service';
 import { DateIOService } from './providers/date-io.service';
 import { DateNavigationService } from './providers/date-navigation.service';
 import { DatepickerFocusService } from './providers/datepicker-focus.service';
-import { DatePickerHelperService } from './providers/datepicker-helper.service';
 import { LocaleHelperService } from './providers/locale-helper.service';
 import { ViewManagerService } from './providers/view-manager.service';
 
@@ -39,7 +38,6 @@ export default function () {
         LocaleHelperService,
         DatepickerFocusService,
         DateFormControlService,
-        DatePickerHelperService,
       ]);
     });
 
diff --git a/projects/angular/src/forms/datepicker/calendar.ts b/projects/angular/src/forms/datepicker/calendar.ts
index 6fdac98fd5..2902b2262f 100644
--- a/projects/angular/src/forms/datepicker/calendar.ts
+++ b/projects/angular/src/forms/datepicker/calendar.ts
@@ -58,10 +58,6 @@ export class ClrCalendar implements OnDestroy {
     return this._dateNavigationService.selectedDay;
   }
 
-  get selectedEndDay(): DayModel {
-    return this._dateNavigationService.selectedEndDay;
-  }
-
   get focusedDay(): DayModel {
     return this._dateNavigationService.focusedDay;
   }
@@ -132,18 +128,6 @@ export class ClrCalendar implements OnDestroy {
       })
     );
 
-    this._subs.push(
-      this._dateNavigationService.selectedDayChange.subscribe((selectedDay: DayModel) => {
-        this.calendarViewModel.updateSelectedDay(selectedDay);
-      })
-    );
-
-    this._subs.push(
-      this._dateNavigationService.selectedEndDayChange.subscribe((selectedDay: DayModel) => {
-        this.calendarViewModel.updateSelectedEndDay(selectedDay);
-      })
-    );
-
     this._subs.push(
       this._dateNavigationService.focusOnCalendarChange.subscribe(() => {
         this._datepickerFocusService.focusCell(this._elRef);
@@ -158,7 +142,6 @@ export class ClrCalendar implements OnDestroy {
     this.calendarViewModel = new CalendarViewModel(
       this.calendar,
       this.selectedDay,
-      this.selectedEndDay,
       this.focusedDay,
       this.today,
       this._localeHelperService.firstDayOfWeek,
diff --git a/projects/angular/src/forms/datepicker/date-container.spec.ts b/projects/angular/src/forms/datepicker/date-container.spec.ts
index 8620ab2f95..f37a727989 100644
--- a/projects/angular/src/forms/datepicker/date-container.spec.ts
+++ b/projects/angular/src/forms/datepicker/date-container.spec.ts
@@ -29,7 +29,6 @@ import { DateIOService } from './providers/date-io.service';
 import { DateNavigationService } from './providers/date-navigation.service';
 import { DatepickerEnabledService } from './providers/datepicker-enabled.service';
 import { MockDatepickerEnabledService } from './providers/datepicker-enabled.service.mock';
-import { DatePickerHelperService } from './providers/datepicker-helper.service';
 import { LocaleHelperService } from './providers/locale-helper.service';
 import { ViewManagerService } from './providers/view-manager.service';
 
@@ -45,7 +44,6 @@ const DATEPICKER_PROVIDERS: any[] = [
   DateIOService,
   ControlIdService,
   DateFormControlService,
-  DatePickerHelperService,
 ];
 
 export default function () {
diff --git a/projects/angular/src/forms/datepicker/date-container.ts b/projects/angular/src/forms/datepicker/date-container.ts
index 8cc25d6e06..9337e53c74 100644
--- a/projects/angular/src/forms/datepicker/date-container.ts
+++ b/projects/angular/src/forms/datepicker/date-container.ts
@@ -5,16 +5,7 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import {
-  AfterViewInit,
-  Component,
-  ContentChild,
-  ElementRef,
-  Input,
-  Optional,
-  Renderer2,
-  ViewChild,
-} from '@angular/core';
+import { AfterViewInit, Component, ElementRef, Input, Optional, Renderer2, ViewChild } from '@angular/core';
 import { startWith } from 'rxjs/operators';
 
 import { ClrCommonStringsService } from '../../utils/i18n/common-strings.service';
@@ -29,19 +20,16 @@ import { ControlIdService } from '../common/providers/control-id.service';
 import { FocusService } from '../common/providers/focus.service';
 import { LayoutService } from '../common/providers/layout.service';
 import { NgControlService } from '../common/providers/ng-control.service';
-import { ClrDateRangeEndInput } from './date-range-end-input';
-import { ClrDateRangeStartInput } from './date-range-start-input';
 import { DayModel } from './model/day.model';
 import { DateFormControlService } from './providers/date-form-control.service';
 import { DateIOService } from './providers/date-io.service';
 import { DateNavigationService } from './providers/date-navigation.service';
 import { DatepickerEnabledService } from './providers/datepicker-enabled.service';
-import { DatePickerHelperService } from './providers/datepicker-helper.service';
 import { LocaleHelperService } from './providers/locale-helper.service';
 import { ViewManagerService } from './providers/view-manager.service';
 
 @Component({
-  selector: 'clr-date-container, clr-date-range-container',
+  selector: 'clr-date-container',
   template: `
     <ng-content select="label"></ng-content>
     <label *ngIf="!label && addGrid()"></label>
@@ -49,8 +37,6 @@ import { ViewManagerService } from './providers/view-manager.service';
       <div class="clr-input-wrapper" clrPopoverAnchor>
         <div class="clr-input-group" [class.clr-focus]="focus">
           <ng-content select="[clrDate]"></ng-content>
-          <ng-content select="[clrRangeStartDate]"></ng-content>
-          <ng-content select="[clrRangeEndDate]"></ng-content>
           <button
             #actionButton
             type="button"
@@ -98,7 +84,6 @@ import { ViewManagerService } from './providers/view-manager.service';
     DateFormControlService,
     ViewManagerService,
     IfControlStateService,
-    DatePickerHelperService,
   ],
   hostDirectives: [ClrPopoverHostDirective],
   host: {
@@ -111,14 +96,10 @@ import { ViewManagerService } from './providers/view-manager.service';
 export class ClrDateContainer extends ClrAbstractContainer implements AfterViewInit {
   focus = false;
 
-  @ContentChild(ClrDateRangeStartInput) clrRangeStartEl: ClrDateRangeStartInput;
-  @ContentChild(ClrDateRangeEndInput) clrRangeEndEl: ClrDateRangeEndInput;
-
   private toggleButton: ElementRef<HTMLButtonElement>;
 
   constructor(
     protected renderer: Renderer2,
-    elem: ElementRef<HTMLElement>,
     private toggleService: ClrPopoverToggleService,
     private dateNavigationService: DateNavigationService,
     private datepickerEnabledService: DatepickerEnabledService,
@@ -145,11 +126,6 @@ export class ClrDateContainer extends ClrAbstractContainer implements AfterViewI
         this.dateFormControlService.markAsTouched();
       })
     );
-
-    if (this.dateNavigationService) {
-      const tagName = elem.nativeElement.tagName.toLowerCase();
-      this.dateNavigationService.isRangePicker = tagName === 'clr-date-range-container';
-    }
   }
 
   @Input('clrPosition')
@@ -159,29 +135,6 @@ export class ClrDateContainer extends ClrAbstractContainer implements AfterViewI
     }
   }
 
-  @Input('rangeOptions')
-  set rangeOptions(rangeOptions) {
-    this.dateIOService.setRangeOptions(rangeOptions);
-  }
-
-  @Input()
-  set min(dateString: string) {
-    this.dateIOService.setMinDate(dateString);
-    if (this.clrRangeStartEl && this.clrRangeEndEl) {
-      this.clrRangeStartEl.triggerControlInputValidation();
-      this.clrRangeEndEl.triggerControlInputValidation();
-    }
-  }
-
-  @Input()
-  set max(dateString: string) {
-    this.dateIOService.setMaxDate(dateString);
-    if (this.clrRangeStartEl && this.clrRangeEndEl) {
-      this.clrRangeStartEl.triggerControlInputValidation();
-      this.clrRangeEndEl.triggerControlInputValidation();
-    }
-  }
-
   @ViewChild('actionButton')
   set actionButton(button: ElementRef) {
     this.toggleButton = button;
@@ -213,15 +166,11 @@ export class ClrDateContainer extends ClrAbstractContainer implements AfterViewI
   }
 
   ngAfterViewInit(): void {
-    this.dateRangeStucturalChecks();
     this.subscriptions.push(
       this.toggleService.openChange.subscribe(open => {
         if (open) {
           this.initializeCalendar();
         } else {
-          if (this.dateNavigationService.isRangePicker) {
-            this.dateNavigationService.validateDateRange();
-          }
           this.toggleButton.nativeElement.focus();
         }
       })
@@ -267,15 +216,4 @@ export class ClrDateContainer extends ClrAbstractContainer implements AfterViewI
   private initializeCalendar(): void {
     this.dateNavigationService.initializeCalendar();
   }
-
-  private dateRangeStucturalChecks() {
-    if (this.dateNavigationService.isRangePicker) {
-      if (!this.clrRangeStartEl) {
-        console.error('Error! clr-date-range-container must contain clrRangeStartDate input');
-      }
-      if (!this.clrRangeEndEl) {
-        console.error('Error! clr-date-range-container must contain clrRangeEndDate input');
-      }
-    }
-  }
 }
diff --git a/projects/angular/src/forms/datepicker/date-input-base.spec.ts b/projects/angular/src/forms/datepicker/date-input.spec.ts
similarity index 99%
rename from projects/angular/src/forms/datepicker/date-input-base.spec.ts
rename to projects/angular/src/forms/datepicker/date-input.spec.ts
index 8df911dd49..9a56906496 100644
--- a/projects/angular/src/forms/datepicker/date-input-base.spec.ts
+++ b/projects/angular/src/forms/datepicker/date-input.spec.ts
@@ -11,6 +11,7 @@ import { FormControl, FormGroup, FormsModule, NgControl, NgForm, ReactiveFormsMo
 import { By } from '@angular/platform-browser';
 
 import { TestContext } from '../../data/datagrid/helpers.spec';
+import { ClrFormsModule } from '../../forms/forms.module';
 import { ClrPopoverEventsService } from '../../utils/popover/providers/popover-events.service';
 import { ClrPopoverPositionService } from '../../utils/popover/providers/popover-position.service';
 import { ClrPopoverToggleService } from '../../utils/popover/providers/popover-toggle.service';
@@ -20,9 +21,8 @@ import { ControlIdService } from '../common/providers/control-id.service';
 import { FocusService } from '../common/providers/focus.service';
 import { LayoutService } from '../common/providers/layout.service';
 import { NgControlService } from '../common/providers/ng-control.service';
-import { ClrFormsModule } from '../forms.module';
 import { ClrDateContainer } from './date-container';
-import { ClrDateInput } from './date-single-input';
+import { ClrDateInput } from './date-input';
 import { DayModel } from './model/day.model';
 import { DateFormControlService } from './providers/date-form-control.service';
 import { DateIOService } from './providers/date-io.service';
diff --git a/projects/angular/src/forms/datepicker/date-input-base.ts b/projects/angular/src/forms/datepicker/date-input.ts
similarity index 62%
rename from projects/angular/src/forms/datepicker/date-input-base.ts
rename to projects/angular/src/forms/datepicker/date-input.ts
index eac0fe8e15..307f338fa6 100644
--- a/projects/angular/src/forms/datepicker/date-input-base.ts
+++ b/projects/angular/src/forms/datepicker/date-input.ts
@@ -5,11 +5,12 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { DOCUMENT, isPlatformBrowser } from '@angular/common';
+import { isPlatformBrowser } from '@angular/common';
 import {
   AfterViewInit,
   Directive,
   ElementRef,
+  EventEmitter,
   HostBinding,
   HostListener,
   Inject,
@@ -18,23 +19,27 @@ import {
   OnDestroy,
   OnInit,
   Optional,
+  Output,
   PLATFORM_ID,
   Renderer2,
   Self,
   ViewContainerRef,
 } from '@angular/core';
 import { NgControl } from '@angular/forms';
-import { filter } from 'rxjs/operators';
+import { of } from 'rxjs';
+import { filter, switchMap } from 'rxjs/operators';
 
 import { isBooleanAttributeSet } from '../../utils/component/is-boolean-attribute-set';
 import { FocusService } from '../common/providers/focus.service';
 import { WrappedFormControl } from '../common/wrapped-control';
 import { ClrDateContainer } from './date-container';
+import { DayModel } from './model/day.model';
 import { DateFormControlService } from './providers/date-form-control.service';
 import { DateIOService } from './providers/date-io.service';
 import { DateNavigationService } from './providers/date-navigation.service';
 import { DatepickerEnabledService } from './providers/datepicker-enabled.service';
 import { DatepickerFocusService } from './providers/datepicker-focus.service';
+import { datesAreEqual } from './utils/date-utils';
 
 // There are four ways the datepicker value is set
 // 1. Value set by user typing into text input as a string ex: '01/28/2015'
@@ -42,54 +47,70 @@ import { DatepickerFocusService } from './providers/datepicker-focus.service';
 // 3. Value set by user via datepicker UI as a Date Object
 // 4. Value set via `clrDate` input as a Date Object
 
-@Directive()
-export class ClrDateInputBase extends WrappedFormControl<ClrDateContainer> implements OnInit, AfterViewInit, OnDestroy {
+@Directive({
+  selector: '[clrDate]',
+  host: {
+    '[class.clr-input]': 'true',
+  },
+  providers: [DatepickerFocusService],
+})
+export class ClrDateInput extends WrappedFormControl<ClrDateContainer> implements OnInit, AfterViewInit, OnDestroy {
   static ngAcceptInputType_date: Date | null | string;
 
   @Input() placeholder: string;
+  @Output('clrDateChange') dateChange = new EventEmitter<Date>(false);
 
   protected override index = 1;
 
+  private initialClrDateInputValue: Date;
+  private previousDateChange: Date;
+
   constructor(
     viewContainerRef: ViewContainerRef,
     injector: Injector,
     protected override el: ElementRef<HTMLInputElement>,
     protected override renderer: Renderer2,
-    @Inject(DOCUMENT) protected document: any,
     @Self()
     @Optional()
     protected control: NgControl,
     @Optional() private container: ClrDateContainer,
-    @Optional() protected dateIOService: DateIOService,
-    @Optional() protected dateNavigationService: DateNavigationService,
+    @Optional() private dateIOService: DateIOService,
+    @Optional() private dateNavigationService: DateNavigationService,
     @Optional() private datepickerEnabledService: DatepickerEnabledService,
     @Optional() private dateFormControlService: DateFormControlService,
     @Inject(PLATFORM_ID) private platformId: any,
     @Optional() private focusService: FocusService,
-    protected datepickerFocusService: DatepickerFocusService
+    private datepickerFocusService: DatepickerFocusService
   ) {
     super(viewContainerRef, ClrDateContainer, injector, control, renderer, el);
   }
 
+  @Input('clrDate')
+  set date(date: Date | string) {
+    if (this.previousDateChange !== date) {
+      this.updateDate(this.getValidDateValueFromDate(date as Date));
+    }
+
+    if (!this.initialClrDateInputValue) {
+      this.initialClrDateInputValue = date as Date;
+    }
+  }
+
   @Input()
   set min(dateString: string) {
-    if (!this.dateNavigationService.isRangePicker) {
-      this.dateIOService.setMinDate(dateString);
-      this.triggerControlValidation();
-    }
+    this.dateIOService.setMinDate(dateString);
+    this.triggerControlValidation();
   }
 
   @Input()
   set max(dateString: string) {
-    if (!this.dateNavigationService.isRangePicker) {
-      this.dateIOService.setMaxDate(dateString);
-      this.triggerControlValidation();
-    }
+    this.dateIOService.setMaxDate(dateString);
+    this.triggerControlValidation();
   }
 
   get disabled() {
     if (this.dateFormControlService) {
-      return this.dateFormControlService.disabled || !!this.control?.control?.disabled;
+      return this.dateFormControlService.disabled;
     }
     return null;
   }
@@ -116,7 +137,13 @@ export class ClrDateInputBase extends WrappedFormControl<ClrDateContainer> imple
     super.ngOnInit();
     this.populateServicesFromContainerComponent();
 
-    this.subscriptions.push(this.listenForTouchChanges(), this.listenForDirtyChanges(), this.listenForInputRefocus());
+    this.subscriptions.push(
+      this.listenForUserSelectedDayChanges(),
+      this.listenForControlValueChanges(),
+      this.listenForTouchChanges(),
+      this.listenForDirtyChanges(),
+      this.listenForInputRefocus()
+    );
   }
 
   ngAfterViewInit() {
@@ -127,6 +154,7 @@ export class ClrDateInputBase extends WrappedFormControl<ClrDateContainer> imple
     // I need the renderer to set the value property on the input to make sure that if the user has supplied a Date
     // input object, we reflect it with the right date on the input field using the IO service. I am not sure if
     // these are major issues or not but just noting them down here.
+    this.processInitialInputs();
   }
 
   @HostListener('focus')
@@ -140,15 +168,77 @@ export class ClrDateInputBase extends WrappedFormControl<ClrDateContainer> imple
     this.setFocus(false);
   }
 
-  protected usingClarityDatepicker() {
+  @HostListener('change', ['$event.target'])
+  onValueChange(target: HTMLInputElement) {
+    const validDateValue = this.dateIOService.getDateValueFromDateString(target.value);
+    if (this.usingClarityDatepicker() && validDateValue) {
+      this.updateDate(validDateValue, true);
+    } else if (this.usingNativeDatepicker()) {
+      const [year, month, day] = target.value.split('-');
+      this.updateDate(new Date(+year, +month - 1, +day), true);
+    } else {
+      this.emitDateOutput(null);
+    }
+  }
+
+  private usingClarityDatepicker() {
     return this.datepickerEnabledService.isEnabled;
   }
 
-  protected usingNativeDatepicker() {
+  private usingNativeDatepicker() {
     return !this.datepickerEnabledService.isEnabled;
   }
 
-  protected updateInput(date: Date) {
+  private setFocus(focus: boolean) {
+    if (this.focusService) {
+      this.focusService.focused = focus;
+    }
+  }
+
+  private triggerControlValidation() {
+    if (this.datepickerHasFormControl()) {
+      // Set `emitEvent` to false to prevent unnecessary value change event. Status change event will be emitted by `setErrors` below.
+      this.control.control?.updateValueAndValidity({ emitEvent: false });
+      this.control.control?.setErrors(this.control.control.errors);
+    }
+  }
+
+  private populateServicesFromContainerComponent() {
+    if (!this.container) {
+      this.dateIOService = this.getProviderFromContainer(DateIOService);
+      this.dateNavigationService = this.getProviderFromContainer(DateNavigationService);
+      this.datepickerEnabledService = this.getProviderFromContainer(DatepickerEnabledService);
+      this.dateFormControlService = this.getProviderFromContainer(DateFormControlService);
+    }
+  }
+
+  private processInitialInputs() {
+    if (this.datepickerHasFormControl()) {
+      this.updateDate(this.dateIOService.getDateValueFromDateString(this.control.value));
+    } else {
+      this.updateDate(this.initialClrDateInputValue);
+    }
+  }
+
+  private updateDate(value: Date, setByUserInteraction = false) {
+    const date = this.getValidDateValueFromDate(value);
+
+    if (setByUserInteraction) {
+      this.emitDateOutput(date);
+    } else {
+      this.previousDateChange = date;
+    }
+
+    if (this.dateNavigationService) {
+      this.dateNavigationService.selectedDay = date
+        ? new DayModel(date.getFullYear(), date.getMonth(), date.getDate())
+        : null;
+    }
+
+    this.updateInput(date);
+  }
+
+  private updateInput(date: Date) {
     if (date) {
       const dateString = this.dateIOService.toLocaleDisplayFormatString(date);
       if (this.usingNativeDatepicker()) {
@@ -160,13 +250,12 @@ export class ClrDateInputBase extends WrappedFormControl<ClrDateContainer> imple
       } else {
         this.renderer.setProperty(this.el.nativeElement, 'value', dateString);
       }
-      this.validateDateRange();
     } else {
       this.renderer.setProperty(this.el.nativeElement, 'value', '');
     }
   }
 
-  protected getValidDateValueFromDate(date: Date) {
+  private getValidDateValueFromDate(date: Date) {
     if (this.dateIOService) {
       const dateString = this.dateIOService.toLocaleDisplayFormatString(date);
       return this.dateIOService.getDateValueFromDateString(dateString);
@@ -175,52 +264,33 @@ export class ClrDateInputBase extends WrappedFormControl<ClrDateContainer> imple
     }
   }
 
-  protected datepickerHasFormControl() {
-    return !!this.control;
-  }
-
-  /**
-   * Incase of date range error, both start & end date field valdiation has to be triggered
-   * if either of the field gets updated
-   */
-  protected validateDateRange() {
-    if (this.dateNavigationService.isRangePicker) {
-      const primaryControl = this.ngControlService?.getControl();
-      const additionalControls = this.ngControlService?.getAdditionalControls();
-      const isValid = this.dateNavigationService.selectedDay?.isBefore(this.dateNavigationService.selectedEndDay, true);
-      if (
-        isValid &&
-        (primaryControl?.hasError('range') || additionalControls?.some(control => control.hasError('range')))
-      ) {
-        primaryControl.control?.updateValueAndValidity({ emitEvent: false });
-        additionalControls.forEach((ngControl: NgControl) => {
-          ngControl?.control?.updateValueAndValidity({ emitEvent: false });
-        });
-      }
+  private emitDateOutput(date: Date) {
+    if (!datesAreEqual(date, this.previousDateChange)) {
+      this.dateChange.emit(date);
+      this.previousDateChange = date;
+    } else if (!date && this.previousDateChange) {
+      this.dateChange.emit(null);
+      this.previousDateChange = null;
     }
   }
 
-  private setFocus(focus: boolean) {
-    if (this.focusService) {
-      this.focusService.focused = focus;
-    }
+  private datepickerHasFormControl() {
+    return !!this.control;
   }
 
-  private triggerControlValidation() {
-    if (this.datepickerHasFormControl()) {
-      // Set `emitEvent` to false to prevent unnecessary value change event. Status change event will be emitted by `setErrors` below.
-      this.control.control?.updateValueAndValidity({ emitEvent: false });
-      this.control.control?.setErrors(this.control.control.errors);
-    }
+  private listenForControlValueChanges() {
+    return of(this.datepickerHasFormControl())
+      .pipe(
+        filter(hasControl => hasControl),
+        switchMap(() => this.control.valueChanges),
+        // only update date value if not being set by user
+        filter(() => !this.datepickerFocusService.elementIsFocused(this.el.nativeElement))
+      )
+      .subscribe((value: string) => this.updateDate(this.dateIOService.getDateValueFromDateString(value)));
   }
 
-  private populateServicesFromContainerComponent() {
-    if (!this.container) {
-      this.dateIOService = this.getProviderFromContainer(DateIOService);
-      this.dateNavigationService = this.getProviderFromContainer(DateNavigationService);
-      this.datepickerEnabledService = this.getProviderFromContainer(DatepickerEnabledService);
-      this.dateFormControlService = this.getProviderFromContainer(DateFormControlService);
-    }
+  private listenForUserSelectedDayChanges() {
+    return this.dateNavigationService.selectedDayChange.subscribe(dayModel => this.updateDate(dayModel.toDate(), true));
   }
 
   private listenForTouchChanges() {
@@ -237,7 +307,7 @@ export class ClrDateInputBase extends WrappedFormControl<ClrDateContainer> imple
 
   private listenForInputRefocus() {
     return this.dateNavigationService.selectedDayChange
-      .pipe(filter(date => !!date && !this.dateNavigationService.isRangePicker))
+      .pipe(filter(date => !!date))
       .subscribe(() => this.datepickerFocusService.focusInput(this.el.nativeElement));
   }
 }
diff --git a/projects/angular/src/forms/datepicker/date-input.validator.spec.ts b/projects/angular/src/forms/datepicker/date-input.validator.spec.ts
index 27e44fc365..a00ba4eb32 100644
--- a/projects/angular/src/forms/datepicker/date-input.validator.spec.ts
+++ b/projects/angular/src/forms/datepicker/date-input.validator.spec.ts
@@ -10,7 +10,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
 
 import { ClrDatepickerModule } from './datepicker.module';
-import { DateNavigationService } from './providers/date-navigation.service';
 
 @Component({
   template: `
@@ -31,7 +30,6 @@ export default function () {
       TestBed.configureTestingModule({
         imports: [ReactiveFormsModule, ClrDatepickerModule],
         declarations: [TestComponent],
-        providers: [DateNavigationService],
       });
 
       fixture = TestBed.createComponent(TestComponent);
diff --git a/projects/angular/src/forms/datepicker/date-input.validator.ts b/projects/angular/src/forms/datepicker/date-input.validator.ts
index 82c25148cd..d3daa53888 100644
--- a/projects/angular/src/forms/datepicker/date-input.validator.ts
+++ b/projects/angular/src/forms/datepicker/date-input.validator.ts
@@ -9,10 +9,9 @@ import { Directive, Optional } from '@angular/core';
 import { AbstractControl, NG_VALIDATORS, ValidationErrors, Validator } from '@angular/forms';
 
 import { DateIOService } from './providers/date-io.service';
-import { DateNavigationService } from './providers/date-navigation.service';
 
 @Directive({
-  selector: '[clrDate], [clrRangeStartDate], [clrRangeEndDate]',
+  selector: '[clrDate]',
   providers: [{ provide: NG_VALIDATORS, useExisting: ClrDateInputValidator, multi: true }],
 })
 export class ClrDateInputValidator implements Validator {
@@ -23,65 +22,13 @@ export class ClrDateInputValidator implements Validator {
       const value = this.dateIOService.getDateValueFromDateString(control.value);
       const minDate = this.dateIOService.disabledDates.minDate.toDate();
       const maxDate = this.dateIOService.disabledDates.maxDate.toDate();
+
       if (value && value < this.dateIOService.disabledDates.minDate.toDate()) {
         return { min: { min: minDate.toLocaleDateString(), actual: value.toLocaleDateString() } };
       } else if (value && value > this.dateIOService.disabledDates.maxDate.toDate()) {
         return { max: { max: maxDate.toLocaleDateString(), actual: value.toLocaleDateString() } };
       }
     }
-    return null;
-  }
-}
-
-@Directive({
-  selector: '[clrRangeStartDate]',
-  providers: [{ provide: NG_VALIDATORS, useExisting: ClrDateRangeStartInputValidator, multi: true }],
-})
-export class ClrDateRangeStartInputValidator implements Validator {
-  constructor(
-    @Optional() private dateIOService: DateIOService,
-    @Optional() private dateNavigationService: DateNavigationService
-  ) {}
-
-  validate(control: AbstractControl): ValidationErrors {
-    if (this.dateIOService) {
-      const value = this.dateIOService.getDateValueFromDateString(control.value);
-      if (
-        value &&
-        this.dateNavigationService &&
-        this.dateNavigationService.selectedEndDay &&
-        value > this.dateNavigationService.selectedEndDay.toDate()
-      ) {
-        return { range: { range: true } };
-      }
-    }
-
-    return null;
-  }
-}
-
-@Directive({
-  selector: '[clrRangeEndDate]',
-  providers: [{ provide: NG_VALIDATORS, useExisting: ClrDateRangeEndInputValidator, multi: true }],
-})
-export class ClrDateRangeEndInputValidator implements Validator {
-  constructor(
-    @Optional() private dateIOService: DateIOService,
-    @Optional() private dateNavigationService: DateNavigationService
-  ) {}
-
-  validate(control: AbstractControl): ValidationErrors {
-    if (this.dateIOService) {
-      const value = this.dateIOService.getDateValueFromDateString(control.value);
-      if (
-        value &&
-        this.dateNavigationService &&
-        this.dateNavigationService.selectedDay &&
-        value < this.dateNavigationService.selectedDay.toDate()
-      ) {
-        return { range: { range: true } };
-      }
-    }
 
     return null;
   }
diff --git a/projects/angular/src/forms/datepicker/date-range-end-input.ts b/projects/angular/src/forms/datepicker/date-range-end-input.ts
deleted file mode 100644
index f59c862779..0000000000
--- a/projects/angular/src/forms/datepicker/date-range-end-input.ts
+++ /dev/null
@@ -1,140 +0,0 @@
-/*
- * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-
-import { AfterViewInit, Directive, EventEmitter, HostBinding, HostListener, Input, Output } from '@angular/core';
-import { of } from 'rxjs';
-import { filter, switchMap } from 'rxjs/operators';
-
-import { ClrDateInputBase } from './date-input-base';
-import { DayModel } from './model/day.model';
-import { DatepickerFocusService } from './providers/datepicker-focus.service';
-import { datesAreEqual } from './utils/date-utils';
-
-@Directive({
-  selector: '[clrRangeEndDate]',
-  host: {
-    '[class.clr-input]': 'true',
-  },
-  providers: [DatepickerFocusService],
-})
-export class ClrDateRangeEndInput extends ClrDateInputBase implements AfterViewInit {
-  @Output('clrRangeEndDateChange') dateChange = new EventEmitter<Date>(false);
-
-  @Input('inputWidth') inputWidth = 13;
-
-  private initialClrDateInputValue: Date;
-  private previousDateChange: Date;
-
-  @Input('clrRangeEndDate')
-  set date(date: Date | string) {
-    if (typeof date === 'string') {
-      date = new Date(date);
-    }
-    if (this.previousDateChange !== date) {
-      this.updateDate(this.getValidDateValueFromDate(date as Date));
-    }
-
-    if (!this.initialClrDateInputValue) {
-      this.initialClrDateInputValue = date as Date;
-    }
-  }
-
-  @HostBinding('attr.size')
-  get inputSize() {
-    return this.inputWidth;
-  }
-
-  @HostListener('change', ['$event.target'])
-  onValueChange(target: HTMLInputElement) {
-    const validDateValue = this.dateIOService.getDateValueFromDateString(target.value);
-    if (this.usingClarityDatepicker() && validDateValue) {
-      this.updateDate(validDateValue, true);
-    } else if (this.usingNativeDatepicker()) {
-      const [year, month, day] = target.value.split('-');
-      this.updateDate(new Date(+year, +month - 1, +day), true);
-    } else {
-      this.emitDateOutput(null);
-    }
-  }
-
-  override ngOnInit() {
-    super.ngOnInit();
-
-    this.subscriptions.push(this.listenForUserSelectedDayChanges(), this.listenForControlValueChanges());
-  }
-
-  override ngAfterViewInit() {
-    // I don't know why I have to do this but after using the new HostWrapping Module I have to delay the processing
-    // of the initial Input set by the user to here. If I do not 2 issues occur:
-    // 1. The Input setter is called before ngOnInit. ngOnInit initializes the services without which the setter fails.
-    // 2. The Renderer doesn't work before ngAfterViewInit (It used to before the new HostWrapping Module for some reason).
-    // I need the renderer to set the value property on the input to make sure that if the user has supplied a Date
-    // input object, we reflect it with the right date on the input field using the IO service. I am not sure if
-    // these are major issues or not but just noting them down here.
-    this.processInitialInputs();
-  }
-
-  triggerControlInputValidation() {
-    if (this.datepickerHasFormControl()) {
-      this.control.control?.updateValueAndValidity({ emitEvent: false });
-      this.control.control?.setErrors(this.control.control.errors);
-    }
-  }
-
-  protected updateDate(value: Date, setByUserInteraction = false) {
-    const date = this.getValidDateValueFromDate(value);
-
-    if (setByUserInteraction) {
-      this.emitDateOutput(date);
-    } else {
-      this.previousDateChange = date;
-    }
-
-    if (this.dateNavigationService) {
-      this.dateNavigationService.selectedEndDay = date
-        ? new DayModel(date.getFullYear(), date.getMonth(), date.getDate())
-        : null;
-    }
-
-    this.updateInput(date);
-  }
-
-  private listenForControlValueChanges() {
-    return of(this.datepickerHasFormControl())
-      .pipe(
-        filter(hasControl => hasControl),
-        switchMap(() => this.control.valueChanges),
-        // only update date value if not being set by user
-        filter(() => !this.datepickerFocusService.elementIsFocused(this.el.nativeElement))
-      )
-      .subscribe((value: string) => this.updateDate(this.dateIOService.getDateValueFromDateString(value)));
-  }
-
-  private listenForUserSelectedDayChanges() {
-    return this.dateNavigationService.selectedEndDayChange.subscribe(dayModel =>
-      this.updateDate(dayModel?.toDate(), true)
-    );
-  }
-
-  private emitDateOutput(date: Date) {
-    if (!datesAreEqual(date, this.previousDateChange)) {
-      this.dateChange.emit(date);
-      this.previousDateChange = date;
-    } else if (!date && this.previousDateChange) {
-      this.dateChange.emit(null);
-      this.previousDateChange = null;
-    }
-  }
-
-  private processInitialInputs() {
-    if (this.datepickerHasFormControl()) {
-      this.updateDate(this.dateIOService.getDateValueFromDateString(this.control.value));
-    } else {
-      this.updateDate(this.initialClrDateInputValue);
-    }
-  }
-}
diff --git a/projects/angular/src/forms/datepicker/date-range-start-input.ts b/projects/angular/src/forms/datepicker/date-range-start-input.ts
deleted file mode 100644
index 79b96a3959..0000000000
--- a/projects/angular/src/forms/datepicker/date-range-start-input.ts
+++ /dev/null
@@ -1,149 +0,0 @@
-/*
- * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-
-import { AfterViewInit, Directive, EventEmitter, HostBinding, HostListener, Input, Output } from '@angular/core';
-import { of } from 'rxjs';
-import { filter, switchMap } from 'rxjs/operators';
-
-import { ClrDateInputBase } from './date-input-base';
-import { DayModel } from './model/day.model';
-import { DatepickerFocusService } from './providers/datepicker-focus.service';
-import { datesAreEqual } from './utils/date-utils';
-
-@Directive({
-  selector: '[clrRangeStartDate]',
-  host: {
-    '[class.clr-input]': 'true',
-    '[style.text-align]': "'right'",
-  },
-  providers: [DatepickerFocusService],
-})
-export class ClrDateRangeStartInput extends ClrDateInputBase implements AfterViewInit {
-  @Output('clrRangeStartDateChange') dateChange = new EventEmitter<Date>(false);
-
-  @Input('inputWidth') inputWidth = 13;
-
-  private initialClrDateInputValue: Date;
-  private previousDateChange: Date;
-
-  @Input('clrRangeStartDate')
-  set date(date: Date | string) {
-    if (typeof date === 'string') {
-      date = new Date(date);
-    }
-    if (this.previousDateChange !== date) {
-      this.updateDate(this.getValidDateValueFromDate(date as Date));
-    }
-
-    if (!this.initialClrDateInputValue) {
-      this.initialClrDateInputValue = date as Date;
-    }
-  }
-
-  @HostBinding('attr.size')
-  get inputSize() {
-    return this.inputWidth;
-  }
-
-  @HostListener('change', ['$event.target'])
-  onValueChange(target: HTMLInputElement) {
-    const validDateValue = this.dateIOService.getDateValueFromDateString(target.value);
-    if (this.usingClarityDatepicker() && validDateValue) {
-      this.updateDate(validDateValue, true);
-    } else if (this.usingNativeDatepicker()) {
-      const [year, month, day] = target.value.split('-');
-      this.updateDate(new Date(+year, +month - 1, +day), true);
-    } else {
-      this.emitDateOutput(null);
-    }
-  }
-
-  override ngOnInit() {
-    super.ngOnInit();
-
-    this.subscriptions.push(this.listenForUserSelectedDayChanges(), this.listenForControlValueChanges());
-  }
-
-  override ngAfterViewInit() {
-    // I don't know why I have to do this but after using the new HostWrapping Module I have to delay the processing
-    // of the initial Input set by the user to here. If I do not 2 issues occur:
-    // 1. The Input setter is called before ngOnInit. ngOnInit initializes the services without which the setter fails.
-    // 2. The Renderer doesn't work before ngAfterViewInit (It used to before the new HostWrapping Module for some reason).
-    // I need the renderer to set the value property on the input to make sure that if the user has supplied a Date
-    // input object, we reflect it with the right date on the input field using the IO service. I am not sure if
-    // these are major issues or not but just noting them down here.
-    this.processInitialInputs();
-    this.addSeparatorSymbol();
-  }
-
-  triggerControlInputValidation() {
-    if (this.datepickerHasFormControl()) {
-      this.control.control?.updateValueAndValidity({ emitEvent: false });
-      this.control.control?.setErrors(this.control.control.errors);
-    }
-  }
-
-  protected updateDate(value: Date, setByUserInteraction = false) {
-    const date = this.getValidDateValueFromDate(value);
-
-    if (setByUserInteraction) {
-      this.emitDateOutput(date);
-    } else {
-      this.previousDateChange = date;
-    }
-
-    if (this.dateNavigationService) {
-      this.dateNavigationService.selectedDay = date
-        ? new DayModel(date.getFullYear(), date.getMonth(), date.getDate())
-        : null;
-    }
-
-    this.updateInput(date);
-  }
-
-  private listenForControlValueChanges() {
-    return of(this.datepickerHasFormControl())
-      .pipe(
-        filter(hasControl => hasControl),
-        switchMap(() => this.control.valueChanges),
-        // only update date value if not being set by user
-        filter(() => !this.datepickerFocusService.elementIsFocused(this.el.nativeElement))
-      )
-      .subscribe((value: string) => this.updateDate(this.dateIOService.getDateValueFromDateString(value)));
-  }
-
-  private listenForUserSelectedDayChanges() {
-    return this.dateNavigationService.selectedDayChange.subscribe(dayModel =>
-      this.updateDate(dayModel?.toDate(), true)
-    );
-  }
-
-  private emitDateOutput(date: Date) {
-    if (!datesAreEqual(date, this.previousDateChange)) {
-      this.dateChange.emit(date);
-      this.previousDateChange = date;
-    } else if (!date && this.previousDateChange) {
-      this.dateChange.emit(null);
-      this.previousDateChange = null;
-    }
-  }
-
-  private processInitialInputs() {
-    if (this.datepickerHasFormControl()) {
-      this.updateDate(this.dateIOService.getDateValueFromDateString(this.control.value));
-    } else {
-      this.updateDate(this.initialClrDateInputValue);
-    }
-  }
-
-  private addSeparatorSymbol() {
-    const seperatorSpan = this.document.createElement('span');
-    seperatorSpan.className = 'date-range-separator';
-    seperatorSpan.textContent = '-';
-    this.el.nativeElement.parentNode?.insertBefore(seperatorSpan, this.el.nativeElement.nextSibling);
-  }
-}
diff --git a/projects/angular/src/forms/datepicker/date-single-input.ts b/projects/angular/src/forms/datepicker/date-single-input.ts
deleted file mode 100644
index 28089d3367..0000000000
--- a/projects/angular/src/forms/datepicker/date-single-input.ts
+++ /dev/null
@@ -1,123 +0,0 @@
-/*
- * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-
-import { AfterViewInit, Directive, EventEmitter, HostListener, Input, Output } from '@angular/core';
-import { of } from 'rxjs';
-import { filter, switchMap } from 'rxjs/operators';
-
-import { ClrDateInputBase } from './date-input-base';
-import { DayModel } from './model/day.model';
-import { DatepickerFocusService } from './providers/datepicker-focus.service';
-import { datesAreEqual } from './utils/date-utils';
-
-@Directive({
-  selector: '[clrDate]',
-  host: {
-    '[class.clr-input]': 'true',
-  },
-  providers: [DatepickerFocusService],
-})
-export class ClrDateInput extends ClrDateInputBase implements AfterViewInit {
-  @Output('clrDateChange') dateChange = new EventEmitter<Date>(false);
-
-  private initialClrDateInputValue: Date;
-  private previousDateChange: Date;
-
-  @Input('clrDate')
-  set date(date: Date | string) {
-    if (date && typeof date === 'string') {
-      date = new Date(date);
-    }
-    if (this.previousDateChange !== date) {
-      this.updateDate(this.getValidDateValueFromDate(date as Date));
-    }
-
-    if (!this.initialClrDateInputValue) {
-      this.initialClrDateInputValue = date as Date;
-    }
-  }
-
-  @HostListener('change', ['$event.target'])
-  onValueChange(target: HTMLInputElement) {
-    const validDateValue = this.dateIOService.getDateValueFromDateString(target.value);
-    if (this.usingClarityDatepicker() && validDateValue) {
-      this.updateDate(validDateValue, true);
-    } else if (this.usingNativeDatepicker()) {
-      const [year, month, day] = target.value.split('-');
-      this.updateDate(new Date(+year, +month - 1, +day), true);
-    } else {
-      this.emitDateOutput(null);
-    }
-  }
-
-  override ngOnInit() {
-    super.ngOnInit();
-
-    this.subscriptions.push(this.listenForUserSelectedDayChanges(), this.listenForControlValueChanges());
-  }
-
-  override ngAfterViewInit() {
-    // I don't know why I have to do this but after using the new HostWrapping Module I have to delay the processing
-    // of the initial Input set by the user to here. If I do not 2 issues occur:
-    // 1. The Input setter is called before ngOnInit. ngOnInit initializes the services without which the setter fails.
-    // 2. The Renderer doesn't work before ngAfterViewInit (It used to before the new HostWrapping Module for some reason).
-    // I need the renderer to set the value property on the input to make sure that if the user has supplied a Date
-    // input object, we reflect it with the right date on the input field using the IO service. I am not sure if
-    // these are major issues or not but just noting them down here.
-    this.processInitialInputs();
-  }
-
-  protected updateDate(value: Date, setByUserInteraction = false, fieldName = 'selectedDay') {
-    const date = this.getValidDateValueFromDate(value);
-    if (setByUserInteraction) {
-      this.emitDateOutput(date);
-    } else {
-      this.previousDateChange = date;
-    }
-
-    if (this.dateNavigationService) {
-      this.dateNavigationService[fieldName] = date
-        ? new DayModel(date.getFullYear(), date.getMonth(), date.getDate())
-        : null;
-    }
-
-    this.updateInput(date);
-  }
-
-  private listenForControlValueChanges() {
-    return of(this.datepickerHasFormControl())
-      .pipe(
-        filter(hasControl => hasControl),
-        switchMap(() => this.control.valueChanges),
-        // only update date value if not being set by user
-        filter(() => !this.datepickerFocusService.elementIsFocused(this.el.nativeElement))
-      )
-      .subscribe((value: string) => this.updateDate(this.dateIOService.getDateValueFromDateString(value)));
-  }
-
-  private listenForUserSelectedDayChanges() {
-    return this.dateNavigationService.selectedDayChange.subscribe(dayModel => this.updateDate(dayModel.toDate(), true));
-  }
-
-  private emitDateOutput(date: Date) {
-    if (!datesAreEqual(date, this.previousDateChange)) {
-      this.dateChange.emit(date);
-      this.previousDateChange = date;
-    } else if (!date && this.previousDateChange) {
-      this.dateChange.emit(null);
-      this.previousDateChange = null;
-    }
-  }
-
-  private processInitialInputs() {
-    if (this.datepickerHasFormControl()) {
-      this.updateDate(this.dateIOService.getDateValueFromDateString(this.control.value));
-    } else {
-      this.updateDate(this.initialClrDateInputValue);
-    }
-  }
-}
diff --git a/projects/angular/src/forms/datepicker/datepicker-view-manager.html b/projects/angular/src/forms/datepicker/datepicker-view-manager.html
index f316a698e1..7c4998dfc4 100644
--- a/projects/angular/src/forms/datepicker/datepicker-view-manager.html
+++ b/projects/angular/src/forms/datepicker/datepicker-view-manager.html
@@ -5,21 +5,6 @@
   ~ The full license information can be found in LICENSE in the root directory of this project.
 -->
 
-<div class="options-wrapper" *ngIf="hasRangeOptions">
-  <div
-    class="range-option"
-    *ngFor="let option of dateRangeOptions; let i = index"
-    [ngClass]="{'active': !!option?.isCustomRange}"
-    [attr.aria-label]="option?.label"
-    tabindex="0"
-    (keyup.enter)="onRangeOptionSelect(option)"
-    (click)="onRangeOptionSelect(option)"
-  >
-    {{option.label}}
-  </div>
-</div>
-<div class="datepicker-view-manager">
-  <clr-monthpicker *ngIf="isMonthView"></clr-monthpicker>
-  <clr-yearpicker *ngIf="isYearView"></clr-yearpicker>
-  <clr-daypicker *ngIf="isDayView"></clr-daypicker>
-</div>
+<clr-monthpicker *ngIf="isMonthView"></clr-monthpicker>
+<clr-yearpicker *ngIf="isYearView"></clr-yearpicker>
+<clr-daypicker *ngIf="isDayView"></clr-daypicker>
diff --git a/projects/angular/src/forms/datepicker/datepicker-view-manager.spec.ts b/projects/angular/src/forms/datepicker/datepicker-view-manager.spec.ts
index aab8bba433..7b30869486 100644
--- a/projects/angular/src/forms/datepicker/datepicker-view-manager.spec.ts
+++ b/projects/angular/src/forms/datepicker/datepicker-view-manager.spec.ts
@@ -14,7 +14,6 @@ import { DateFormControlService } from './providers/date-form-control.service';
 import { DateIOService } from './providers/date-io.service';
 import { DateNavigationService } from './providers/date-navigation.service';
 import { DatepickerFocusService } from './providers/datepicker-focus.service';
-import { DatePickerHelperService } from './providers/datepicker-helper.service';
 import { LocaleHelperService } from './providers/locale-helper.service';
 import { ViewManagerService } from './providers/view-manager.service';
 
@@ -22,7 +21,6 @@ export default function () {
   describe('Datepicker View Manager Component', () => {
     let context: TestContext<ClrDatepickerViewManager, TestComponent>;
     let viewManagerService: ViewManagerService;
-    let hostElement;
 
     beforeEach(function () {
       context = this.create(ClrDatepickerViewManager, TestComponent, [
@@ -32,12 +30,9 @@ export default function () {
         DateNavigationService,
         LocaleHelperService,
         DateIOService,
-        DatePickerHelperService,
         DateFormControlService,
       ]);
       viewManagerService = context.getClarityProvider(ViewManagerService);
-      hostElement = context.clarityElement;
-      context.clarityElement = context.clarityElement.querySelector('.datepicker-view-manager');
     });
 
     it('shows the daypicker when dayView is set to true', () => {
@@ -65,7 +60,7 @@ export default function () {
     });
 
     it('has the .datepicker class added to the host', () => {
-      expect(hostElement.classList.contains('datepicker')).toBe(true);
+      expect(context.clarityElement.classList.contains('datepicker')).toBe(true);
     });
   });
 }
diff --git a/projects/angular/src/forms/datepicker/datepicker-view-manager.ts b/projects/angular/src/forms/datepicker/datepicker-view-manager.ts
index c7b09b3449..d339a30e4e 100644
--- a/projects/angular/src/forms/datepicker/datepicker-view-manager.ts
+++ b/projects/angular/src/forms/datepicker/datepicker-view-manager.ts
@@ -5,13 +5,10 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { Component, Optional } from '@angular/core';
+import { Component } from '@angular/core';
 
 import { ClrCommonStringsService } from '../../utils/i18n/common-strings.service';
-import { DateIOService } from './providers/date-io.service';
-import { DateNavigationService } from './providers/date-navigation.service';
 import { DatepickerFocusService } from './providers/datepicker-focus.service';
-import { DatePickerHelperService } from './providers/datepicker-helper.service';
 import { ViewManagerService } from './providers/view-manager.service';
 
 @Component({
@@ -20,22 +17,13 @@ import { ViewManagerService } from './providers/view-manager.service';
   providers: [DatepickerFocusService],
   host: {
     '[class.datepicker]': 'true',
-    '[class.has-range-option]': 'hasRangeOptions',
     '[attr.aria-modal]': 'true',
     '[attr.aria-label]': 'commonStrings.keys.datepickerDialogLabel',
     role: 'dialog',
   },
 })
 export class ClrDatepickerViewManager {
-  dateRangeOptions = this.dateIOService.getRangeOptions();
-
-  constructor(
-    public commonStrings: ClrCommonStringsService,
-    private viewManagerService: ViewManagerService,
-    private dateIOService: DateIOService,
-    @Optional() private datePickerHelperService: DatePickerHelperService,
-    private dateNavigationService: DateNavigationService
-  ) {}
+  constructor(public commonStrings: ClrCommonStringsService, private viewManagerService: ViewManagerService) {}
 
   /**
    * Returns if the current view is the monthpicker.
@@ -57,14 +45,4 @@ export class ClrDatepickerViewManager {
   get isDayView(): boolean {
     return this.viewManagerService.isDayView;
   }
-
-  get hasRangeOptions() {
-    return this.dateNavigationService && this.dateNavigationService.isRangePicker && this.dateRangeOptions?.length;
-  }
-
-  onRangeOptionSelect(selectedRange) {
-    selectedRange?.value?.forEach(date => {
-      this.datePickerHelperService?.selectDay(this.datePickerHelperService.convertDateToDayModel(date));
-    });
-  }
 }
diff --git a/projects/angular/src/forms/datepicker/datepicker.module.ts b/projects/angular/src/forms/datepicker/datepicker.module.ts
index 3ce1201578..f40f036014 100644
--- a/projects/angular/src/forms/datepicker/datepicker.module.ts
+++ b/projects/angular/src/forms/datepicker/datepicker.module.ts
@@ -24,14 +24,8 @@ import { ClrPopoverModuleNext } from '../../utils/popover/popover.module';
 import { ClrCommonFormsModule } from '../common/common.module';
 import { ClrCalendar } from './calendar';
 import { ClrDateContainer } from './date-container';
-import {
-  ClrDateInputValidator,
-  ClrDateRangeEndInputValidator,
-  ClrDateRangeStartInputValidator,
-} from './date-input.validator';
-import { ClrDateRangeEndInput } from './date-range-end-input';
-import { ClrDateRangeStartInput } from './date-range-start-input';
-import { ClrDateInput } from './date-single-input';
+import { ClrDateInput } from './date-input';
+import { ClrDateInputValidator } from './date-input.validator';
 import { ClrDatepickerViewManager } from './datepicker-view-manager';
 import { ClrDay } from './day';
 import { ClrDaypicker } from './daypicker';
@@ -42,11 +36,7 @@ export const CLR_DATEPICKER_DIRECTIVES: Type<any>[] = [
   ClrDay,
   ClrDateContainer,
   ClrDateInput,
-  ClrDateRangeStartInput,
-  ClrDateRangeEndInput,
   ClrDateInputValidator,
-  ClrDateRangeStartInputValidator,
-  ClrDateRangeEndInputValidator,
   ClrDatepickerViewManager,
   ClrMonthpicker,
   ClrYearpicker,
diff --git a/projects/angular/src/forms/datepicker/day.spec.ts b/projects/angular/src/forms/datepicker/day.spec.ts
index 881d7a213c..841405c3d2 100644
--- a/projects/angular/src/forms/datepicker/day.spec.ts
+++ b/projects/angular/src/forms/datepicker/day.spec.ts
@@ -13,11 +13,8 @@ import { ClrDay } from './day';
 import { DayViewModel } from './model/day-view.model';
 import { DayModel } from './model/day.model';
 import { DateFormControlService } from './providers/date-form-control.service';
-import { DateIOService } from './providers/date-io.service';
 import { DateNavigationService } from './providers/date-navigation.service';
-import { DatePickerHelperService } from './providers/datepicker-helper.service';
 import { LocaleHelperService } from './providers/locale-helper.service';
-import { ViewManagerService } from './providers/view-manager.service';
 
 export default function () {
   describe('Day Component', () => {
@@ -29,9 +26,6 @@ export default function () {
         DateNavigationService,
         ClrPopoverToggleService,
         DateFormControlService,
-        DateIOService,
-        DatePickerHelperService,
-        ViewManagerService,
       ]);
     });
 
diff --git a/projects/angular/src/forms/datepicker/day.ts b/projects/angular/src/forms/datepicker/day.ts
index 57505522cc..c5d651a73f 100644
--- a/projects/angular/src/forms/datepicker/day.ts
+++ b/projects/angular/src/forms/datepicker/day.ts
@@ -5,28 +5,25 @@
  * The full license information can be found in LICENSE in the root directory of this project.
  */
 
-import { Component, HostListener, Input } from '@angular/core';
+import { Component, Input } from '@angular/core';
 
 import { ClrCommonStringsService } from '../../utils/i18n/common-strings.service';
+import { ClrPopoverToggleService } from '../../utils/popover/providers/popover-toggle.service';
 import { DayViewModel } from './model/day-view.model';
 import { DayModel } from './model/day.model';
+import { DateFormControlService } from './providers/date-form-control.service';
 import { DateNavigationService } from './providers/date-navigation.service';
-import { DatePickerHelperService } from './providers/datepicker-helper.service';
 
 @Component({
   selector: 'clr-day',
   template: `
     <button
-      #dayBtn
       class="day-btn"
       type="button"
       [class.is-today]="dayView.isTodaysDate"
       [class.is-excluded]="dayView.isExcluded"
       [class.is-disabled]="dayView.isDisabled"
       [class.is-selected]="dayView.isSelected"
-      [class.in-range]="isInRange()"
-      [class.is-start-range]="isRangeStartDay"
-      [class.is-end-range]="isRangeEndDay"
       [attr.tabindex]="dayView.tabIndex"
       (click)="selectDay()"
       (focus)="onDayViewFocus()"
@@ -44,7 +41,8 @@ export class ClrDay {
 
   constructor(
     private _dateNavigationService: DateNavigationService,
-    private _datePickerHelperService: DatePickerHelperService,
+    private _toggleService: ClrPopoverToggleService,
+    private dateFormControlService: DateFormControlService,
     private commonStrings: ClrCommonStringsService
   ) {}
 
@@ -68,30 +66,6 @@ export class ClrDay {
       : this._dayView.dayModel.toDateString();
   }
 
-  get isRangeStartDay(): boolean {
-    return (
-      this._dateNavigationService.isRangePicker &&
-      this.dayView?.dayModel?.toComparisonString() === this._dateNavigationService.selectedDay?.toComparisonString()
-    );
-  }
-
-  get isRangeEndDay(): boolean {
-    return (
-      this._dateNavigationService.isRangePicker &&
-      this.dayView?.dayModel?.toComparisonString() === this._dateNavigationService.selectedEndDay?.toComparisonString()
-    );
-  }
-
-  /**
-   * Calls the DateNavigationService to update the hovered day value of the calendar
-   */
-  @HostListener('mouseenter')
-  hoverListener(): void {
-    if (!this.dayView.isDisabled) {
-      this._dateNavigationService.hoveredDay = this.dayView.dayModel;
-    }
-  }
-
   /**
    * Updates the focusedDay in the DateNavigationService when the ClrDay is focused.
    */
@@ -104,29 +78,8 @@ export class ClrDay {
    */
   selectDay(): void {
     const day: DayModel = this.dayView.dayModel;
-    this._datePickerHelperService.selectDay(day);
-  }
-
-  /**
-   * Applicable only to date range picker
-   * Compares whether the day is in between the start and end date range
-   */
-  isInRange(): boolean {
-    if (!this._dateNavigationService.isRangePicker) {
-      return false;
-    }
-    if (this._dateNavigationService.selectedDay && this._dateNavigationService.selectedEndDay) {
-      return (
-        this._dayView.dayModel?.isAfter(this._dateNavigationService.selectedDay) &&
-        this._dayView.dayModel?.isBefore(this._dateNavigationService.selectedEndDay)
-      );
-    } else if (this._dateNavigationService.selectedDay && !this._dateNavigationService.selectedEndDay) {
-      return (
-        this._dayView.dayModel?.isAfter(this._dateNavigationService.selectedDay) &&
-        this._dayView.dayModel?.isBefore(this._dateNavigationService.hoveredDay)
-      );
-    } else {
-      return false;
-    }
+    this._dateNavigationService.notifySelectedDayChanged(day);
+    this.dateFormControlService.markAsDirty();
+    this._toggleService.open = false;
   }
 }
diff --git a/projects/angular/src/forms/datepicker/daypicker.spec.ts b/projects/angular/src/forms/datepicker/daypicker.spec.ts
index 2195f88a8a..30824140d9 100644
--- a/projects/angular/src/forms/datepicker/daypicker.spec.ts
+++ b/projects/angular/src/forms/datepicker/daypicker.spec.ts
@@ -16,7 +16,6 @@ import { DateFormControlService } from './providers/date-form-control.service';
 import { DateIOService } from './providers/date-io.service';
 import { DateNavigationService } from './providers/date-navigation.service';
 import { DatepickerFocusService } from './providers/datepicker-focus.service';
-import { DatePickerHelperService } from './providers/datepicker-helper.service';
 import { LocaleHelperService } from './providers/locale-helper.service';
 import { ViewManagerService } from './providers/view-manager.service';
 
@@ -42,7 +41,6 @@ export default function () {
         DatepickerFocusService,
         DateFormControlService,
         ClrCommonStringsService,
-        DatePickerHelperService,
       ]);
       viewManagerService = context.getClarityProvider(ViewManagerService);
       localeHelperService = context.getClarityProvider(LocaleHelperService);
diff --git a/projects/angular/src/forms/datepicker/index.ts b/projects/angular/src/forms/datepicker/index.ts
index eb57978f7b..4e1be57e03 100644
--- a/projects/angular/src/forms/datepicker/index.ts
+++ b/projects/angular/src/forms/datepicker/index.ts
@@ -6,10 +6,7 @@
  */
 
 export * from './date-container';
-export * from './date-input-base';
-export * from './date-single-input';
-export * from './date-range-start-input';
-export * from './date-range-end-input';
+export * from './date-input';
 export * from './date-input.validator';
 export * from './datepicker-view-manager';
 export * from './daypicker';
diff --git a/projects/angular/src/forms/datepicker/interfaces/date-range.interface.ts b/projects/angular/src/forms/datepicker/interfaces/date-range.interface.ts
index e8b5136058..ee7c136baf 100644
--- a/projects/angular/src/forms/datepicker/interfaces/date-range.interface.ts
+++ b/projects/angular/src/forms/datepicker/interfaces/date-range.interface.ts
@@ -11,9 +11,3 @@ export interface DateRange {
   minDate?: DayModel;
   maxDate?: DayModel;
 }
-
-export interface DateRangeOption {
-  label: string;
-  value: string[];
-  isCustomRange?: boolean;
-}
diff --git a/projects/angular/src/forms/datepicker/model/calendar-view.model.spec.ts b/projects/angular/src/forms/datepicker/model/calendar-view.model.spec.ts
index 518bb80dd7..48704f912e 100644
--- a/projects/angular/src/forms/datepicker/model/calendar-view.model.spec.ts
+++ b/projects/angular/src/forms/datepicker/model/calendar-view.model.spec.ts
@@ -95,7 +95,6 @@ export default function (): void {
         new CalendarModel(year, month),
         null,
         null,
-        null,
         todaysDateInCal,
         0,
         dateRange
@@ -129,15 +128,7 @@ export default function (): void {
     function testCalendarDisabledDayViews(year: number, month: number) {
       // Uses the given year/month to create a new CalendarModel
       // Note that dateRange is defined above for use in multiple places
-      const calendar = new CalendarViewModel(
-        new CalendarModel(year, month),
-        null,
-        null,
-        null,
-        todaysDateInCal,
-        0,
-        dateRange
-      );
+      const calendar = new CalendarViewModel(new CalendarModel(year, month), null, null, todaysDateInCal, 0, dateRange);
       // calView is an array of 'week' arrays that represents the six possible lines (including days for end of previous / beginning of next month)
       // for the days of the month.
       const calView: DayViewModel[][] = calendar.calendarView;
@@ -161,7 +152,6 @@ export default function (): void {
         calJan2018,
         null,
         null,
-        null,
         todaysDateInCal,
         0,
         dateRange
@@ -192,7 +182,6 @@ export default function (): void {
         calJan2018,
         null,
         null,
-        null,
         todaysDateInCal,
         0,
         dateRange
@@ -231,7 +220,6 @@ export default function (): void {
         calJan2018,
         null,
         null,
-        null,
         todaysDateInCal,
         0,
         dateRange
@@ -245,7 +233,7 @@ export default function (): void {
         .map((_e, i) => i + 1);
       testCalendarViewDates(prevUS, currUS, nextUS, testJan2018US);
 
-      const testJan2018Fr = new CalendarViewModel(calJan2018, null, null, null, todaysDateInCal, 1, dateRange);
+      const testJan2018Fr = new CalendarViewModel(calJan2018, null, null, todaysDateInCal, 1, dateRange);
       const prevFr: number[] = [];
       const currFr: number[] = Array(31)
         .fill(0)
@@ -255,7 +243,7 @@ export default function (): void {
         .map((_e, i) => i + 1);
       testCalendarViewDates(prevFr, currFr, nextFr, testJan2018Fr);
 
-      const testJan2018Random = new CalendarViewModel(calJan2018, null, null, null, todaysDateInCal, 5, dateRange);
+      const testJan2018Random = new CalendarViewModel(calJan2018, null, null, todaysDateInCal, 5, dateRange);
       const prevRandom: number[] = [29, 30, 31];
       const currRandom: number[] = Array(31)
         .fill(0)
@@ -271,7 +259,6 @@ export default function (): void {
       let testJan2018US: CalendarViewModel = new CalendarViewModel(
         calJan2018,
         dayModel,
-        dayModel,
         null,
         todaysDateInCal,
         0,
@@ -282,7 +269,7 @@ export default function (): void {
       testCalendarViewSelectedDates(testJan2018US, 0, 5, false);
 
       dayModel = new DayModel(2017, 0, 5);
-      testJan2018US = new CalendarViewModel(calJan2018, dayModel, null, null, todaysDateInCal, 0, dateRange);
+      testJan2018US = new CalendarViewModel(calJan2018, dayModel, null, todaysDateInCal, 0, dateRange);
 
       // Everything should be false
       testCalendarViewSelectedDates(testJan2018US, 0, 5, true);
@@ -295,7 +282,6 @@ export default function (): void {
           calJan2018,
           null,
           null,
-          null,
           todaysDateInCal,
           0,
           dateRange
@@ -314,7 +300,6 @@ export default function (): void {
           calJan2018,
           null,
           null,
-          null,
           todaysDateNotInCal,
           0,
           dateRange
@@ -330,7 +315,6 @@ export default function (): void {
       const testJan2018US: CalendarViewModel = new CalendarViewModel(
         calJan2018,
         dayModel,
-        dayModel,
         null,
         todaysDateInCal,
         0,
@@ -346,7 +330,6 @@ export default function (): void {
       const testJan2018US: CalendarViewModel = new CalendarViewModel(
         calJan2018,
         null,
-        null,
         dayModel,
         todaysDateInCal,
         0,
@@ -362,7 +345,6 @@ export default function (): void {
       const testJan2018US: CalendarViewModel = new CalendarViewModel(
         calJan2018,
         null,
-        null,
         dayModel,
         todaysDateInCal,
         0,
diff --git a/projects/angular/src/forms/datepicker/model/calendar-view.model.ts b/projects/angular/src/forms/datepicker/model/calendar-view.model.ts
index f84fa5f49c..85b878c035 100644
--- a/projects/angular/src/forms/datepicker/model/calendar-view.model.ts
+++ b/projects/angular/src/forms/datepicker/model/calendar-view.model.ts
@@ -19,7 +19,6 @@ export class CalendarViewModel {
   constructor(
     public calendar: CalendarModel,
     private selectedDay: DayModel,
-    private selectedEndDay: DayModel,
     private focusableDay: DayModel,
     private today: DayModel,
     public firstDayOfWeek: number,
@@ -44,24 +43,6 @@ export class CalendarViewModel {
     this.focusableDay = day;
   }
 
-  /**
-   * Updates the selected day in the calendar
-   */
-  updateSelectedDay(day: DayModel | undefined): void {
-    this.setSelectedDay(this.selectedDay, false);
-    this.selectedDay = day;
-    this.setSelectedDay(day, true);
-  }
-
-  /**
-   * Updates the selected end day in the calendar
-   */
-  updateSelectedEndDay(day: DayModel | undefined): void {
-    this.setSelectedDay(this.selectedEndDay, false);
-    this.selectedEndDay = day;
-    this.setSelectedDay(day, true);
-  }
-
   /**
    * Generates a 6x7 matrix of DayViewModel based on the Calendar.
    * The 6x7 matrix is structured according to the first day of the week.
@@ -177,8 +158,9 @@ export class CalendarViewModel {
    * Initialize the selected day if the day is in the calendar.
    */
   private initializeSelectedDay(): void {
-    this.setSelectedDay(this.selectedDay, true);
-    this.setSelectedDay(this.selectedEndDay, true);
+    if (this.selectedDay && this.isDayInCalendarView(this.selectedDay)) {
+      this.currMonthDayViews[this.selectedDay.date - 1].isSelected = true;
+    }
   }
 
   /**
@@ -192,9 +174,6 @@ export class CalendarViewModel {
     } else if (this.selectedDay && this.isDayInCalendarView(this.selectedDay)) {
       this.setFocusableFlag(this.selectedDay, true);
       this.focusableDay = this.selectedDay.clone();
-    } else if (this.selectedEndDay && this.isDayInCalendarView(this.selectedEndDay)) {
-      this.setFocusableFlag(this.selectedEndDay, true);
-      this.focusableDay = this.selectedEndDay.clone();
     } else if (this.isDayInCalendarView(this.today)) {
       this.setFocusableFlag(this.today, true);
       this.focusableDay = this.today.clone();
@@ -209,10 +188,4 @@ export class CalendarViewModel {
       this.currMonthDayViews[day.date - 1].isFocusable = flag;
     }
   }
-
-  private setSelectedDay(day: DayModel, flag: boolean) {
-    if (day && this.isDayInCalendarView(day)) {
-      this.currMonthDayViews[day?.date - 1].isSelected = flag;
-    }
-  }
 }
diff --git a/projects/angular/src/forms/datepicker/model/day-view.model.ts b/projects/angular/src/forms/datepicker/model/day-view.model.ts
index 93b6f18eb7..19da17b292 100644
--- a/projects/angular/src/forms/datepicker/model/day-view.model.ts
+++ b/projects/angular/src/forms/datepicker/model/day-view.model.ts
@@ -14,9 +14,7 @@ export class DayViewModel {
     public isExcluded: boolean = false,
     public isDisabled: boolean = false,
     public isSelected: boolean = false,
-    public isFocusable: boolean = false,
-    public isRangeStartDay: boolean = false,
-    public isRangeEndDay: boolean = false
+    public isFocusable: boolean = false
   ) {}
 
   /**
diff --git a/projects/angular/src/forms/datepicker/model/day.model.ts b/projects/angular/src/forms/datepicker/model/day.model.ts
index 191a9bfc04..9753951234 100644
--- a/projects/angular/src/forms/datepicker/model/day.model.ts
+++ b/projects/angular/src/forms/datepicker/model/day.model.ts
@@ -53,24 +53,6 @@ export class DayModel {
     });
   }
 
-  /**
-   * Compares the dates and returns boolean value based on the value passed
-   */
-  isBefore(day: DayModel, dayInclusive = false) {
-    return dayInclusive
-      ? this.toDate().getTime() <= day?.toDate().getTime()
-      : this.toDate().getTime() < day?.toDate().getTime();
-  }
-
-  /**
-   * Compares the dates and returns boolean value based on the value passed
-   */
-  isAfter(day: DayModel, dayInclusive = false) {
-    return dayInclusive
-      ? this.toDate().getTime() >= day?.toDate().getTime()
-      : this.toDate().getTime() > day?.toDate().getTime();
-  }
-
   private pad(num: number): string {
     return num < 10 ? `0${num}` : `${num}`;
   }
diff --git a/projects/angular/src/forms/datepicker/model/year-range.model.ts b/projects/angular/src/forms/datepicker/model/year-range.model.ts
index 30cd08eb65..07bd4d3377 100644
--- a/projects/angular/src/forms/datepicker/model/year-range.model.ts
+++ b/projects/angular/src/forms/datepicker/model/year-range.model.ts
@@ -49,13 +49,6 @@ export class YearRangeModel {
     return this.yearRange.indexOf(value) > -1;
   }
 
-  /**
-   * Checks if the value is in the YearRangeModel.
-   */
-  inRangeBetweenYears(value: number, startYear: number, endYear: number): boolean {
-    return value > startYear && value < endYear;
-  }
-
   /**
    * Generates the year range based on the year parameter.
    * eg: If 2018 is passed the output will be [2010, 2011, ..., 2019]
diff --git a/projects/angular/src/forms/datepicker/monthpicker.spec.ts b/projects/angular/src/forms/datepicker/monthpicker.spec.ts
index 38ce4afe78..2f4e355f8b 100644
--- a/projects/angular/src/forms/datepicker/monthpicker.spec.ts
+++ b/projects/angular/src/forms/datepicker/monthpicker.spec.ts
@@ -13,10 +13,8 @@ import { Keys } from '../../utils/enums/keys.enum';
 import { ClrPopoverToggleService } from '../../utils/popover/providers/popover-toggle.service';
 import { DayModel } from './model/day.model';
 import { ClrMonthpicker } from './monthpicker';
-import { DateFormControlService } from './providers/date-form-control.service';
 import { DateNavigationService } from './providers/date-navigation.service';
 import { DatepickerFocusService } from './providers/datepicker-focus.service';
-import { DatePickerHelperService } from './providers/datepicker-helper.service';
 import { LocaleHelperService } from './providers/locale-helper.service';
 import { ViewManagerService } from './providers/view-manager.service';
 
@@ -44,8 +42,6 @@ export default function () {
           ClrPopoverToggleService,
           { provide: DateNavigationService, useValue: dateNavigationService },
           LocaleHelperService,
-          DatePickerHelperService,
-          DateFormControlService,
         ]);
         localeHelperService = context.getClarityProvider(LocaleHelperService);
       });
@@ -132,8 +128,6 @@ export default function () {
           ClrPopoverToggleService,
           { provide: DateNavigationService, useValue: dateNavigationService },
           LocaleHelperService,
-          DatePickerHelperService,
-          DateFormControlService,
         ]);
         localeHelperService = context.getClarityProvider(LocaleHelperService);
       });
@@ -203,8 +197,6 @@ export default function () {
           ClrPopoverToggleService,
           { provide: DateNavigationService, useValue: dateNavigationService },
           LocaleHelperService,
-          DatePickerHelperService,
-          DateFormControlService,
         ]);
       }
 
diff --git a/projects/angular/src/forms/datepicker/monthpicker.ts b/projects/angular/src/forms/datepicker/monthpicker.ts
index d39a03cf32..71d8134970 100644
--- a/projects/angular/src/forms/datepicker/monthpicker.ts
+++ b/projects/angular/src/forms/datepicker/monthpicker.ts
@@ -64,12 +64,8 @@ import { ViewManagerService } from './providers/view-manager.service';
         *ngFor="let month of monthNames; let monthIndex = index"
         (click)="changeMonth(monthIndex)"
         [class.is-selected]="isSelected(monthIndex)"
-        [class.is-start-range]="getIsRangeStartMonth(monthIndex)"
-        [class.is-end-range]="getIsRangeEndMonth(monthIndex)"
-        [class.in-range]="isInRange(monthIndex)"
         [attr.tabindex]="getTabIndex(monthIndex)"
         [class.is-today]="calendarYear === currentCalendarYear && monthIndex === currentCalendarMonth"
-        (mouseenter)="onHover(monthIndex)"
       >
         {{ month }}
       </button>
@@ -87,11 +83,11 @@ export class ClrMonthpicker implements AfterViewInit {
   private _focusedMonthIndex: number;
 
   constructor(
+    private _viewManagerService: ViewManagerService,
     private _localeHelperService: LocaleHelperService,
     private _dateNavigationService: DateNavigationService,
     private _datepickerFocusService: DatepickerFocusService,
     private _elRef: ElementRef<HTMLElement>,
-    private _viewManagerService: ViewManagerService,
     public commonStrings: ClrCommonStringsService
   ) {
     this._focusedMonthIndex = this.calendarMonthIndex;
@@ -112,13 +108,6 @@ export class ClrMonthpicker implements AfterViewInit {
     return this._dateNavigationService.displayedCalendar.month;
   }
 
-  /**
-   * Gets the year which the user is currently on.
-   */
-  get calendarEndMonthIndex(): number {
-    return this._dateNavigationService.selectedEndDay?.month;
-  }
-
   get yearAttrString(): string {
     return this.commonStrings.parse(this.commonStrings.keys.datepickerSelectYearText, {
       CALENDAR_YEAR: this.calendarYear.toString(),
@@ -140,22 +129,6 @@ export class ClrMonthpicker implements AfterViewInit {
     return new Date().getMonth();
   }
 
-  getIsRangeStartMonth(monthIndex: number): boolean {
-    return (
-      this._dateNavigationService.isRangePicker &&
-      this.calendarYear === this._dateNavigationService.selectedDay?.year &&
-      monthIndex === this._dateNavigationService.selectedDay?.month
-    );
-  }
-
-  getIsRangeEndMonth(monthIndex: number): boolean {
-    return (
-      this._dateNavigationService.isRangePicker &&
-      this.calendarYear === this._dateNavigationService.selectedEndDay?.year &&
-      monthIndex === this._dateNavigationService.selectedEndDay?.month
-    );
-  }
-
   /**
    * Calls the ViewManagerService to change to the yearpicker view.
    */
@@ -164,7 +137,7 @@ export class ClrMonthpicker implements AfterViewInit {
   }
 
   /**
-   * Focuses on the current calendar month when the view is initialized.
+   * Focuses on the current calendar month when the View is initialized.
    */
   ngAfterViewInit() {
     this._datepickerFocusService.focusCell(this._elRef);
@@ -202,19 +175,11 @@ export class ClrMonthpicker implements AfterViewInit {
 
   isSelected(monthIndex: number): boolean {
     return (
-      (this._dateNavigationService.selectedDay?.year === this.calendarYear &&
-        monthIndex === this._dateNavigationService.selectedDay?.month) ||
-      (this._dateNavigationService.selectedEndDay?.year === this.calendarYear &&
-        monthIndex === this.calendarEndMonthIndex)
+      this._dateNavigationService.selectedDay?.year === this.calendarYear &&
+      monthIndex === this._dateNavigationService.selectedDay?.month
     );
   }
 
-  /**
-   * Calls the DateNavigationService to update the hovered month value of the calendar
-   */
-  onHover(monthIndex: number): void {
-    this._dateNavigationService.hoveredMonth = monthIndex;
-  }
   /**
    * Calls the DateNavigationService to update the month value of the calendar.
    * Also changes the view to the daypicker.
@@ -251,40 +216,4 @@ export class ClrMonthpicker implements AfterViewInit {
   currentYear(): void {
     this._dateNavigationService.moveToCurrentMonth();
   }
-
-  /**
-   * Applicable only to date range picker
-   * Compares the month passed is in between the start and end date range
-   */
-  isInRange(monthIndex: number): boolean {
-    if (!this._dateNavigationService.isRangePicker) {
-      return false;
-    }
-    if (this._dateNavigationService.selectedDay && this._dateNavigationService.selectedEndDay) {
-      return (
-        (this.calendarYear === this._dateNavigationService.selectedDay.year &&
-          monthIndex > this._dateNavigationService.selectedDay.month &&
-          this.calendarYear === this._dateNavigationService.selectedEndDay.year &&
-          monthIndex < this._dateNavigationService.selectedEndDay.month) ||
-        (this._dateNavigationService.selectedDay.year !== this._dateNavigationService.selectedEndDay.year &&
-          this.calendarYear === this._dateNavigationService.selectedDay.year &&
-          monthIndex > this._dateNavigationService.selectedDay.month) ||
-        (this._dateNavigationService.selectedDay.year !== this._dateNavigationService.selectedEndDay.year &&
-          this.calendarYear === this._dateNavigationService.selectedEndDay.year &&
-          monthIndex < this._dateNavigationService.selectedEndDay.month) ||
-        (this.calendarYear > this._dateNavigationService.selectedDay.year &&
-          this.calendarYear < this._dateNavigationService.selectedEndDay.year)
-      );
-    } else if (this._dateNavigationService.selectedDay && !this._dateNavigationService.selectedEndDay) {
-      return (
-        (this.calendarYear === this._dateNavigationService.selectedDay.year &&
-          monthIndex > this._dateNavigationService.selectedDay.month &&
-          monthIndex < this._dateNavigationService.hoveredMonth) ||
-        (this.calendarYear > this._dateNavigationService.selectedDay.year &&
-          monthIndex < this._dateNavigationService.hoveredMonth)
-      );
-    } else {
-      return false;
-    }
-  }
 }
diff --git a/projects/angular/src/forms/datepicker/providers/date-io.service.ts b/projects/angular/src/forms/datepicker/providers/date-io.service.ts
index a04f90e37e..e6cd4320ff 100644
--- a/projects/angular/src/forms/datepicker/providers/date-io.service.ts
+++ b/projects/angular/src/forms/datepicker/providers/date-io.service.ts
@@ -7,7 +7,7 @@
 
 import { Injectable } from '@angular/core';
 
-import { DateRange, DateRangeOption } from '../interfaces/date-range.interface';
+import { DateRange } from '../interfaces/date-range.interface';
 import { DayModel } from '../model/day.model';
 import {
   BIG_ENDIAN,
@@ -33,10 +33,9 @@ export class DateIOService {
     minDate: new DayModel(0, 0, 1),
     maxDate: new DayModel(9999, 11, 31),
   };
-  isDateRangePicker = false;
+
   cldrLocaleDateFormat: string = DEFAULT_LOCALE_FORMAT;
 
-  private dateRangeOptions;
   private localeDisplayFormat: InputDateDisplayFormat = LITTLE_ENDIAN;
   private delimiters: [string, string] = ['/', '/'];
 
@@ -74,25 +73,6 @@ export class DateIOService {
     }
   }
 
-  setIsDateRangePicker(flag: boolean) {
-    this.isDateRangePicker = flag;
-  }
-
-  setRangeOptions(rangeOptions: DateRangeOption[]) {
-    let validatedRangeOption = this.validateDateRangeOptions(rangeOptions);
-    const hasCustomRangeOption = validatedRangeOption.findIndex(rangeOption => !!rangeOption.isCustomRange);
-    if (validatedRangeOption.length) {
-      if (hasCustomRangeOption === -1) {
-        validatedRangeOption = [...validatedRangeOption, { label: 'Custom Range', value: [], isCustomRange: true }];
-      }
-      this.dateRangeOptions = validatedRangeOption;
-    }
-  }
-
-  getRangeOptions() {
-    return this.dateRangeOptions;
-  }
-
   toLocaleDisplayFormatString(date: Date): string {
     if (date) {
       if (isNaN(date.getTime())) {
@@ -208,21 +188,4 @@ export class DateIOService {
     const result: number = parseToFourDigitYear(y);
     return result !== -1 ? new Date(result, m, d) : null;
   }
-
-  private validateDateRangeOptions(rangeOptions: DateRangeOption[]): DateRangeOption[] {
-    const validOptions = [];
-    rangeOptions?.forEach((rangeOption: DateRangeOption) => {
-      if (
-        !rangeOption.isCustomRange &&
-        (!rangeOption.value?.length ||
-          rangeOption.value?.length !== 2 ||
-          Object.prototype.toString.call(rangeOption?.value[0]) !== '[object Date]' ||
-          Object.prototype.toString.call(rangeOption?.value[1]) !== '[object Date]')
-      ) {
-        return;
-      }
-      validOptions.push(rangeOption);
-    });
-    return validOptions;
-  }
 }
diff --git a/projects/angular/src/forms/datepicker/providers/date-navigation.service.ts b/projects/angular/src/forms/datepicker/providers/date-navigation.service.ts
index 0b172d6a14..4e656eb13b 100644
--- a/projects/angular/src/forms/datepicker/providers/date-navigation.service.ts
+++ b/projects/angular/src/forms/datepicker/providers/date-navigation.service.ts
@@ -8,7 +8,6 @@
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { Subject } from 'rxjs';
-import { tap } from 'rxjs/operators';
 
 import { CalendarModel } from '../model/calendar.model';
 import { DayModel } from '../model/day.model';
@@ -22,18 +21,12 @@ import { DayModel } from '../model/day.model';
 @Injectable()
 export class DateNavigationService {
   selectedDay: DayModel;
-  selectedEndDay: DayModel;
   focusedDay: DayModel;
-  hoveredDay: DayModel;
-  hoveredMonth: number;
-  hoveredYear: number;
-  isRangePicker = false;
 
   private _displayedCalendar: CalendarModel;
   private _todaysFullDate: Date = new Date();
   private _today: DayModel;
   private _selectedDayChange = new Subject<DayModel>();
-  private _selectedEndDayChange = new Subject<DayModel>();
   private _displayedCalendarChange = new Subject<void>();
   private _focusOnCalendarChange = new Subject<void>();
   private _focusedDayChange = new Subject<DayModel>();
@@ -50,10 +43,6 @@ export class DateNavigationService {
     return this._selectedDayChange.asObservable();
   }
 
-  get selectedEndDayChange(): Observable<DayModel> {
-    return this._selectedEndDayChange.asObservable();
-  }
-
   /**
    * This observable lets the subscriber know that the displayed calendar has changed.
    */
@@ -72,7 +61,7 @@ export class DateNavigationService {
    * This observable lets the subscriber know that the focused day in the displayed calendar has changed.
    */
   get focusedDayChange(): Observable<DayModel> {
-    return this._focusedDayChange.asObservable().pipe(tap((day: DayModel) => (this.focusedDay = day)));
+    return this._focusedDayChange.asObservable();
   }
 
   /**
@@ -80,23 +69,8 @@ export class DateNavigationService {
    * Note: Only to be called from day.ts
    */
   notifySelectedDayChanged(dayModel: DayModel) {
-    if (this.isRangePicker) {
-      if (
-        !this.selectedDay ||
-        (!!this.selectedDay && !!this.selectedEndDay) ||
-        (!!this.selectedDay && dayModel?.isBefore(this.selectedDay))
-      ) {
-        if (this.selectedEndDay) {
-          this.hoveredDay = this.hoveredMonth = this.hoveredYear = undefined;
-          this.setSelectedEndDay(undefined);
-        }
-        this.setSelectedDay(dayModel);
-      } else {
-        this.setSelectedEndDay(dayModel);
-      }
-    } else {
-      this.setSelectedDay(dayModel);
-    }
+    this.selectedDay = dayModel;
+    this._selectedDayChange.next(dayModel);
   }
 
   /**
@@ -168,35 +142,6 @@ export class DateNavigationService {
     this._focusOnCalendarChange.next();
   }
 
-  setSelectedDay(dayModel: DayModel | undefined): void {
-    this.selectedDay = dayModel;
-    this.updateDisplayedCalendarOnDaySelection(dayModel);
-    this._selectedDayChange.next(dayModel);
-  }
-
-  setSelectedEndDay(dayModel: DayModel | undefined): void {
-    this.selectedEndDay = dayModel;
-    this.updateDisplayedCalendarOnDaySelection(dayModel);
-    this._selectedEndDayChange.next(dayModel);
-  }
-
-  updateDisplayedCalendarOnDaySelection(day: DayModel | undefined): void {
-    if (day && this._displayedCalendar && !this._displayedCalendar.isDayInCalendar(day)) {
-      this.setDisplayedCalendar(new CalendarModel(day.year, day.month));
-    }
-  }
-
-  validateDateRange() {
-    if (!this.selectedDay || !this.selectedEndDay) {
-      if (this.selectedDay) {
-        this.setSelectedDay(undefined);
-      }
-      if (this.selectedEndDay) {
-        this.setSelectedEndDay(undefined);
-      }
-    }
-  }
-
   // not a setter because i want this to remain private
   private setDisplayedCalendar(value: CalendarModel) {
     if (!this._displayedCalendar.isEqual(value)) {
diff --git a/projects/angular/src/forms/datepicker/providers/datepicker-helper.service.ts b/projects/angular/src/forms/datepicker/providers/datepicker-helper.service.ts
deleted file mode 100644
index fca8005de7..0000000000
--- a/projects/angular/src/forms/datepicker/providers/datepicker-helper.service.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-/*
- * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-
-import { Injectable } from '@angular/core';
-
-import { ClrPopoverToggleService } from '../../../utils/popover/providers/popover-toggle.service';
-import { DayModel } from '../model/day.model';
-import { DateFormControlService } from './date-form-control.service';
-import { DateIOService } from './date-io.service';
-import { DateNavigationService } from './date-navigation.service';
-import { ViewManagerService } from './view-manager.service';
-
-@Injectable()
-export class DatePickerHelperService {
-  disabled: boolean;
-
-  constructor(
-    private _dateNavigationService: DateNavigationService,
-    private _dateIOService: DateIOService,
-    private _toggleService: ClrPopoverToggleService,
-    private _viewManagerService: ViewManagerService,
-    private _dateFormControlService: DateFormControlService
-  ) {}
-
-  selectDay(day: DayModel): void {
-    this.updateSelectedDate(day);
-  }
-
-  updateSelectedDate(day: DayModel): void {
-    this._dateNavigationService.notifySelectedDayChanged(day);
-    this._dateFormControlService.markAsDirty();
-    this.toggleDatepickerVisibility();
-    this._dateNavigationService.hoveredDay = undefined;
-  }
-
-  toggleDatepickerVisibility(): void {
-    if (
-      this._dateNavigationService.isRangePicker &&
-      !!this._dateNavigationService.selectedDay &&
-      !!this._dateNavigationService.selectedEndDay
-    ) {
-      this._toggleService.open = false;
-    } else if (!this._dateNavigationService.isRangePicker && !!this._dateNavigationService.selectedDay) {
-      this._toggleService.open = false;
-    }
-  }
-
-  convertDateToDayModel(date: Date): DayModel {
-    return new DayModel(date.getFullYear(), date.getMonth(), date.getDate());
-  }
-
-  convertStringDateToDayModel(year: number, month: number, day: number): DayModel {
-    return new DayModel(year, month, day);
-  }
-}
diff --git a/projects/angular/src/forms/datepicker/utils/test-utils.ts b/projects/angular/src/forms/datepicker/utils/test-utils.ts
index 1d02f26370..a377df86f8 100644
--- a/projects/angular/src/forms/datepicker/utils/test-utils.ts
+++ b/projects/angular/src/forms/datepicker/utils/test-utils.ts
@@ -6,13 +6,9 @@
  */
 
 export function assertEqualDates(date1: Date, date2: Date): boolean {
-  if (date1 instanceof Date && date2 instanceof Date) {
-    return (
-      date1.getFullYear() === date2.getFullYear() &&
-      date1.getMonth() === date2.getMonth() &&
-      date1.getDate() === date2.getDate()
-    );
-  } else {
-    return false;
-  }
+  return (
+    date1.getFullYear() === date2.getFullYear() &&
+    date1.getMonth() === date2.getMonth() &&
+    date1.getDate() === date2.getDate()
+  );
 }
diff --git a/projects/angular/src/forms/datepicker/yearpicker.spec.ts b/projects/angular/src/forms/datepicker/yearpicker.spec.ts
index 242d4ae265..53f2374272 100644
--- a/projects/angular/src/forms/datepicker/yearpicker.spec.ts
+++ b/projects/angular/src/forms/datepicker/yearpicker.spec.ts
@@ -12,11 +12,8 @@ import { TestContext } from '../../data/datagrid/helpers.spec';
 import { Keys } from '../../utils/enums/keys.enum';
 import { ClrCommonStringsService } from '../../utils/i18n/common-strings.service';
 import { ClrPopoverToggleService } from '../../utils/popover/providers/popover-toggle.service';
-import { DateFormControlService } from './providers/date-form-control.service';
-import { DateIOService } from './providers/date-io.service';
 import { DateNavigationService } from './providers/date-navigation.service';
 import { DatepickerFocusService } from './providers/datepicker-focus.service';
-import { DatePickerHelperService } from './providers/datepicker-helper.service';
 import { LocaleHelperService } from './providers/locale-helper.service';
 import { ViewManagerService } from './providers/view-manager.service';
 import { ClrYearpicker } from './yearpicker';
@@ -44,9 +41,6 @@ export default function () {
           { provide: DateNavigationService, useValue: dateNavigationService },
           LocaleHelperService,
           ClrCommonStringsService,
-          DatePickerHelperService,
-          DateIOService,
-          DateFormControlService,
         ]);
       });
 
@@ -183,9 +177,6 @@ export default function () {
           { provide: DateNavigationService, useValue: dateNavigationService },
           LocaleHelperService,
           ClrCommonStringsService,
-          DatePickerHelperService,
-          DateIOService,
-          DateFormControlService,
         ]);
       });
 
@@ -260,7 +251,7 @@ export default function () {
         context.clarityDirective.changeYear(2015);
 
         expect(viewManagerService.isYearView).toBe(false);
-        expect(viewManagerService.isMonthView).toBe(true);
+        expect(viewManagerService.isDayView).toBe(true);
       });
 
       it('updates year value in the date navigation service', () => {
@@ -292,9 +283,6 @@ export default function () {
           { provide: DateNavigationService, useValue: dateNavigationService },
           LocaleHelperService,
           ClrCommonStringsService,
-          DatePickerHelperService,
-          DateIOService,
-          DateFormControlService,
         ]);
       }
 
diff --git a/projects/angular/src/forms/datepicker/yearpicker.ts b/projects/angular/src/forms/datepicker/yearpicker.ts
index 1cbf1397d2..d42ca82d05 100644
--- a/projects/angular/src/forms/datepicker/yearpicker.ts
+++ b/projects/angular/src/forms/datepicker/yearpicker.ts
@@ -50,13 +50,9 @@ import { ViewManagerService } from './providers/view-manager.service';
         type="button"
         class="calendar-btn year"
         [attr.tabindex]="getTabIndex(year)"
-        [class.is-selected]="year === calendarYear || year === calendarEndYear"
-        [class.is-start-range]="getIsRangeStartYear(year)"
-        [class.is-end-range]="getIsRangeEndYear(year)"
-        [class.in-range]="isInRange(year)"
+        [class.is-selected]="year === calendarYear"
         [class.is-today]="year === currentCalendarYear"
         (click)="changeYear(year)"
-        (mouseenter)="onHover(year)"
       >
         {{ year }}
       </button>
@@ -98,25 +94,10 @@ export class ClrYearpicker implements AfterViewInit {
       : this._dateNavigationService.displayedCalendar.year;
   }
 
-  /**
-   * Gets the year which the user is currently on.
-   */
-  get calendarEndYear(): number {
-    return this._dateNavigationService.selectedEndDay?.year;
-  }
-
   get currentCalendarYear(): number {
     return new Date().getFullYear();
   }
 
-  getIsRangeStartYear(year: number): boolean {
-    return this._dateNavigationService.isRangePicker && year === this._dateNavigationService.selectedDay?.year;
-  }
-
-  getIsRangeEndYear(year: number): boolean {
-    return this._dateNavigationService.isRangePicker && year === this._dateNavigationService.selectedEndDay?.year;
-  }
-
   /**
    * Focuses on the current calendar year when the View is initialized.
    */
@@ -156,14 +137,7 @@ export class ClrYearpicker implements AfterViewInit {
    */
   changeYear(year: number): void {
     this._dateNavigationService.changeYear(year);
-    this._viewManagerService.changeToMonthView();
-  }
-
-  /**
-   * Calls the DateNavigationService to update the hovered year value of the calendar
-   */
-  onHover(year: number): void {
-    this._dateNavigationService.hoveredYear = year;
+    this._viewManagerService.changeToDayView();
   }
 
   /**
@@ -201,8 +175,6 @@ export class ClrYearpicker implements AfterViewInit {
     if (!this.yearRangeModel.inRange(this._focusedYear)) {
       if (this.yearRangeModel.inRange(this.calendarYear)) {
         this._focusedYear = this.calendarYear;
-      } else if (this.yearRangeModel.inRange(this.calendarEndYear)) {
-        this._focusedYear = this.calendarEndYear;
       } else {
         this._focusedYear = this.yearRangeModel.middleYear;
       }
@@ -210,22 +182,6 @@ export class ClrYearpicker implements AfterViewInit {
     return this._focusedYear === year ? 0 : -1;
   }
 
-  /**
-   * Applicable only to date range picker
-   * Compares the year passed is in between the start and end date range
-   */
-  isInRange(year: number): boolean {
-    if (!this._dateNavigationService.isRangePicker) {
-      return false;
-    }
-    if (this._dateNavigationService.selectedDay?.year && this.calendarEndYear) {
-      return year > this.calendarYear && year < this.calendarEndYear;
-    } else if (this._dateNavigationService.selectedDay?.year && !this.calendarEndYear) {
-      return year > this.calendarYear && year < this._dateNavigationService.hoveredYear;
-    } else {
-      return false;
-    }
-  }
   /**
    * Increments the focus year by the value passed. Updates the YearRangeModel if the
    * new value is not in the current decade.
diff --git a/projects/angular/src/forms/tests/container.spec.ts b/projects/angular/src/forms/tests/container.spec.ts
index 7db19df82c..0530f5b067 100644
--- a/projects/angular/src/forms/tests/container.spec.ts
+++ b/projects/angular/src/forms/tests/container.spec.ts
@@ -221,15 +221,14 @@ function fullSpec(description, testContainer, directives: any | any[], testCompo
       test.disabled = true;
       fixture.detectChanges();
       // Have to wait for the whole control to settle or it doesn't track
-
       await fixture.whenStable();
       expect(containerEl.className).not.toContain('clr-form-control-disabled');
       if (test.form) {
         // Handle setting disabled based on reactive form
         test.form.get('model').reset({ value: '', disabled: true });
-        fixture.detectChanges();
-        expect(containerEl.className).toContain('clr-form-control-disabled', containerEl.className);
       }
+      fixture.detectChanges();
+      expect(containerEl.className).toContain('clr-form-control-disabled');
     });
 
     it('implements ngOnDestroy', () => {
diff --git a/projects/demo/src/app/datepicker/datepicker.demo.html b/projects/demo/src/app/datepicker/datepicker.demo.html
index bb7231ab57..78a2c03f8c 100644
--- a/projects/demo/src/app/datepicker/datepicker.demo.html
+++ b/projects/demo/src/app/datepicker/datepicker.demo.html
@@ -23,12 +23,6 @@ <h2>Datepicker</h2>
     <li><a [routerLink]="['./reactive-forms']">Reactive Forms</a></li>
     <li><a [routerLink]="['./css-regression']">CSS Regression</a></li>
     <li><a [routerLink]="['./locale-data']">Locale Data</a></li>
-    <li>
-      <a [routerLink]="['./date-range-picker']"
-        >Date Range Picker
-        <span class="badge badge-success"> New </span>
-      </a>
-    </li>
   </div>
 </div>
 <router-outlet></router-outlet>
diff --git a/projects/demo/src/app/datepicker/datepicker.demo.module.ts b/projects/demo/src/app/datepicker/datepicker.demo.module.ts
index a93be4dc95..9548137ed8 100644
--- a/projects/demo/src/app/datepicker/datepicker.demo.module.ts
+++ b/projects/demo/src/app/datepicker/datepicker.demo.module.ts
@@ -25,7 +25,6 @@ import { DatepickerLocaleData } from './datepicker-locale-data';
 import { DatepickerMinMaxDemo } from './datepicker-min-max';
 import { DatepickerDemo } from './datepicker.demo';
 import { ROUTING } from './datepicker.demo.routing';
-import { DateRangePickerDemo } from './daterangepicker';
 import { DisabledDemo } from './disabled';
 import { DatepickerLayoutDemo } from './layout';
 import { NgModelAutoWrappedDatepickerDemo } from './ngmodel-auto-wrapped';
@@ -52,7 +51,6 @@ import { NgModelExplicitWrapperDemo } from './ngmodel-wrapper-explicit-wrapper';
     DisabledDemo,
     DatepickerLayoutDemo,
     DatepickerMinMaxDemo,
-    DateRangePickerDemo,
   ],
   exports: [
     DatepickerDemo,
@@ -73,7 +71,6 @@ import { NgModelExplicitWrapperDemo } from './ngmodel-wrapper-explicit-wrapper';
     DisabledDemo,
     DatepickerLayoutDemo,
     DatepickerMinMaxDemo,
-    DateRangePickerDemo,
   ],
 })
 export class DatepickerDemoModule {}
diff --git a/projects/demo/src/app/datepicker/datepicker.demo.routing.ts b/projects/demo/src/app/datepicker/datepicker.demo.routing.ts
index a8a6fa3290..490a65a9a8 100644
--- a/projects/demo/src/app/datepicker/datepicker.demo.routing.ts
+++ b/projects/demo/src/app/datepicker/datepicker.demo.routing.ts
@@ -22,7 +22,6 @@ import { DatepickerKKJDemo } from './datepicker-KKJ';
 import { DatepickerLocaleData } from './datepicker-locale-data';
 import { DatepickerMinMaxDemo } from './datepicker-min-max';
 import { DatepickerDemo } from './datepicker.demo';
-import { DateRangePickerDemo } from './daterangepicker';
 import { DisabledDemo } from './disabled';
 import { DatepickerLayoutDemo } from './layout';
 import { NgModelAutoWrappedDatepickerDemo } from './ngmodel-auto-wrapped';
@@ -44,7 +43,6 @@ const ROUTES: Routes = [
       { path: 'disabled', component: DisabledDemo },
       { path: 'layout', component: DatepickerLayoutDemo },
       { path: 'datepicker-min-max', component: DatepickerMinMaxDemo },
-      { path: 'date-range-picker', component: DateRangePickerDemo },
       {
         path: 'locale-data',
         component: DatepickerLocaleData,
diff --git a/projects/demo/src/app/datepicker/datepicker.demo.scss b/projects/demo/src/app/datepicker/datepicker.demo.scss
index 43779f03bf..03a3744afa 100644
--- a/projects/demo/src/app/datepicker/datepicker.demo.scss
+++ b/projects/demo/src/app/datepicker/datepicker.demo.scss
@@ -22,59 +22,3 @@
 .clr-example-input {
   display: inline-block;
 }
-
-.date-range-section {
-  margin: 0 20px;
-  .flex-section {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    margin-bottom: 20px;
-  }
-  .card {
-    flex-basis: 47%;
-    margin: 25px 15px;
-    display: flex;
-    flex-wrap: wrap;
-    &::before {
-      content: attr(data-heading);
-      position: absolute;
-      top: -12px;
-      left: 12px;
-      background: var(--clr-global-app-background);
-      padding: 0 10px;
-      border: 0;
-      font-weight: 400;
-      font-size: 18px;
-    }
-  }
-  .clr-form-control {
-    margin: 0 !important;
-  }
-  .clr-form-horizontal .clr-form-control > .clr-control-label {
-    width: unset;
-  }
-  .card-content {
-    padding: 35px var(--cds-global-space-7);
-    display: flex;
-    justify-content: center;
-    width: 100%;
-    &::after {
-      margin-bottom: 6px;
-      display: block;
-      content: '';
-    }
-  }
-
-  .card-validations {
-    position: relative;
-    padding: var(--cds-global-space-7);
-    border-top: var(--clr-card-border-width) solid var(--clr-card-border-color);
-    width: 100%;
-
-    .form-input-wrapper {
-      display: flex;
-      justify-content: space-evenly;
-    }
-  }
-}
diff --git a/projects/demo/src/app/datepicker/daterangepicker.html b/projects/demo/src/app/datepicker/daterangepicker.html
deleted file mode 100644
index 2199c516af..0000000000
--- a/projects/demo/src/app/datepicker/daterangepicker.html
+++ /dev/null
@@ -1,113 +0,0 @@
-<!--
-  ~ Copyright (c) 2016-2023 VMware, Inc. All Rights Reserved.
-  ~ This software is released under MIT license.
-  ~ The full license information can be found in LICENSE in the root directory of this project.
-  -->
-
-<h2>Date Range Picker</h2>
-
-<form clrForm [formGroup]="dateForm" novalidate>
-  <section class="date-range-section">
-    <div class="flex-section">
-      <!-- Variant 1 -->
-      <div class="card" data-heading="Default">
-        <div class="card-content">
-          <ng-container
-            *ngTemplateOutlet="daterange; context: { startDtFc: 'startDateV1', endDtFc: 'endDateV1', minDateFc: 'minDateV1', maxDateFc: 'maxDateV1' }"
-          ></ng-container>
-        </div>
-        <div class="card-validations">
-          <div class="form-input-wrapper clr-form-horizontal">
-            <ng-container
-              *ngTemplateOutlet="validators; context: { minDateFc: 'minDateV1', maxDateFc: 'maxDateV1' }"
-            ></ng-container>
-          </div>
-        </div>
-      </div>
-      <!-- Variant 2 -->
-      <div class="card" data-heading="With Range Options">
-        <div class="card-content">
-          <ng-container
-            *ngTemplateOutlet="daterange; context: { rangeOptions: dateRangeOptions, startDtFc: 'startDateWithOptionV1', endDtFc: 'endDateWithOptionV1', minDateFc: 'minDateWithOptionV1', maxDateFc: 'maxDateWithOptionV1' }"
-          ></ng-container>
-        </div>
-        <div class="card-validations">
-          <div class="form-input-wrapper clr-form-horizontal">
-            <ng-container
-              *ngTemplateOutlet="validators; context: { minDateFc: 'minDateWithOptionV1', maxDateFc: 'maxDateWithOptionV1' }"
-            ></ng-container>
-          </div>
-        </div>
-      </div>
-    </div>
-  </section>
-</form>
-<ng-template #validators let-minDateFc="minDateFc" let-maxDateFc="maxDateFc">
-  <ng-container [formGroup]="dateForm">
-    <clr-input-container>
-      <label>Min Date</label>
-      <input type="text" placeholder="yyyy-mm-dd" [formControlName]="minDateFc" clrInput />
-    </clr-input-container>
-
-    <clr-input-container>
-      <label>Max Date</label>
-      <input type="text" placeholder="yyyy-mm-dd" clrInput [formControlName]="maxDateFc" />
-    </clr-input-container>
-  </ng-container>
-</ng-template>
-
-<ng-template
-  #daterange
-  let-minDateFc="minDateFc"
-  let-maxDateFc="maxDateFc"
-  let-startDtFc="startDtFc"
-  let-rangeOptions="rangeOptions"
-  let-endDtFc="endDtFc"
->
-  <ng-container [formGroup]="dateForm">
-    <clr-date-range-container
-      [min]="dateForm.get(minDateFc).value"
-      [max]="dateForm.get(maxDateFc).value"
-      [rangeOptions]="rangeOptions"
-    >
-      <!-- <label for="dateRangeCtrl">Range Picker</label> -->
-      <input
-        [id]="startDtFc"
-        aria-labelledby="dateRangeCtrl"
-        name="startDate"
-        type="date"
-        [inputWidth]="14"
-        clrRangeStartDate
-        (clrRangeStartDateChange)="stDateChanged($event)"
-        [formControlName]="startDtFc"
-      />
-      <input
-        [id]="endDtFc"
-        aria-labelledby="dateRangeCtrl"
-        name="endDate"
-        [inputWidth]="14"
-        type="date"
-        clrRangeEndDate
-        (clrRangeEndDateChange)="endDateChanged($event)"
-        [formControlName]="endDtFc"
-      />
-      <clr-control-error *clrIfError="'min'">
-        <ng-container *ngIf="dateForm.get(startDtFc).errors?.min?.min || dateForm.get(endDtFc).errors?.min?.min">
-          Minimum date should be {{dateForm.get(startDtFc).errors?.min?.min || dateForm.get(endDtFc).errors?.min?.min}}
-        </ng-container>
-      </clr-control-error>
-      <clr-control-error *clrIfError="'max'">
-        <ng-container *ngIf="dateForm.get(startDtFc).errors?.max?.max || dateForm.get(endDtFc).errors?.max?.max">
-          Maximum date should be {{dateForm.get(startDtFc).errors?.max?.max || dateForm.get(endDtFc).errors?.max?.max}}
-        </ng-container>
-      </clr-control-error>
-      <clr-control-error *clrIfError="'range'">
-        <ng-container
-          *ngIf="dateForm.get(startDtFc).errors?.range?.range || dateForm.get(endDtFc).errors?.range?.range"
-        >
-          Start date must be less than End date
-        </ng-container>
-      </clr-control-error>
-    </clr-date-range-container>
-  </ng-container>
-</ng-template>
diff --git a/projects/demo/src/app/datepicker/daterangepicker.ts b/projects/demo/src/app/datepicker/daterangepicker.ts
deleted file mode 100644
index a9b2464dec..0000000000
--- a/projects/demo/src/app/datepicker/daterangepicker.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-/*
- * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
- * This software is released under MIT license.
- * The full license information can be found in LICENSE in the root directory of this project.
- */
-
-import { Component, OnInit } from '@angular/core';
-import { FormControl, FormGroup } from '@angular/forms';
-
-@Component({
-  selector: 'clr-daterangepicker-demo',
-  styleUrls: ['./datepicker.demo.scss'],
-  templateUrl: './daterangepicker.html',
-})
-export class DateRangePickerDemo implements OnInit {
-  dateForm = new FormGroup({
-    startDateV1: new FormControl(),
-    endDateV1: new FormControl(),
-    minDateV1: new FormControl('2024-02-01'),
-    maxDateV1: new FormControl('2024-12-31'),
-
-    startDateWithOptionV1: new FormControl(),
-    endDateWithOptionV1: new FormControl(),
-    minDateWithOptionV1: new FormControl('2024-02-01'),
-    maxDateWithOptionV1: new FormControl('2024-12-31'),
-  });
-
-  dateRangeOptions = [
-    { label: 'Today', value: [new Date(), new Date()] },
-    { label: 'Last 7 Days', value: [this.addDays(new Date(), -7), new Date()] },
-    { label: 'Last 14 Days', value: [this.addDays(new Date(), -14), new Date()] },
-    { label: 'Last 30 Days', value: [this.addDays(new Date(), -30), new Date()] },
-    { label: 'Last 90 Days', value: [this.addDays(new Date(), -90), new Date()] },
-  ];
-
-  monthRangeOptions = [
-    {
-      label: 'This Month',
-      value: [
-        new Date(new Date().getFullYear(), new Date().getMonth(), 1),
-        new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0),
-      ],
-    },
-    {
-      label: 'Last Month',
-      value: [
-        new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1),
-        new Date(new Date().getFullYear(), new Date().getMonth(), 0),
-      ],
-    },
-    {
-      label: 'Last 2 Months',
-      value: [
-        new Date(new Date().getFullYear(), new Date().getMonth() - 2, 1),
-        new Date(new Date().getFullYear(), new Date().getMonth(), 0),
-      ],
-    },
-    {
-      label: 'Last 6 Months',
-      value: [
-        new Date(new Date().getFullYear(), new Date().getMonth() - 6, 1),
-        new Date(new Date().getFullYear(), new Date().getMonth(), 0),
-      ],
-    },
-    {
-      label: 'Last 12 Months',
-      value: [
-        new Date(new Date().getFullYear(), new Date().getMonth() - 12, 1),
-        new Date(new Date().getFullYear(), new Date().getMonth(), 0),
-      ],
-    },
-    { label: 'Custom Range', value: [], isCustomRange: true },
-  ];
-
-  yearRangeOptions = [
-    {
-      label: 'This year',
-      value: [new Date(new Date().getFullYear(), 1, 1), new Date(new Date().getFullYear() + 1, 0, 0)],
-    },
-    {
-      label: 'Last year',
-      value: [new Date(new Date().getFullYear() - 1, 1, 1), new Date(new Date().getFullYear(), 0, 0)],
-    },
-    {
-      label: 'Last 2 Years',
-      value: [new Date(new Date().getFullYear() - 2, 1, 1), new Date(new Date().getFullYear(), 0, 0)],
-    },
-    {
-      label: 'Last 5 Years',
-      value: [new Date(new Date().getFullYear() - 5, 1, 1), new Date(new Date().getFullYear(), 0, 0)],
-    },
-    { label: 'Custom Range', value: [], isCustomRange: true },
-  ];
-
-  ngOnInit(): void {
-    this.dateForm.get('startDateV1').statusChanges.subscribe(status => {
-      console.log('🚀 ~ DateRangePickerDemo ~ startDateV1 ~ status:', status);
-    });
-    this.dateForm.get('endDateV1').statusChanges.subscribe(status => {
-      console.log('🚀 ~ DateRangePickerDemo ~ endDateV1 ~ status:', status);
-    });
-  }
-  stDateChanged(date: Date) {
-    console.log(date);
-  }
-
-  endDateChanged(date: Date) {
-    console.log(date);
-  }
-
-  addDays(date = new Date(), days) {
-    return new Date(date.getTime() + 86400000 * days);
-  }
-}
diff --git a/tests/snapshots/chromium/datepicker/daterangepicker--date-range-picker-core-dark.png b/tests/snapshots/chromium/datepicker/daterangepicker--date-range-picker-core-dark.png
deleted file mode 100644
index 48903561c0..0000000000
Binary files a/tests/snapshots/chromium/datepicker/daterangepicker--date-range-picker-core-dark.png and /dev/null differ
diff --git a/tests/snapshots/chromium/datepicker/daterangepicker--date-range-picker-core-light.png b/tests/snapshots/chromium/datepicker/daterangepicker--date-range-picker-core-light.png
deleted file mode 100644
index 25ba9f0ace..0000000000
Binary files a/tests/snapshots/chromium/datepicker/daterangepicker--date-range-picker-core-light.png and /dev/null differ
diff --git a/tests/snapshots/chromium/datepicker/daterangepicker--default-date-core-dark.png b/tests/snapshots/chromium/datepicker/daterangepicker--default-date-core-dark.png
deleted file mode 100644
index d8ee08f31e..0000000000
Binary files a/tests/snapshots/chromium/datepicker/daterangepicker--default-date-core-dark.png and /dev/null differ
diff --git a/tests/snapshots/chromium/datepicker/daterangepicker--default-date-core-light.png b/tests/snapshots/chromium/datepicker/daterangepicker--default-date-core-light.png
deleted file mode 100644
index 88163befc7..0000000000
Binary files a/tests/snapshots/chromium/datepicker/daterangepicker--default-date-core-light.png and /dev/null differ
diff --git a/tests/snapshots/chromium/datepicker/daterangepicker--disabled-core-dark.png b/tests/snapshots/chromium/datepicker/daterangepicker--disabled-core-dark.png
deleted file mode 100644
index c32b9387f2..0000000000
Binary files a/tests/snapshots/chromium/datepicker/daterangepicker--disabled-core-dark.png and /dev/null differ
diff --git a/tests/snapshots/chromium/datepicker/daterangepicker--disabled-core-light.png b/tests/snapshots/chromium/datepicker/daterangepicker--disabled-core-light.png
deleted file mode 100644
index 9754d2114e..0000000000
Binary files a/tests/snapshots/chromium/datepicker/daterangepicker--disabled-core-light.png and /dev/null differ
diff --git a/tests/snapshots/chromium/datepicker/daterangepicker--max-date-core-dark.png b/tests/snapshots/chromium/datepicker/daterangepicker--max-date-core-dark.png
deleted file mode 100644
index 48903561c0..0000000000
Binary files a/tests/snapshots/chromium/datepicker/daterangepicker--max-date-core-dark.png and /dev/null differ
diff --git a/tests/snapshots/chromium/datepicker/daterangepicker--max-date-core-light.png b/tests/snapshots/chromium/datepicker/daterangepicker--max-date-core-light.png
deleted file mode 100644
index 25ba9f0ace..0000000000
Binary files a/tests/snapshots/chromium/datepicker/daterangepicker--max-date-core-light.png and /dev/null differ
diff --git a/tests/snapshots/chromium/datepicker/daterangepicker--min-date-core-dark.png b/tests/snapshots/chromium/datepicker/daterangepicker--min-date-core-dark.png
deleted file mode 100644
index 48903561c0..0000000000
Binary files a/tests/snapshots/chromium/datepicker/daterangepicker--min-date-core-dark.png and /dev/null differ
diff --git a/tests/snapshots/chromium/datepicker/daterangepicker--min-date-core-light.png b/tests/snapshots/chromium/datepicker/daterangepicker--min-date-core-light.png
deleted file mode 100644
index 25ba9f0ace..0000000000
Binary files a/tests/snapshots/chromium/datepicker/daterangepicker--min-date-core-light.png and /dev/null differ
diff --git a/tests/snapshots/firefox/datepicker/daterangepicker--date-range-picker-core-dark.png b/tests/snapshots/firefox/datepicker/daterangepicker--date-range-picker-core-dark.png
deleted file mode 100644
index 80e4b045ce..0000000000
Binary files a/tests/snapshots/firefox/datepicker/daterangepicker--date-range-picker-core-dark.png and /dev/null differ
diff --git a/tests/snapshots/firefox/datepicker/daterangepicker--date-range-picker-core-light.png b/tests/snapshots/firefox/datepicker/daterangepicker--date-range-picker-core-light.png
deleted file mode 100644
index c3076a9151..0000000000
Binary files a/tests/snapshots/firefox/datepicker/daterangepicker--date-range-picker-core-light.png and /dev/null differ
diff --git a/tests/snapshots/firefox/datepicker/daterangepicker--default-date-core-dark.png b/tests/snapshots/firefox/datepicker/daterangepicker--default-date-core-dark.png
deleted file mode 100644
index 07741b3757..0000000000
Binary files a/tests/snapshots/firefox/datepicker/daterangepicker--default-date-core-dark.png and /dev/null differ
diff --git a/tests/snapshots/firefox/datepicker/daterangepicker--default-date-core-light.png b/tests/snapshots/firefox/datepicker/daterangepicker--default-date-core-light.png
deleted file mode 100644
index 176fd51df4..0000000000
Binary files a/tests/snapshots/firefox/datepicker/daterangepicker--default-date-core-light.png and /dev/null differ
diff --git a/tests/snapshots/firefox/datepicker/daterangepicker--disabled-core-dark.png b/tests/snapshots/firefox/datepicker/daterangepicker--disabled-core-dark.png
deleted file mode 100644
index 219884d553..0000000000
Binary files a/tests/snapshots/firefox/datepicker/daterangepicker--disabled-core-dark.png and /dev/null differ
diff --git a/tests/snapshots/firefox/datepicker/daterangepicker--disabled-core-light.png b/tests/snapshots/firefox/datepicker/daterangepicker--disabled-core-light.png
deleted file mode 100644
index f7d348fa42..0000000000
Binary files a/tests/snapshots/firefox/datepicker/daterangepicker--disabled-core-light.png and /dev/null differ
diff --git a/tests/snapshots/firefox/datepicker/daterangepicker--max-date-core-dark.png b/tests/snapshots/firefox/datepicker/daterangepicker--max-date-core-dark.png
deleted file mode 100644
index 80e4b045ce..0000000000
Binary files a/tests/snapshots/firefox/datepicker/daterangepicker--max-date-core-dark.png and /dev/null differ
diff --git a/tests/snapshots/firefox/datepicker/daterangepicker--max-date-core-light.png b/tests/snapshots/firefox/datepicker/daterangepicker--max-date-core-light.png
deleted file mode 100644
index c3076a9151..0000000000
Binary files a/tests/snapshots/firefox/datepicker/daterangepicker--max-date-core-light.png and /dev/null differ
diff --git a/tests/snapshots/firefox/datepicker/daterangepicker--min-date-core-dark.png b/tests/snapshots/firefox/datepicker/daterangepicker--min-date-core-dark.png
deleted file mode 100644
index 80e4b045ce..0000000000
Binary files a/tests/snapshots/firefox/datepicker/daterangepicker--min-date-core-dark.png and /dev/null differ
diff --git a/tests/snapshots/firefox/datepicker/daterangepicker--min-date-core-light.png b/tests/snapshots/firefox/datepicker/daterangepicker--min-date-core-light.png
deleted file mode 100644
index c3076a9151..0000000000
Binary files a/tests/snapshots/firefox/datepicker/daterangepicker--min-date-core-light.png and /dev/null differ