ng-bootstrap datepicker not working

问题

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

回答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.

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

回答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 { }

回答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"/>

来源：https://stackoverflow.com/questions/47247853/ng-bootstrap-datepicker-not-working

标签

angular

datepicker

ng-bootstrap