ng-bootstrap日期选择器无法工作

Question

我正在尝试在我的Angular2项目中使用ng-bootstrap日期选择器，但是出现了以下错误。

There is no directive with "exportAs" set to "ngbDatepicker"

这里是我的代码。

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

任何帮助都将不胜感激

- Shailendra

---

请发布所有相关的代码，以展示您已经在您的应用程序中（即您的应用程序模块）正确安装了ng-bootstrap。 - JB Nizet

请仔细阅读安装指南。请记得在包含您的组件的模块中（无论是主模块还是其他模块），将 NgbModule.forRoot() 或 NgbModule 包含在提供程序中。 - Eliseo

谢谢Eliseo，我忘记加了 .forRoot()。 - Shailendra

Answer 1

我也遇到了同样的问题。在我使用指令的模块中缺少了NgbModule导入。因此，请仔细检查您是否在邮件模块中导入了NgbModule.forRoot()，并且在每个使用日期选择器的模块中导入了NgbModule。

- Peter Spireng

---

这应该是一个评论而不是答案。 - Cleptus

Answer 2

为了在focus事件上打开日期选择器，您需要像下面这样添加(focus)="d.open()":

<input type="text" [(ngModel)]="date" ngbDatepicker #d="ngbDatepicker" (focus)="d.open()" name="date_start" class="form-control"/>

- user1519240

Answer 3

解决这个问题非常简单。在您的项目目录中，找到名为app.module.ts的文件，它是AppModule（根模块）。

在该文件中，在@NgModule下面，将会有一个imports数组。像下面给出的那样，在其中添加FormsModule和NgbModule.forRoot()。

app.module.ts：

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import { NgbModal, NgbModule } from '@ng-bootstrap/ng-bootstrap';


@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    NgbModule.forRoot()
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

- Steffi Keran Rani J

---

“forRoot”已经被弃用：3.0.0。使用.forRoot()导入不再必要，你只需要直接导入该模块即可。此方法将在4.0.0中被移除。也就是说，在“imports”中只需提及“NgbModule”即可。 - Jacob Nelson

Answer 4

检查您的@NgModule中导入的顺序

您需要在NgbModule之前放置FormsModule，并且不要忘记在您的根模块中添加NgbModule.forRoot()

- Iter Ator

Answer 5

添加属性autoClose="inside"并将代码粘贴到index.html中。

$("body").not("input[ngbdatepicker]").click(function (e) {
   if ($(e.target).not("input[ngbdatepicker]").length > 0 && 
       $(e.target).closest("ngb-datepicker").length == 0) {
       $("ngb-datepicker").remove();
   }
});

- Shakir Naeem

---

欢迎来到 Stack Overflow。为了让其他人更容易阅读你的问题和答案，请使用代码格式化。 - dspencer