角度-具有两个显示不同日期的日期选择器

Question

因此，我试图将两个日历放在侧边栏上以进行时间选择。 但是，当我从第一个选择日期时，它也会影响第二个日期。那里也显示相同的日期。 这是.TS组件

export class NgbdDatepickerRange {

  hoveredDate: NgbDate | null = null;

  fromDate: NgbDate;
  toDate: NgbDate | null = null;

  fromCompareDate: NgbDate;
  toCompareDate: NgbDate | null = null;

  constructor(calendar: NgbCalendar) {
    // this.fromDate = calendar.getToday();
    // this.toDate = calendar.getNext(calendar.getToday(), 'd', 10);
  }

  onDateSelection2(date: NgbDate) {
    if (!this.fromCompareDate && !this.toCompareDate) {
      this.fromCompareDate = date;
    } else if (this.fromCompareDate && !this.toCompareDate && date.after(this.fromCompareDate)) {
      this.toCompareDate = date;
    } else {
      this.toCompareDate = null;
      this.fromCompareDate = date;
    }
  }

  onDateSelection(date: NgbDate) {
    if (!this.fromDate && !this.toDate) {
      this.fromDate = date;
    } else if (this.fromDate && !this.toDate && date.after(this.fromDate)) {
      this.toDate = date;
    } else {
      this.toDate = null;
      this.fromDate = date;
    }
  }

///////////////////////////////////////////////// /////////////////// 这是HTML组件

范围选择示例

<ngb-datepicker #dp (dateSelect)="onDateSelection($event)" [displayMonths]="2" [dayTemplate]="t" outsideDays="hidden">
</ngb-datepicker>

<ng-template #t let-date let-focused="focused">
  <span class="custom-day"
        [class.focused]="focused"
        [class.range]="isRange(date)"
        [class.faded]="isHovered(date) || isInside(date)"
        (mouseenter)="hoveredDate = date"
        (mouseleave)="hoveredDate = null">
    {{ date.day }}
  </span>
</ng-template>

<ngb-datepicker #dp (dateSelect)="onDateSelection2($event)" [displayMonths]="2" [dayTemplate]="t" outsideDays="hidden">
</ngb-datepicker>

<ng-template #t let-date let-focused="focused">
  <span class="custom-day"
        [class.focused]="focused"
        [class.range]="isRange(date)"
        [class.faded]="isHovered(date) || isInside(date)"
        (mouseenter)="hoveredDate = date"
        (mouseleave)="hoveredDate = null">
    {{ date.day }}
  </span>
</ng-template>

<hr>

<pre>From: {{ fromDate | json }} </pre>
<pre>To: {{ toDate | json }} </pre>

演示：https://lbnlcm.run.stackblitz.io/