如何使用 ng2-bootstrap datepicker 作为弹出模式？答案

【问题标题】：How to use ng2-bootstrap datepicker as popup mode?如何使用 ng2-bootstrap datepicker 作为弹出模式？
【发布时间】：2016-07-07 10:54:07
【问题描述】：

我在我的项目中使用 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

【解决方案1】：

只需将两个函数中的“打开”和“关闭”分开（现在您的“打开”实际上是“切换”）。然后使用（尚未记录）事件selectionDone($event) 关闭您的日期选择器。

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

在你的代码中：

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

【讨论】：