Как использовать ng2-bootstrap datepicker в качестве всплывающего режима?

Я использую в своем проекте средство выбора даты ng2-bootstrap. Я хочу отображать средство выбора даты, когда я нажимаю на значок календаря. А также хочу скрыть это при выборе даты.

<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>

И мой компонент выглядит следующим образом

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;
}

Теперь проблема заключалась в том, что он будет закрыт, только когда я снова нажму на значок.


typescript angular datepicker ng2-bootstrap
person sainu    schedule 07.07.2016    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Просто разделите «открыть» и «закрыть» в двух функциях (теперь ваше «открытие» фактически является «переключателем»). Затем используйте (еще не задокументированное) событие selectionDone($event), чтобы закрыть средство выбора даты.

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

и в вашем коде:

public onSelectionDone(a) {
    this.close();
}
person jspassov    schedule 11.09.2016