ng-bootstrap datepicker not working

user_5124753 0
Viewed 16078

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

ng-bootstrap angular datepicker
5 Answers

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.

user_49421650

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

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