ng-bootstrap datepicker не работает

Question

Я пытаюсь использовать средство выбора даты ng-bootstrap в моем проекте angular2, но получаю следующую ошибку.

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

Для того, чтобы открыть DatePicker на focus событие, вам нужно добавить (focus)="d.open()" как ниже:

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

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

Проверьте порядок импорта в вашем @NgModule

Вы должны положить FormsModule до NgbModule, и не забудь NgbModule.forRoot() в вашем корневом модуле

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