Angular 2-日期選擇器不起作用

Question

我的應用程序需要一個日期選擇器。 首先，我嘗試添加引導日期選擇器，但沒有成功。 因此，我嘗試使用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庫導致的。

我假設您已將其添加到項目依賴項中：

npm install ng-bootstrap

在index.html文件中，您需要導入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/將與上面的import語句匹配）。 您不需要js文件，因為ng-bootstrap提供了所需的代碼。

在使用nbgDatepicker的組件中，您需要在頂部導入庫

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

然后日期選擇器應正常工作。