I have implemented the Flowbite date-range-picker in my UI, but I am unable to fetch the chosen dates from the input fields.

I have tried:

1. The change event: (change)=”onStartDateChange($event)”
2. Adding event listener on element using ViewChild/elementRef

Interestingly, the event listener using ViewChild/elementRef does work if the event is ‘click’ (but then it has wrong behavior), but does not work when the event is ‘change’

TS:

import { Component, Output, EventEmitter, AfterViewInit, ViewChild, ElementRef } from 

'@angular/core';
import { TranslateService } from '@ngx-translate/core';


@Component({
  selector: 'date-range-picker',
  templateUrl: './date-range-picker.component.html',
  styleUrls: ['./date-range-picker.component.scss'],
})
export class DateRangePickerComponent {
  startDate: Date | null = null;
  endDate: Date | null = null;

  @Output() dateRangeSelected = new EventEmitter<{ startDate: Date; endDate: Date; }>();

  @ViewChild('datepickerRangeStart', { static: false }) startDateInput!: ElementRef;
  @ViewChild('datepickerRangeEnd', { static: false }) endDateInput!: ElementRef;

  constructor(private translate: TranslateService) {}

  onStartDateChange(event: any): void {
    console.log('--- Start date change event:', event);
    this.startDate = event.target.value ? new Date(event.target.value) : null;
    this.emitDateRangeIfComplete();
  }

  onEndDateChange(event: any): void {
    console.log('--- End date change event:', event);
    this.endDate = event.target.value ? new Date(event.target.value) : null;
    this.emitDateRangeIfComplete();
  }

  // Emits only when both start and end date are chosen
  private emitDateRangeIfComplete(): void {
    if (this.startDate && this.endDate) {
      this.dateRangeSelected.emit({
        startDate: this.startDate,
        endDate: this.endDate,
      });
      console.log('-- Emit function runs');
    }
  }

  ngAfterViewInit() {
    this.startDateInput.nativeElement.addEventListener('change', (e: Event) => {
      const input = e.target as HTMLInputElement;
      console.log('Start date is: ' + input.value);
    });

    this.endDateInput.nativeElement.addEventListener('change', (e: Event) => {
      const input = e.target as HTMLInputElement;
      console.log('End date is: ' + input.value);
    });
  }
}

HTML:

<div id="date-range-picker" date-rangepicker>
  <div class="relative">
    <div
      class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none"
    >
      <i class="ci-Calendar_Days text-lg"></i>
    </div>
    <input
      #datepickerRangeStart
      id="datepicker-range-start"
      name="start"
      [(ngModel)]="startDate"
      (change)="onStartDateChange($event)"
      class="bg-gray-50 border text-gray-900 text-sm rounded-lg block ps-10 p-2.5 cursor-pointer"
      placeholder="{{ 'Select start date' | translate }}"
      autocomplete="off"
      readonly
    />
  </div>
  <span class="mx-2 text-gray-500">{{ "to" | translate }}</span>
  <div class="relative">
    <div
      class="absolute inset-y-0 start-0 flex items-center ps-3 pointer-events-none"
    >
      <i class="ci-Calendar_Days text-lg"></i>
    </div>
    <input
      #datepickerRangeEnd
      id="datepicker-range-end"
      name="end"
      [(ngModel)]="endDate"
      (change)="onEndDateChange($event)"
      class="bg-gray-50 border text-gray-900 text-sm rounded-lg block ps-10 p-2.5 cursor-pointer"
      placeholder="{{ 'Select end date' | translate }}"
      autocomplete="off"
      readonly
    />
  </div>
</div>