当它们在循环ng-bootstrap中时关闭datepicker

  • Z时代
  • 2024-01-10
  • 分类：问答

我在循环中有两个datepickers（开始日期和结束日期）。我想在尝试打开enddate时关闭startdate datepickers，反之亦然。 我曾尝试输入（＃开始，＃关闭）给予不同的引用当它们在循环ng-bootstrap中时关闭datepicker

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

如果我从输入组中删除* ngIf并给予其父它的工作原理，但二者具有相同的日期。 注意：目前我无法更改输入数据模型。 这里是嘲笑我的使用情况http://plnkr.co/edit/ukbt33q7e1uyNNbPh2cN?p=preview

回答：

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

而不是使用肘法上点击的plunker，调用startDateToggle/endDateToggle和关闭其它的日期选择器利用其全球化志愿服务青年

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

以上是 当它们在循环ng-bootstrap中时关闭datepicker 的全部内容， 来源链接： utcz.com/qa/266512.html

回到顶部