ng-bootstrap datepicker not working

Question

I am trying to use ng-bootstrap date picker in my angular2 project but getting following error.

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

Here is my code

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

Any help would be appriciated

Answer 1

I had same problem. In my case it was missing NgbModule import in module where directive was in use. So, double check that you import NgbModule.forRoot() in mail module and NgbModule in every module tak use datapicker.

Answer 2

Check the order of imports in your @NgModule

You have to put FormsModule before NgbModule, and do not forget NgbModule.forRoot() in your root module

Answer 3

The solution to this issue is very simple. In your project directory, locate the file named app.module.ts which is the AppModule (root module).

In that file, under @NgModule, there will be an imports array. Add FormsModule and NgbModule.forRoot() in it just like given below.

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

In order to open the datepicker on focus event, you need to add (focus)="d.open()" like below:

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