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

Это чувствует прикосновение Hacky ко мне с [(ngModel)] и (ngModelChange), но первая обеспечивает двустороннюю привязку напрямую, а вторая добавляет слой сделайте это вещь на изменение.

Чтобы справиться с этим в течение двух передать аргумент в showDatePick и переворачивать соответствующее логическое значение ЛОЖЬ:

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