我正在使用 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
?
最佳答案
是的,我遇到了同样的问题......这对我来说效果很好:
组件 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();
}
关于angular - 在 angular2 中单击外部时关闭 ng-bootstrap 日期选择器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42923201/