UI Datepicker Quick Fixes - Remove Dates + Datepicker Start Month

libs/shared/filter/src/lib/inputs/datepicker-range-input/datepicker-range-input.component.ts

@@ -71,10 +71,6 @@ export class DatepickerRangeInputComponent {
         const startDate = this.datepicker?.value?.[0];
         const stopDate = this.datepicker?.value?.[1];
 
-        if (!startDate && !stopDate) {
-          return;
-        }
-
         const start = startDate?.toISOString();
         const stop = stopDate?.toISOString();
 

libs/ui/datepicker/src/lib/range-datepicker.component.spec.ts

@@ -1,5 +1,4 @@
 import { createComponentFactory, Spectator } from '@ngneat/spectator/jest';
-import { SimpleChanges } from '@angular/core';
 import { RangeDatepickerComponent } from './range-datepicker.component';
 
 describe('RangeDatepickerComponent', () => {
@@ -14,70 +13,39 @@ describe('RangeDatepickerComponent', () => {
     expect(spectator.component).toBeTruthy();
   });
 
-  it('should set the default displayed date from provided value on first change', () => {
+  it('should set the default displayed date from provided value', () => {
     const testDate = new Date(2021, 0, 1);
-    // Override the inherited value() method to return a specific date array.
+    // Provide input value
     spectator.setInput('value', [testDate]);
     const spySet = jest.spyOn(
       spectator.component.viewState.displayedDate,
       'set',
     );
-    const changes: SimpleChanges = {
-      value: {
-        previousValue: undefined,
-        currentValue: [testDate],
-        firstChange: true,
-        isFirstChange: () => true,
-      },
-    };
 
-    spectator.component.ngOnChanges(changes);
+    // Trigger lifecycle hook
+    spectator.component.ngAfterViewInit();
+
     expect(spySet).toHaveBeenCalledWith(testDate);
   });
 
-  it('should default the displayed date to current date when value is undefined on first change', () => {
-    // Override value() to return undefined.
+  it('should default the displayed date to current date when value is undefined', () => {
+    // Provide undefined value
     spectator.setInput('value', undefined);
     const spySet = jest.spyOn(
       spectator.component.viewState.displayedDate,
       'set',
     );
-    const changes: SimpleChanges = {
-      value: {
-        previousValue: undefined,
-        currentValue: undefined,
-        firstChange: true,
-        isFirstChange: () => true,
-      },
-    };
 
-    spectator.component.ngOnChanges(changes);
+    // Trigger lifecycle hook
+    spectator.component.ngAfterViewInit();
+
     const result = spectator.component.setDefaultDisplayedMonthYear();
     const now = Date.now();
+
     // Check that the resulting date is close to the current date (within one second).
     expect(Math.abs(result.getTime() - now)).toBeLessThan(1000);
     expect(spySet).toHaveBeenCalled();
     const calledWith: Date = spySet.mock.calls[0][0];
     expect(Math.abs(calledWith.getTime() - now)).toBeLessThan(1000);
   });
-
-  it('should not change the displayed date if value is not a first change', () => {
-    // Even if value() returns a date array, no change should be applied on subsequent changes.
-    spectator.setInput('value', [new Date(2021, 0, 1)]);
-    const spySet = jest.spyOn(
-      spectator.component.viewState.displayedDate,
-      'set',
-    );
-    const changes: SimpleChanges = {
-      value: {
-        previousValue: [new Date(2020, 0, 1)],
-        currentValue: [new Date(2021, 0, 1)],
-        firstChange: false,
-        isFirstChange: () => false,
-      },
-    };
-
-    spectator.component.ngOnChanges(changes);
-    expect(spySet).not.toHaveBeenCalled();
-  });
 });

libs/ui/datepicker/src/lib/range-datepicker.component.ts

@@ -1,10 +1,9 @@
 import {
+  AfterViewInit,
   ChangeDetectionStrategy,
   Component,
   forwardRef,
   inject,
-  OnChanges,
-  SimpleChanges,
 } from '@angular/core';
 import { CalendarBodyComponent } from './body/calendar-body/calendar-body.component';
 import { SelectedRangeComponent } from './header/selected-range/selected-range.component';
@@ -50,7 +49,7 @@ import { RangeDatepicker } from './range-datepicker';
 })
 export class RangeDatepickerComponent
   extends RangeDatepicker
-  implements OnChanges
+  implements AfterViewInit
 {
   /**
    * The view state for the Datepicker, injected via Angular's dependency injection.
@@ -58,16 +57,13 @@ export class RangeDatepickerComponent
   viewState = inject(DatepickerViewState);
 
   /**
-   * Lifecycle hook that is called when any data-bound property of a directive changes.
-   * If the 'value' property is changed for the first time, it sets the default displayed
-   * date in the view state.
+   * Lifecycle hook that is called after the component's view has been fully initialized.
+   * Sets the default displayed date in the Datepicker view state based on the current value.
    *
-   * @param changes - An object of key/value pairs for the set of changed properties.
+   * @returns {void}
    */
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes['value']?.firstChange) {
-      this.viewState.displayedDate.set(this.setDefaultDisplayedMonthYear());
-    }
+  ngAfterViewInit(): void {
+    this.viewState.displayedDate.set(this.setDefaultDisplayedMonthYear());
   }
 
   /**