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

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

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

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

这是一个plunker解决这个问题。

有什么建议如何解决这个问题？

来源

2016-11-18 Salma Hamed

你能再次测试吗？我保存了更改... – AMagyar

您需要将点击事件更改为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

来源

2016-11-18 15:33:32 AMagyar

这不能解决我所解决的问题，它在选择日期时仍隐藏日期选择器。我希望日期选择器仅在外部点击时隐藏。 –

再次检查，我忘了保存...对不起：P – AMagyar

你可以监听器连接到窗口上单击事件。这将捕获所有点击。

要防止日期选择器在点击它时被关闭，您可以将侦听器添加到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); 
}

来源

2016-11-18 17:09:40 Drast

这是非常快速和简单的解决方案，我都做了，

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

说明：听文档单击事件和检查，有针对性偏移父元素不是null，以及它的标签名称不等于“NGB-日期选择器”，因为日期选择器之外点击一下，你总能得到不同的offsetParent名字比'NGB-DATEPICKER'。

希望这可以帮助别人。

来源

2017-12-02 14:11:25

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

回答

相关问题