Закройте Angular 2 Bootstrap DatePicker после выбора даты

У меня есть два разных 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;
}
}
}

typescript angular ng-bootstrap bootstrap-datepicker
person Drew13    schedule 04.11.2016    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Этого можно добиться, подключив функцию для запуска 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< /а>

person silentsod    schedule 04.11.2016