Скрыть средство выбора даты только при нажатии снаружи

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

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

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

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

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


angular datepicker ng2-bootstrap
person Salma Hamed    schedule 18.11.2016    source источник
comment
можешь еще раз протестировать? я сохранил изменения...   -  person AMagyar    schedule 18.11.2016

Ответы (3)


arrow_upward
3
arrow_downward

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

Проверьте этот плункер

person AMagyar    schedule 18.11.2016
comment
это не устраняет проблему, которую я решил, она по-прежнему скрывает средство выбора даты при выборе даты. Я хочу, чтобы средство выбора даты скрывалось только при нажатии снаружи. - person Salma Hamed; 18.11.2016
comment
проверьте еще раз, я забыл сохранить... извините :P - person AMagyar; 18.11.2016
comment
Спасибо за ваше решение, это было очень полезно! - person shulamit chatamov; 29.10.2020

arrow_upward
0
arrow_downward

Вы можете прикрепить прослушиватель к событию щелчка в окне. Это зафиксирует все клики.

Чтобы средство выбора даты не закрывалось при щелчке по нему, вы можете добавить прослушиватель в средство выбора даты (или любой элемент, который не должен закрывать средство выбора даты) и вызвать 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);
}
person Drast    schedule 18.11.2016

arrow_upward
0
arrow_downward

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

в вашем 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' .

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

person Montu Patel    schedule 02.12.2017