Wie benutzt man ng2-bootstrap datepicker als Popup-Modus?

Question

Ich benutze ng2-bootstrap date-picker in meinem Projekt. Ich möchte den Datumswähler anzeigen, wenn ich auf das Kalendersymbol klicke. Und möchte es auch ausblenden, wenn Sie ein Datum auswählen.

<label>Date:</label> 
<div class="datepickerDiv"> 
    <input type="text" value="{{ getDate() | date:'dd-MMMM-yyyy' }}" class="datepicker"> 
     <span class="cal-icon" (click)="open()"><i class="fa fa-calendar-check-o" aria-hidden="true"></i></span> 
     <span class="clearDate" (click)="clearDate()"><i class="fa fa-times-circle" aria-hidden="true"></i></span> 
     <ul class="datepicker-ul" role="menu" *ngIf="opened"> 
      <datepicker [(ngModel)]="Date" [minDate]="minDate" [showWeeks]="false"></datepicker> 
     </ul> 
</div> 

Und meine Komponente ist als

private opened:boolean = false; 
public open():void { 
    this.opened = !this.opened; 
} 

public getDate():number { 
    return this.Date && this.Date.getTime() || new Date().getTime(); 
} 

private clearDate() { 
    this.Date = null; 
} 

folgt nun wurde die Frage wird nur dann geschlossen werden, wenn ich wieder auf das Symbol klicken.

Answer 1

Trennen Sie einfach "Öffnen" und "Schließen" in zwei Funktionen (jetzt ist Ihr "Öffnen" eigentlich "Toggle"). Dann verwenden Sie das (noch nicht dokumentierte) Event selectionDone($event), um Ihren Datepicker zu schließen.

<datepicker [(ngModel)]="dt" [minDate]="minDate" [showWeeks]="false" (selectionDone)="onSelectionDone($event)"></datepicker> 

und in Ihrem Code:

public onSelectionDone(a) { 
    this.close(); 
}