Скрыть указатель даты только при нажатии за пределами

Я использую ng2-bootstrap datepicker в моем приложении angular2. И я хочу скрыть всплывающее окно выбора даты при нажатии снаружи. Я попробовал решение, предложенное в этом вопросе.

Но это не работает правильно, при выборе даты или переключении в диалог месяцев / лет, она закрывает средство выбора даты.

После исследования я обнаружил, что причиной этой проблемы является то, что цель события, возвращаемая при щелчке, изначально не была в элементе ref, а получена при щелчке с помощью ngIf в реализации компонента datepickers.

Вот плункер, решающий проблему.

Любые предложения, как решить эту проблему?

Источник

3 ответа

Решение

Вам нужно изменить событие нажатия на 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;
       }
    }
}

Проверьте этот поршень

Источник

Вот очень быстрое и простое решение, которое я сделал,

в вашем 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, потому что при внешнем щелчке по указателю даты вы всегда получаете имя offsetParent, отличное от "NGB-DATEPICKER". ' .

Надеюсь, это кому-нибудь поможет.

Источник

Вы можете прикрепить слушателя к событию click в окне. Это будет захватывать все клики.

Чтобы запретить закрытие средства выбора даты при щелчке по нему, вы можете добавить прослушиватель в средство выбора даты (или любой элемент, который не должен закрывать средство выбора даты) и вызвать stopPropagation для MouseEvent.

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);
}
Источник
Другие вопросы по тегам