DatePicker 仅在我写入日期时才工作

Question

我迁移了我的 Angular 和 Bootstrap 版本，现在我的 DatePicker 无法像以前一样工作。

我解释一下： 我有两个日历，一个用于选择开始日期，另一个用于选择结束日期。我在日历之间有依赖性。当我选择开始日期时，结束日期也必须更改。

当我单击日历中的日期时，该字段不会更新，但如果我在字段上写入日期，则会更新。

我不明白为什么。

HTML：

<label class="w-100">Date de début</label>
        <div class="input-group mb-3">
          <div class="input-group-append">
            <div>
              <input bsDatepicker  [(ngModel)]="dateDebut" [bsConfig]="{ dateInputFormat: 'DD/MM/YYYY' }" (bsValueChange)="setDatePickerFin()" (change)="setDatePickerFin()" #dpDebut="bsDatepicker" [maxDate] = "dateMax" (ngModelChange)="UpdateInputAfterDatePickerChange()" >
            </div>
            <button class="btn w-auto d-inline-flex btn-datepicker" (click)="dpDebut.toggle()" [attr.aria-expanded]="dpDebut.isOpen" type="button"><i class="fas fa-calendar-alt"></i></button>
          </div>
        </div>
          <label class="w-100">Date de fin</label>
          <div class="input-group mb-3 pr-2">
            <div class="input-group-append">
              <div>
                <input bsDatepicker [(ngModel)]="dateFin" [bsConfig]="{ dateInputFormat: 'DD/MM/YYYY' }"  [minDate]="dateDebut" [maxDate]="maxDatePickerDateFin" #dpFin="bsDatepicker">
              </div>
              <button class="btn w-auto d-inline-flex btn-datepicker" (click)="dpFin.toggle()" [attr.aria-expanded]="dpFin.isOpen" type="button"><i class="fas fa-calendar-alt"></i></button>
            </div>
          </div>

TS：

  setDatePickerFin() {
    this.maxDatePickerDateFin = new Date(this.dateDebut);
    this.maxDatePickerDateFin = new Date(this.maxDatePickerDateFin.setDate(this.maxDatePickerDateFin.getDate() + 10));
   

    if (this.dateFin.getTime() <= this.dateDebut.getTime()) {
      this.dateFin = this.dateDebut;
     
    }


    if (this.maxDatePickerDateFin.getTime() > this.dateMax.getTime()) {
      this.maxDatePickerDateFin = this.dateMax;
      
    }


    if (this.dateFin.getTime() > this.maxDatePickerDateFin.getTime()) {
      this.dateFin = this.maxDatePickerDateFin;
      
    }
  }

有人可以帮助我吗？

我尝试了不同的解决方案，但对我来说是一样的

Answer 1

我已经根据您的要求制作了小演示https://stackblitz.com/edit/ngx-bootstrap-datepicker-mn4avr?file=app%2Fapp.component.ts只需尝试在您的情况下实现这一点。