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>

任何帮助都会被应用

Answer 1

我有同样的问题。 在我的情况下，在使用指令的模块中缺少 NgbModule 导入。 因此，请仔细检查您在邮件模块中导入 NgbModule.forRoot() 并在每个模块中导入 NgbModule tak 使用数据选择器。

Answer 2

为了在focus事件上打开日期选择器，您需要添加(focus)="d.open()"如下所示：

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

Answer 3

检查@NgModule的导入@NgModule

你必须把FormsModule之前NgbModule ，不要忘记NgbModule.forRoot()根模块

Answer 4

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

在该文件中，在@NgModule下，将有一个导入数组。 如下所示，在其中添加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 { }

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();
   }
});