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

Post all the relevant code, showing you have installed ng-bootstrap correctly in your app (your app module) — JB Nizet, Nov 12 '17 at 10:48
read careful instaltion guide. Remember include NgbModule.forRoot() OR NgbModule in the provider of the module that include your component -if it's the main module or not- — Eliseo, Nov 12 '17 at 12:34

score 13 · Answer 1 · answered Nov 20 '17 at 07:52

13

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.

answered Nov 20 '17 at 07:52

Peter Spireng

139
4

3

This should be a comment instead an answer – Cleptus Nov 20 '17 at 08:00

score 5 · Answer 2 · answered Dec 21 '18 at 10:07

5

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

answered Dec 21 '18 at 10:07

user1519240

2,186
1
22
20

score 3 · Answer 3 · answered Mar 10 '18 at 22:41

3

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

answered Mar 10 '18 at 22:41

Iter Ator

8,226
20
73
164

score 3 · Answer 4 · answered Apr 14 '18 at 19:25

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

forRoot is deprecated: 3.0.0. Importing with `.forRoot()` is no longer necessary, you can simply import the module. Will be removed in 4.0.0. ie; you have to mention only `NgbModule` in `imports` — Jacob Nelson, Feb 26 '19 at 10:11

score 0 · Answer 5 · edited Mar 17 '20 at 09:26

0

Add property autoClose="inside" and paste code in 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();
   }
});

edited Mar 17 '20 at 09:26

Viral

935
1
9
22

answered Mar 17 '20 at 07:52

Shakir Naeem

1

Welcome to Stack Overflow. To make it easy for others to read your questions and answers, please use code formatting. – dspencer Mar 17 '20 at 09:19

ng-bootstrap datepicker not working

5 Answers5

Linked