角2 - 日付ピッカーが動作しない

Question

私のアプリケーションにはdatepickerが必要です。最初に、ブートストラップのdatepickerを追加しようとしましたが、動作しませんでした。したがって、ngBootstrapを使用しようとしましたが、それでも動作しません。アイコンをクリックすると、カレンダーを取得できませんでした。アイコンが機能していません。

私のコード：

<form class="form-inline"> 
<div class="form-group"> 
    <div class="input-group"> 
    <input class="form-control" placeholder="yyyy-mm-dd" 
      name="dp" [(ngModel)]="modelDate" ngbDatepicker #d="ngbDatepicker"> 
    <div class="input-group-addon" (click)="d.toggle()" > 
     <img src="img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/> 
    </div> 
    </div> 
</div> 

---

Model: {{ modelDate | json }}

Answer 1

通常の問題は、正しくngBootstrapライブラリをインポートしないの結果です。

私はあなたのプロジェクトの依存関係にそれを追加したと仮定している：あなたのindex.htmlファイルで

npm install ng-bootstrap 

を、あなたは、ブートストラップCSSファイル

<link rel="stylesheet" href="/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="/css/bootstrap-grid.min.css"> 
    <link rel="stylesheet" href="/css/bootstrap-reboot.min.css"> 

あなたが得ることができますをインポートする必要がありますここではこれら：

https://v4-alpha.getbootstrap.com

パッケージをダウンロードcssファイルをプロジェクトのルートcssディレクトリにコピーします（/css/は上記のインポート文と一致します）。 ng-bootstrapは必要なコードを提供するので、jsファイルは必要ありません。あなたがnbgDatepickerを使用している部品で

、あなたはトップ

import { NgbModule } from '@ng-bootstrap/ng-bootstrap'; 

でライブラリをインポートすると、日付ピッカーが正常に動作するはずですが必要です。