日付を選択した後、角2のブートストラップDatePickerを閉じる

Question

私は日付を選択した後に閉じる2つの異なる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）がありますが、最初は双方向バインディングを確実に保証し、2番目のメソッドはは変更時にこのことを行います。 2は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機能：

は、 http://plnkr.co/edit/BtBUvNYeUYFgr1VmACS3?p=preview

：

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

を台無しに例を作業します