closing datepicker when they are in loop ng-bootstrap
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 日回应 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 日
来自类别的问题 :
- angular 如何查看我使用的Angular版本?
- angular AngularJS:如何清除URL中的查询参数?
- angular angular:根据模型中的布尔值切换按钮文本
- angular Angular 2:是否强制使用括号/方括号?
- angular 在最新的TypeScript(大概是v1.5)示例中,@(符号)是什么意思?
- angular Angular 2.0绑定到样式的值
- angular Angular没有NameService的提供者
- angular 如何在Angular中使用jQuery?
- angular 如何使FileReader与Angular2一起使用?
- angular 如何在Angular 2中的组件之间共享数据?
- ng-bootstrap how to use uib-tabset in angular2 using ng-bootstrap?
- ng-bootstrap 如何将ng-bootstrap添加到Angular-CLI(Broccoli版本)项目中?
- ng-bootstrap ng-bootstrap是否支持bootstrap4的新功能卡?
- ng-bootstrap error TS2304: Cannot find name 'NGB_PRECOMPILE' when adding ng-bootstrap to Angular2 quick start for TypeScript
- ng-bootstrap 如何通过system.js将引导程序添加到Angular2
- ng-bootstrap 建议将哪个UI库与Angular2一起使用?
- ng-bootstrap 我是否需要在index.html中添加bootstrap.min.css才能使用ng-bootstrap?
- ng-bootstrap Ng-bootstrap Import Error Angular 2
- ng-bootstrap 带有ng-bootstrap 404错误的Angular2 RC5入门
- ng-bootstrap ngb-accordion from Angular2 ng-bootstrap not showing on view