仅在单击外部时隐藏日期选择器答案

【问题标题】：Hide the datepicker only when clicking outside仅在单击外部时隐藏日期选择器
【发布时间】：2016-11-18 12:58:51
【问题描述】：

我在 angular2 应用程序中使用 ng2-bootstrap datepicker。我想在点击外部时隐藏日期选择器弹出窗口。我尝试了question 中建议的解决方案。

但它不起作用，在选择日期或切换到月份/年对话框时，它将关闭DatePicker。

经过调查，我发现这个问题的原因是点击时返回的事件目标最初不在元素ref中，而是在datepickers组件实现中使用ngIf点击时获得的。

这里是plunker 解决问题。

有什么建议可以解决这个问题吗？

【问题讨论】：

你能再测试一下吗？我已保存更改...

标签： angular datepicker ng2-bootstrap

【解决方案1】：

你需要将点击事件改为mousedown。

import {Component, Input, Output, ElementRef} from '@angular/core';

@Component({
    selector: 'my-datepicker',
    host: {
        '(document:mousedown)': 'onClick($event)',
    },
    template: `
      <label>{{label}}</label>
      <input [(ngModel)]="dateModel" class="form-control" (focus)="showPopup()" />
      <datepicker class="popup" *ngIf="showDatepicker" [(ngModel)]="dateModel" [showWeeks]="true"></datepicker>
  `,
    styles: [`
    .popup {
      position: absolute;
      background-color: #fff;
      border-radius: 3px;
      border: 1px solid #ddd;
      height: 251px;
    }
  `],
})
export class DatepickerComponent {
    @Input() dateModel: Date;
    private showDatepicker: boolean = false;

    constructor(private _eref: ElementRef) { }

    showPopup() {
        this.showDatepicker = true;
    }

    onClick(event) {
       if (!this._eref.nativeElement.contains(event.target)) {
           this.showDatepicker = false;
       }
    }
}

Check out this plunker

【讨论】：

这并不能解决我解决的问题，它仍然在选择日期时隐藏了日期选择器。我希望日期选择器仅在单击外部时隐藏。
再检查一次，我忘记保存了...对不起：P
tnx 为您的解决方案，非常有帮助！

【解决方案2】：

您可以将侦听器附加到窗口上的单击事件。这将捕获所有点击。

为防止点击日期选择器时关闭它，您可以向日期选择器（或任何不应关闭日期选择器的元素）添加一个侦听器，并在 MouseEvent 上调用 stopPropagation。

constructor(private el: ElementRef) {
    this.el.nativeElement.onclick = (ev: MouseEvent) => {
        ev.stopPropagation(); //Do not close Datepicker
    };
    window.addEventListener("click", this.handleClick);
}

handleClick = (ev: MouseEvent) => {
    this.showDatepicker = false;
};

ngOnDestroy() { //Do not forget to remove the listener
    window.removeEventListener("click", this.handleClick);
}

【讨论】：

【解决方案3】：

这是我已经完成的非常快速和简单的解决方案，

在您的 html 文件中

<div class="input-group">
      <input class="form-control" placeholder="yyyy-mm-dd"
             name="dp" [(ngModel)]="model" ngbDatepicker [dayTemplate]="customDay" [markDisabled]="isDisabled" #datepicker="ngbDatepicker">
      <button class="input-group-addon" (click)="d.toggle()" type="button">
        <img src="img/calendar-icon.svg" style="width: 1.2rem; height: 1rem; cursor: pointer;"/>
      </button>
    </div>

在您的 component.ts 文件中

// local reference varible of datepicker input
@Viewchild('datepicker') datepicker;

// listen to document click event and handle closeDponOutsideClick event
@HostListener('document:click', ['$event'])
closeDponOutsideClick(event) {
if (event.target.offsetParent !== null && event.target.offsetParent.tagName !== 'NGB-DATEPICKER') {
this.datepicker.close();
  }
}

描述：监听文档点击事件并检查目标偏移父元素不为空，以及它的标签名称不等于'NGB-DATEPICKER'，因为你在外部点击日期选择器总是得到与 'NGB-DATEPICKER' 不同的 offsetParent 名称。

希望这对某人有所帮助。

【讨论】：