選擇日期後關閉Angular 2 Bootstrap DatePicker

Question

我有兩個不同的datepickers，我想在選擇日期後關閉。我一直在網上找到關於autoclose: true的東西，但我無法弄清楚如何設置它。我可以選擇日期並在輸入和所有內容中顯示更改，但我想在選擇第一個日期後立即關閉datepicker。

<form class="form-inline"> 
<div> 
<div class="form-group" [ngClass]="{'has-error':!secondForm.controls['startDate'].valid && secondForm.controls['startDate'].touched}"> 
    <label>Start Date:</label> 
    <input style="width:250px" [value]="getStartDate()" class="form-control" type="text" [formControl]="secondForm.controls['startDate']"> 
</div> 
<div style="display:inline-block"> 
    <ngb-datepicker id="special" *ngIf="startCheck==true;" [(ngModel)]="dt" class="dropdown-toggle" [ngModelOptions]="{standalone: true}"></ngb-datepicker> 
</div> 
<button type="button" class="btn icon-calendar" (click)="showStartDatePick()"></button> 
<div class="form-group" [ngClass]="{'has-error':!secondForm.controls['endDate'].valid && secondForm.controls['endDate'].touched}"> 
    <label>End Date:</label> 
    <input style="width:250px" [value]="getEndDate()" class="form-control" type="text" [formControl]="secondForm.controls['endDate']"> 
</div> 
<div style="display:inline-block"> 
    <ngb-datepicker id="special" *ngIf="endCheck==true;" [(ngModel)]="dt2" class="dropdown-toggle" [ngModelOptions]="{standalone: true}"></ngb-datepicker> 
</div> 
<button type="button" class="btn icon-calendar" (click)="showEndDatePick()"></button> 
<button type="button" class="btn icon-search" [disabled]="!secondForm.valid"></button> 
</div> 
</form> 

通訊打字稿：

import { Component } from '@angular/core'; 
import { FormGroup, FormBuilder, Validators } from '@angular/forms'; 
import {NgbModule} from '@ng-bootstrap/ng-bootstrap'; 
import {NgbDateStruct} from '@ng-bootstrap/ng-bootstrap'; 
import {DatePipe} from "@angular/common"; 

@Component({ 
selector: 'calendar-pick', 
styleUrls: ['../app.component.css'], 
templateUrl: './calendarpick.component.html', 
providers: [DatePipe] 
}) 

export class CalendarPickComponent { 
public dt: NgbDateStruct; 
public dt2: NgbDateStruct; 
public startCheck: boolean = false; 
public endCheck: boolean = false; 
secondForm : FormGroup; 

public constructor(fb: FormBuilder, private datePipe: DatePipe) { 
this.secondForm = fb.group({ 
    'startDate' : [this.dt, Validators.required], 
    'endDate' : [this.dt2, Validators.required] 
}) 
this.secondForm.valueChanges.subscribe((form: any) => { 
    console.log('form changed to:', form); 
    } 
); 
} 

public getStartDate(): void { 
let timestamp = this.dt != null ? new Date(this.dt.year, this.dt.month-1, this.dt.day).getTime() : new Date().getTime(); 
this.secondForm.controls['startDate'].setValue(this.datePipe.transform(timestamp, 'fullDate')); 
} 

public getEndDate(): void { 
let timestamp = this.dt2 != null ? new Date(this.dt2.year, this.dt2.month-1, this.dt2.day).getTime() : new Date().getTime(); 
this.secondForm.controls['endDate'].setValue(this.datePipe.transform(timestamp, 'fullDate')); 
} 

public showStartDatePick():void { 
if (this.startCheck == false){ 
    this.startCheck = true; 
} else { 
    this.startCheck = false; 
} 
} 

public showEndDatePick():void { 
if (this.endCheck == false){ 
    this.endCheck = true; 
} else { 
    this.endCheck = false; 
} 
} 
} 

Answer 1

這可以通過附加的功能來實現火上ngModelChange像這樣：

<ngb-datepicker *ngIf="startCheck;" [(ngModel)]="startDate" (ngModelChange)="showDatePick(0)" class="dropdown-toggle" [ngModelOptions]="{standalone: true}" style="position:absolute; z-index:1"></ngb-datepicker>

這種感覺觸摸哈克給我用[（ngModel）]和（ngModelChange），但第一個是確保直接雙向綁定，第二個是添加一層在變化上做這件事情。

處理它有兩個參數傳遞到showDatePick和翻轉適當的布爾爲false：

public showDatePick(selector):void { 
    if(selector === 0) { 
     this.startCheck = !this.startCheck 
    } else { 
     this.endCheck = !this.endCheck; 
    } 
} 

並與輸入我們會得到一個小聰明與我們的環境，使我們可以重新使用相同的代碼，因爲如果一些代碼爲99％，同樣的有可能是一個方法，使這一切一兩件事：

<input style="width:250px" [value]="getDate('start')" class="form-control" type="text" [formControl]="secondForm.controls['startDate']">

而GETDATE函數：

public getDate(dateName: string) { 
    let workingDateName = dateName + 'Date'; 
    let timestamp = this[workingDateName] != null ? new Date(this[workingDateName].year, this[workingDateName].month-1, this[workingDateName].day).getTime() : new Date().getTime(); 
    this.secondForm.controls[dateName + 'Date'].setValue(this.datePipe.transform(timestamp, 'fullDate')); 
    } 

工作示例惹：http://plnkr.co/edit/BtBUvNYeUYFgr1VmACS3?p=preview