Close ng-bootstrap date picker when click outside in angular2

Question

I am using bootstrap4 datepicker https://ng-bootstrap.github.io/#/components/datepicker

I want to close datepicker when click outside of calendar. Right now when user select date then it will close.

My HTML file code is below:

<input ngbDatepicker #d="ngbDatepicker" (click)="d.toggle();" [formControl]="eventForm.controls['event_date']" value="12/03/2017" type="text" [readonly]="true" autocomplete="off">  

I try to adding (click)="d.close();" in body tag. But it's also close when i try to change month and year from calendar.
What change i have to do either in HTML or component to close this datepicker when user click outside of calendar?

Solution 1

Yea, I had the same problem... This works well for me:

component HTML:

<input placeholder="{{ task.deadline.year }}-{{ task.deadline.month }}-{{ task.deadline.day }}" name="date" id="date" [(ngModel)]="task.deadline" ngbDatepicker  #d="ngbDatepicker" (click)="!completed && d.toggle(); $event.stopPropagation();" (document:click)="closeFix($event, d)" readonly>

and the TS (the only thing that you need is the closeFix() function):

closeFix(event, datePicker) {
  if(event.target.offsetParent == null)
    datePicker.close();
  else if(event.target.offsetParent.nodeName != "NGB-DATEPICKER")
    datePicker.close();
}

Solution 2

You can use the on-mouseleave event to close the datepicker when the user leave the div

<input on-mouseleave="d.close()" ngbDatepicker #d="ngbDatepicker" (click)="d.toggle();" [formControl]="eventForm.controls['event_date']" value="12/03/2017" type="text" [readonly]="true" autocomplete="off">  

Have a nice day!