ngX-bootstrapを使ってポップアップ日付ピッカーを追加するには？

Question

ngx-bootstrapを使ってdatepickarを追加するには？ このプロジェクトでは、Angular2のtypecript2 ngx-bootstrapを使用しています。 は、私は次のようなことをやっています： HTMLでは：

<datepicker class="well well-sm main-calendar" [(ngModel)]="dt" [minDate]="minDate" [showWeeks]="false" [dateDisabled]="dateDisabled"></datepicker> 

モジュールで：

import { DatepickerModule } from 'ngx-bootstrap/datepicker'; 
@NgModule({ 
    imports: [ 
     DatepickerModule.forRoot() 
    ]}); 

Answer 1

機能は現在のライブラリに存在しません。そこここでの議論はあるが、何も今のところ来ていない：

https://github.com/valor-software/ngx-bootstrap/issues/273

私は日付ピッカーと、ブートストラップドロップダウンを使用して、それのための回避策を作成しました。ここではHTMLは（MinDateプロパティとDATEVALUEは私のComponentクラス内部の両方の値であることに注意してください）です。

<div class="dropdown" dropdown #datepickerDropdown="bs-dropdown" [autoClose]="false"> 
    <div class="input-group" dropdownToggle> 
    <input type="text" disabled="disabled" class="form-control" [value]="dateValue | date:'shortDate'" /> 
    <div class="input-group-addon"> 
     <span class="glyphicon glyphicon-calendar"></span> 
    </div> 
    </div> 
    <div *dropdownMenu class="dropdown-menu dropdown-date"> 
    <datepicker [(ngModel)]="dateValue" [minDate]="MinDate" [showWeeks]="false" (selectionDone)="closeDropdown()"></datepicker> 
    </div> 
</div> 

あなたのモジュールの内部では、含まれていることを確認してください：

import { DatepickerModule } from 'ngx-bootstrap/datepicker'; 
import { BsDropdownModule } from 'ngx-bootstrap/dropdown'; 

と

を忘れないでください

@NgModule({ 
    declarations: [...], 
    imports: [ 
    BsDropdownModule.forRoot(), 
    DatepickerModule.forRoot(), 
    ... (any other imports) 
    ], 
    providers: [...], 
    bootstrap: [AppComponent] 
]) 

日付選択のドロップダウンを自動的に閉じるには、ユーザーが月を変更したい場合にクリックすると自動クローズしたくありませんでした。したがって、selectionDateイベントを使用する必要がありました。関数を適切に作成するには、これをComponentにプルする必要があります。あなたがコンポーネントに以下の輸入を含める必要があります：

import { ViewChild, ... } from '@angular/core'; 
import { BsDropdownDirective } from 'ngx-bootstrap/dropdown'; 

その後、次の手順を実行して、コンポーネントクラス内のドロップダウンを参照することができます。

@ViewChild('datepickerDropdown') private datepickerDropdown: BsDropdownDirective; 

closeDropdown() { 
    this.datepickerDropdown.hide(); 
} 

私は助けることができました願っています。これは私のために働くが、それが他の人のために働くかどうか分からない。