Question

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

但它没有正常工作，在选择日期或切换到月/年对话框时，它会关闭日期选择器。

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

这是解决问题的plunker。

有任何建议如何解决这个问题？。

Answer 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

Answer 2

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

要防止datepicker在点击时关闭，您可以向datepicker（或任何不应该关闭datepicker的元素）添加一个监听器，并在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);
}

Answer 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();
  }
}

说明：收听文档点击事件并检查目标偏移父元素是否为空，并且其标记名称不等于＆＃39; NGB-DATEPICKER＆＃39;因为在外部点击datepicker你总是得到不同的offsetParent名称而不是＆＃39; NGB-DATEPICKER＆＃39;

希望这有助于某人。

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

3 个答案: