當它們在循環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

回答

相關問題