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?
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();
}
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!
In your component.ts,
import { ViewChild } from '@angular/core';
@Component({
host: {
'(document:click)': 'closeDatepicker($event)',
}
})
export class MyComponent {
@ViewChild('d') eventDate;
closeDatepicker(e) {
if (!this.eventDate.isOpen() || (e.target.id === 'd' && e.target.id === 'dropdown-icon')
|| (e.target.offsetParent && e.target.offsetParent.localName.includes('ngb-datepicker'))
|| !(e.target.parentElement && e.target.parentElement.parentElement &&
!e.target.parentElement.parentElement.localName.includes('ngb-datepicker'))) {
return;
}
if (this.eventDate.isOpen() && e.target.id !== 'd' && e.target.id !== 'dropdown-icon') {
this.eventDate.close();
}
}
}