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

我在循环中有两个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

来源

2017-12-27 Naresh217

你refered到相同的“变量”（item.dateModel）这两个ngbDatePicker。这是因为你具有相同的价值。我不明白你为什么不能改变输入数据模型。我会尝试使用[ngClass] =“{'invisible'：item.id =='startDate']”或[hidden]而不是* ngIf，请参阅https://stackoverflow.com/questions/19177732/what-is -ng-if-and-ng-show-ng-hide – Eliseo

我们已经将它作为一个组件开发，其他团队只是提供他们的数据。如果输入模型必须改变。这将是一个巨大的变化，他们也需要改变他们的逻辑。所以寻找替代方法。 – Naresh217

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

来源

2018-01-02 18:50:57 Naresh217

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

回答

相关问题