沒有在Angular 2的輸入上設置值引導datepicker

Question

我有一個輸入，我想用Angular 2 Bootstrap datepicker來填充。當頁面打開時，值將使用value="{{ getStartDate() | date:'fullDate'}}"在今天的日期啓動。但是當我點擊按鈕並打開日期選擇器並選擇一個新日期時，該值不會填充輸入。此外，我再也不能再點擊該按鈕關閉日期選擇器。

HTML：

<form class="form-inline"> 
<div> 
<div class="form-group" [ngClass]="{'has-error':!secondForm.controls['startDate'].valid && secondForm.controls['startDate'].touched}"> 
    <input value="{{ getStartDate() | date:'fullDate'}}" style="width:250px" class="form-control" type="text" [formControl]="secondForm.controls['startDate']"> 
</div> 
<div style="display:inline-block"> 
    <ngb-datepicker *ngIf="startCheck==true;" [(ngModel)]="dt" class="dropdown-toggle" [ngModelOptions]="{standalone: true}" style="position:absolute; z-index:1"></ngb-datepicker> 
</div> 
<button type="button" class="btn icon-calendar" (click)="showDatePick()"></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'; 

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

export class CalendarPickComponent { 
public dt:Date = new Date(); 
public startCheck: boolean = false; 
//Might need to change this to complexForm, not sure yet 
secondForm : FormGroup; 

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

public getStartDate():number { 
return this.dt && this.dt.getTime() || new Date().getTime(); 
} 

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

Answer 1

的NG-引導日期選擇器的模式是不是一個Date（）對象是一個NgbDateStruct它由{月，日，年}

爲了獲得理想的行爲，代碼如下所示：

import {DatePipe} from "@angular/common"; 

@Component({providers: [DatePipe]}) 

public constructor(fb: FormBuilder, private datePipe: DatePipe) 
public dt: NgbDateStruct; 
<...> 
public getStartDate():number { 
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')); 
} 

名

的標記更改爲： <input style="width:250px" [value]="getStartDate()" class="form-control" type="text" [formControl]="secondForm.controls['startDate']">

以下是完整plunker：https://plnkr.co/edit/zqGpoJZ1psKmST0S7Ix0?p=preview

注意，NG-引導球隊的月份指數是0基礎，這是使用在本地Date對象時狂攬不是一個基於與NgbDate結合使用。另外，它的寫法默認值是new Date（）。getTime（）意味着你永遠不會有一個可能/可能不需要的空白值。它總是骯髒和有效的。