closing datepicker when they are in loop ng-bootstrap

Question

I have two datepickers(Start Date and End Date) in a loop. I would like to close startdate datepickers when trying to open enddate and vice versa. I have tried giving different references to input (#start, #close)

  <div class="input-group" *ngIf="item.id =='startDate'">
  <input class="form-control" placeholder="{{item.placeholder}}"
         name="dp" [(ngModel)]="item.dateModel" ngbDatepicker #start="ngbDatepicker">
  <button class="input-group-addon" (click)="start.toggle();end.close()" type="button">
    <img src="img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/>
  </button>
</div>
  <div class="input-group" *ngIf="item.id =='endDate'">
  <input class="form-control" placeholder="{{item.placeholder}}"
         name="dp" [(ngModel)]="item.dateModel" ngbDatepicker #end="ngbDatepicker">
  <button class="input-group-addon" (click)="end.toggle();start.close()" type="button">

    <img src="img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/>
  </button>
</div>

If i remove *ngIf from input-group and give to its parent it works but both of them having same dates. Note: Currently i cannot change input data model. Here is the plunker which mocks my use case http://plnkr.co/edit/ukbt33q7e1uyNNbPh2cN?p=preview

you have refered to the same "variable" (item.dateModel) the two ngbDatePicker. It's the reason because you have the same value. I don't understand why you can not change input data model. I'll try use [ngClass]="{'invisible':item.id=='startDate']" or [hidden] instead of *ngIf, see https://stackoverflow.com/questions/19177732/what-is-the-difference-between-ng-if-and-ng-show-ng-hide — Eliseo, Dec 27 '17 at 21:15
we have developed this as a component and other teams just feed their data. If the input model has to be changed. Its going to be big change and they need to change their logic as well. So finding alternative way. — Naresh217, Dec 28 '17 at 17:14

score 0 · Accepted Answer · answered Jan 02 '18 at 18:50

<div  class="tmo-floating-label filterItem"  *ngIf="item.id=='startDate'">
        <div class="input-group" >
          <input   type="text" class="form-control" name="startDate" readonly [(ngModel)]="filterItem.dateModel"  ngbDatepicker #startDate="ngbDatepicker" (ngModelChange)="onChange(filterItem)" placeholder="{{filterItem.placeholder}}">
          <button class=" input-group-addon btn btn-primary" (click)="startDateToggle();"><i class="fa fa-calendar" aria-hidden="true"></i></button>
        </div>
      </div>
      <div  class="tmo-floating-label filterItem" *ngIf="item.id=='endDate'">
        <div class="input-group">
          <input   type="text" class="form-control" name="endDate" readonly [(ngModel)]="filterItem.dateModel"  ngbDatepicker #endDate="ngbDatepicker" (ngModelChange)="onChange(filterItem)" placeholder="{{filterItem.placeholder}}">
          <button class=" input-group-addon btn btn-primary" (click)="endDateToggle();"><i class="fa fa-calendar" aria-hidden="true"></i></button>
        </div>
      </div>

Instead of using toggle method on click, Calling a startDateToggle/endDateToggle and closing the other datepicker using its referance

    startDateToggle(){
this.startDate.toggle();
this.endDate.close()
}
endDateToggle(){
this.endDate.toggle();
this.startDate.close()
}

closing datepicker when they are in loop ng-bootstrap

1 Answers1