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

Question

我正在使用 ng2-bootstrap datepicker in my angular2 application. And I want to hide the datepicker popup on clicking outside. I tried the solution suggested in this 。

，但是在选择日期或切换到months/year对话框时，它无法正常工作，它会关闭datepicker。

经过调查我发现这个问题的原因是点击返回的事件目标最初不在元素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

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

要防止日期选择器在点击时关闭，您可以向日期选择器（或任何不应关闭日期选择器的元素）添加一个侦听器，并在 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

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

in your html file

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

in your component.ts file

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

说明：监听文档点击事件，检查目标偏移父元素不为null，以及标签名不等于'NGB-DATEPICKER'，因为在 datepicker 的外部点击你总是得到与 'NGB-DATEPICKER' 不同的 offsetParent 名称。

希望这对某人有所帮助。

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

Hide the datepicker only when clicking outside

datepicker

ng2-bootstrap

angular