Close a ngbDatePicker popup with Angular from the typescript

Question

I'm using Angular 9 with Ng-Bootstrap and i have an issue with my ngb-datepicker. I have a Range datepicker in a popup and i want to close it when a range is selected.

The issue that i have is i'd like to close it using the close() function from the TS and not directly into the component.

How can i retrieve my datepicker in my TS code and close it ?

Here is my datePicker code:

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>

Hope you can help me on this one.Thanks in advance. If you need more informations feel free to ask.

Answer 1

I think the best option is to just pass an instance of the date-picker back to your typescript function.

<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>

Then in your typescript file:

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;
    }
}

Simple and effective. No need for other dependencies.