web-dev-qa-db-fra.com

ng-bootstrap datepicker ne fonctionne pas

J'essaie d'utiliser le sélecteur de date ng-bootstrap dans mon projet angular2 mais j'obtiens l'erreur suivante.

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

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

Toute aide serait appréciée

angulardatepickerng-bootstrap
4
Shailendra

J'ai eu le même problème. Dans mon cas, il manquait l'importation NgbModule dans le module où la directive était utilisée. Vérifiez donc que vous importez NgbModule.forRoot () dans le module de messagerie et NgbModule dans chaque module pour utiliser datapicker.

9
Peter Spireng

Vérifiez l'ordre des importations dans votre @NgModule

Vous devez mettre FormsModule avant NgbModule et ne pas oublier NgbModule.forRoot() dans votre module racine

2
Iter Ator

La solution à ce problème est très simple. Dans le répertoire de votre projet, localisez le fichier app.module.ts , qui est le AppModule (module racine)}. 

Dans ce fichier, sous @NgModule , il y aura un imports array. Ajoutez FormsModule et NgbModule.forRoot () comme indiqué ci-dessous.

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 { }
1
Steffi Keran Rani J

Afin d'ouvrir le datepicker sur l'événement focus, vous devez ajouter (focus)="d.open()" comme ci-dessous:

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