Angular中如何获取Flowbite日期范围选择器的选中日期？

我已在UI中实现了Flowbite日期范围选择器，但无法从输入字段中获取选中的日期。

我尝试过以下方案：

• 使用change事件：(change)="onStartDateChange($event)"
• 通过ViewChild/ElementRef为元素添加事件监听器

有意思的是，用ViewChild/ElementRef绑定click事件时监听器能生效，但行为不符合预期；绑定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();
  }

  // 仅当开始和结束日期都选择完成时触发
  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>

内容的提问来源于stack exchange，提问作者Sofie Buur