ng2-bootstrap datepickerを使用したモデル駆動型

Question

ng2-bootstrap datepickerをAngular2モデル駆動型で使用できますか、それともテンプレートのみで動作しますか？フォーム？

<datepicker [(ngModel)]="startDate" ></datepicker> 

...動作するようには思えん：

文書は、（例として）次のようにあなたがそれを使用したいようなセレクタを記述しています。理想的には、次のように使用したいと考えています。

<datepicker formControlName="startDate" ></datepicker> 

...しかし、そのままでは動作しないようです。モデル駆動フォームでこのモジュールを使用する方法はありますか？そうでない場合は、モデル駆動型で動作する合理的な代替方法がありますか？ （私はng2-datepickerも試しましたが、outstanding bugがあり、SystemJSで使用するのに不便です。滑らかに見えるので残念です）。

Answer 1

私はprimeNgコントロールを使用していて、驚くべき機能を備えたカレンダーコントロールを持っています。ここをクリックしてください： PrimeNg Calendar UI Control

Answer 2

ReactiveFormsModuleでng2-bootstrap datepicker用の単純なラッパーを作成しました。それは瞬間を使用するので、あなたのニーズに合わせて改善することができます。

Live demo

カスタムdatepicker.component.ts

import { Component, forwardRef, Provider } from '@angular/core'; 
import { NG_VALUE_ACCESSOR, ControlValueAccessor } from '@angular/forms'; 
import * as moment from 'moment'; 

let DATEPICKER_VALUE_ACCESSOR: Provider = { 
    provide: NG_VALUE_ACCESSOR, 
    useExisting: forwardRef(() => CustomDatepickerComponent), 
    multi: true 
}; 

@Component({ 
    selector: 'custom-datepicker[formControlName]', 
    template: ` 
    <datepicker [(ngModel)]="datePickerValue"></datepicker> 
    `, 
    providers: [DATEPICKER_VALUE_ACCESSOR] 
}) 
export class CustomDatepickerComponent implements ControlValueAccessor { 
    change = (_: any) => {}; 
    _customDatePickerValue; 
    _datePickerValue: Date; 

    get customDatePickerValue() { 
    return this._customDatepickerValue; 
    } 
    set customDatePickerValue(value) { 
    this._customDatepickerValue = value; 
    this.change(value); 
    } 

    get datePickerValue() { 
    return this._datePickerValue; 
    } 
    set datePickerValue(value) { 
    this._datePickerValue = value; 
    this.customDatePickerValue = moment(value).format('DD/MM/YYYY'); 
    } 

    writeValue() {} 
    registerOnChange(fn) { 
    this.change = fn; 
    } 
    registerOnTouched() {} 
} 

用法あなたのコンポーネントで

app.component.ts

import { Component } from '@angular/core'; 
import { FormGroup, FormControl } from '@angular/forms'; 

@Component({ 
    selector: 'my-app', 
    template: ` 
    <form [formGroup]="form"> 
    <custom-datepicker formControlName="customDatepickerValue"></custom-datepicker> 
    </form> 

    <pre>{{form.value | json }}</pre> 
    ` 
}) 
export class AppComponent { 
    form: FormGroup = new FormGroup({ 
    customDatepickerValue: new FormControl() 
    }) 
}