Flowbite date-range-picker: How to get selected dates? (angular)

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>

Continue reading...