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

【问题标题】：Close ng-bootstrap date picker when click outside in angular2在 angular2 中单击外部时关闭 ng-bootstrap 日期选择器
【发布时间】：2017-03-21 09:38:40
【问题描述】：

我正在使用 bootstrap4 datepicker 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">

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

【问题讨论】：

看看这个 - github.com/ng-bootstrap/ng-bootstrap/issues/783 - 我不确定问题是否已正确解决，因为似乎只添加了切换，但该线程中有一些解决方法。

标签： angular datepicker bootstrap-4 ng-bootstrap

【解决方案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();
}

【讨论】：

【解决方案2】：

当用户离开 div 时，您可以使用 on-mouseleave 事件关闭日期选择器

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

祝你有美好的一天！

【讨论】：

【解决方案3】：

在您的 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();
        }
      }
    }

【讨论】：

【解决方案4】：

这似乎是一个老问题，但也想分享我的解决方案。我们遇到了同样的问题，但我们使用的是 Angular Web Element，我们必须深入研究 DOM 元素才能找到 NGB-DATEPICKER 标记名。下面是 HTML 文件和打字稿代码

HTML

<button class="btn btn-outline-secondary calendar" (click)="yed.toggle();ysd.close();$event.stopPropagation();" 
                (document:click)="closeFix($event, yed)" type="button">
                    <i class="fa fa-calendar" aria-hidden="true"></i>
                </button>

类型脚本

closeFix(event, datePicker) {       
    if(event.target.offsetParent == null)
      datePicker.close();
    else if(this.clickedInNgbDatePicker(event.path))
      datePicker.close();      
  }

  clickedInNgbDatePicker(eventPath){
    let datePickerClicked = true; 
    eventPath.forEach(function(item){  
      datePickerClicked = (item.tagName != "NGB-DATEPICKER" && datePickerClicked)
    });
    return datePickerClicked;
  }

【讨论】：

【解决方案5】：

自 3.0.0 版本以来，此问题已通过 [autoclose]="'outside'" 解决

<input type="text" ngbDatepicker #d="ngbDatepicker" [autoclose]="'outside'"/>

documentation

【讨论】：