1

プロジェクトで ng2-bootstrap date-picker を使用しています。カレンダー アイコンをクリックしたときに日付ピッカーを表示したい。また、日付を選択するときに非表示にしたい。

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

問題は、アイコンをもう一度クリックしたときにのみ閉じられるということでした。

4

1 に答える 1

3

「開く」と「閉じる」を 2 つの関数で分離するだけです (これで、「開く」は実際には「トグル」になります)。次に、（まだ文書化されていない）イベントを使用selectionDone($event)して、日付ピッカーを閉じます。

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

そしてあなたのコードで：

public onSelectionDone(a) {
    this.close();
}
于 2016-09-11T18:51:40.183 に答える