Question

416 观看

1回复

236 作者的声誉

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

作者: Naresh217 的来源发布者： 2017 年 12 月 27 日

Answer 1

0像

236 作者的声誉

决定

<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()
}

作者: Naresh217 发布者: 2018 年 1 月 2 日

closing datepicker when they are in loop ng-bootstrap

回应 1

来自类别的问题 :