Question

我的应用程序需要一个日期选择器。首先，我尝试添加bootstrap 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库的结果。

我假设您已将其添加到项目依赖项中：

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';

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

Angular 2 - datepickers不起作用

1 个答案: