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使用datapicker。

Answer 2

检查@NgModule

中的导入顺序

您必须在FormsModule之前加NgbModule，并且不要忘记根模块中的NgbModule.forRoot()

Answer 3

这个问题的解决方案非常简单。在项目目录中，找到名为 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 4

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

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

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

ng-bootstrap datepicker无法正常工作

5 个答案: