javascript - Angular 2 - 日期选择器不起作用

Question

我的应用程序需要一个日期选择器。首先我尝试添加 Bootstrap 日期选择器，但它不起作用。因此我尝试使用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/ 将与上面的导入语句匹配)。您不需要 js 文件，因为 ng-bootstrap 提供了所需的代码。

在使用 nbgDatepicker 的组件中，您需要在顶部导入库

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

然后日期选择器应该可以正常工作。