angular - 在 angular2 中单击外部时关闭 ng-bootstrap 日期选择器

Question

我正在使用 bootstrap4 日期选择器 https://ng-bootstrap.github.io/#/components/datepicker

我想在日历外部单击时关闭 datepicker。现在，当用户选择日期时，它将关闭。

我的 HTML 文件代码如下:

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

我尝试在 body 标签中添加 (click)="d.close();" 。但是当我尝试从日历更改月份和年份时，它也很接近。
当用户在日历外部单击时，我必须在 HTML 或 component 中做哪些更改才能关闭此 datepicker？

Answer 1

是的，我遇到了同样的问题......这对我来说效果很好:

组件 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>

和 TS(您唯一需要的是 closeFix() 函数):

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