i'm attempting write workaround angular2 bootstrap datepicker closes datepicker when user clicks outside.
i have working click outside registered , flips boolean flag here:
@component({ selector: 'ngbd-datepicker-popup', templateurl: 'app/component/datepicker/datepicker.html', host: { '(document:click)': 'handleclick($event)' } }) export class ngbddatepickerpopup { private showdatepicker: boolean = true; constructor(private elementref: elementref) {} handleclick(event: any) { if (!this.elementref.nativeelement.contains(event.target)) { this.showdatepicker = false; } } }
the problem is, don't know there close datepicker. need call close()
method markup because that's datepicker declared.
here's markup comments:
<form class="form-inline" bindtobooleanflaghere="d.close()"> <!--if true, close popup --!> <div class="form-group"> <div class="input-group"> <input type="text" style="z-index: 0;" readonly class="form-control" placeholder="mm-dd-yyyy" firstdayofweek="1" name="dp" [(ngmodel)]="date" (ngmodelchange)="datechange(date)" ngbdatepicker #d="ngbdatepicker"> <!-- datepicker declared here --!> <div *ngif="!disablethis" class="input-group-addon" style="background-color: white; cursor: pointer" (click)="d.toggle()"> <i class="glyphicon calendar"></i> </div> </div> </div> </form>
my datepicker object declared d
here in html markup , external clicks registered in typescript. these external clicks flip boolean flag false.
so need html watch boolean flag , call d.close()
method when showdatepicker
false.
get reference of component , call close on it
@viewchild(ngbdatepicker) popup:ngbddatepickerpopup; handleclick() { if (!this.elementref.nativeelement.contains(event.target)) { this.popup.close(); } }
i'm not sure if @viewchild()
line correct, because don't understand code.
Comments
Post a Comment