CODEWITHSUNDEEP
angulardatepickerng-bootstrap
Shailendra
Shailendra

Reputation: 548

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

Upvotes: 6

Views: 19149

Answers (5)

Shakir Naeem
Shakir Naeem

Reputation: 1

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

Upvotes: 0

user1519240
user1519240

Reputation: 2354

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

Upvotes: 5

Steffi Keran Rani J
Steffi Keran Rani J

Reputation: 4113

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

Upvotes: 3

Iter Ator
Iter Ator

Reputation: 9334

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

Upvotes: 3

Peter Spireng
Peter Spireng

Reputation: 139

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.

Upvotes: 13

Related Questions