使用打字稿中的 Angular 关闭 ngbDatePicker 弹出窗口

Question

我正在使用带有 Ng-Bootstrap 的 Angular 9，但我的 ngb-datepicker 有问题。 我在弹出窗口中有一个范围日期选择器，我想在选择范围时关闭它。

我遇到的问题是我想使用 TS 中的 close() 函数将其关闭，而不是直接进入组件。

如何在我的 TS 代码中检索我的日期选择器并关闭它？

这是我的 datePicker 代码：

enter <div class="form-group hidden">
                    <div class="input-group">
                      <input name="datepicker1"
                             class="form-control"
                             ngbDatepicker
                             #d1="ngbDatepicker"
                             [autoClose]="'outside'"
                             (dateSelect)="onDateSelection($event)"
                             [displayMonths]="2"
                             [dayTemplate]="t"
                             outsideDays="hidden"
                             [startDate]="fromDateStart"
                             [hidden]="true"><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)="hoveredDateStart = date"
                              (mouseleave)="hoveredDateStart = null">
                          {{ date.day }}
                        </span>
                      </ng-template></div><div class="input-group">
                      <input #dpFromDateStart
                             class="form-control" placeholder="yyyy-mm-dd"
                             [value]="formatter.format(fromDateStart)"
                             (input)="fromDateStart = validateInput(fromDateStart, dpFromDateStart.value);d1.close()"
                             formControlName="startDateOp">
                      <div class="input-group-append">
                        <button class="btn btn-outline-secondary calendar" (click)="d1.toggle()" type="button"></button>
                      </div>
                    </div>

希望你能帮我解决这个问题。在此先感谢。 如果您需要更多信息，请随时询问。

Answer 1

我认为最好的选择是将日期选择器的实例传递回您的打字稿函数。

<div class="form-group hidden">
                <div class="input-group">
                  <input name="datepicker1"
                         class="form-control"
                         ngbDatepicker
                         #d1="ngbDatepicker"
                         [autoClose]="'outside'"
                         (dateSelect)="onDateSelection($event, datepicker)"
                         [displayMonths]="2"
                         [dayTemplate]="t"
                         outsideDays="hidden"
                         [startDate]="fromDateStart"
                         [hidden]="true"><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)="hoveredDateStart = date"
                          (mouseleave)="hoveredDateStart = null">
                      {{ date.day }}
                    </span>
                  </ng-template></div><div class="input-group">
                  <input #dpFromDateStart
                         class="form-control" placeholder="yyyy-mm-dd"
                         [value]="formatter.format(fromDateStart)"
                         (input)="fromDateStart = validateInput(fromDateStart, dpFromDateStart.value);d1.close()"
                         formControlName="startDateOp">
                  <div class="input-group-append">
                    <button class="btn btn-outline-secondary calendar" (click)="d1.toggle()" type="button"></button>
                  </div>
                </div>

然后在你的打字稿文件中：

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

简单有效。不需要其他依赖。