Программно открыть календарь PrimeNG в модальном всплывающем окне - PullRequest
Новая
       12

Программно открыть календарь PrimeNG в модальном всплывающем окне

0 голосов
/ 11 мая 2018

Как сделать календарь PrimeNG в открытом состоянии по умолчанию в модальном всплывающем окне? Или как вызвать событие клика, чтобы открыть календарь PrimeNG, который находится в модальном всплывающем окне по машинописи?

Если я использовал сам HTML, он вызывает событие щелчка, чтобы открыть календарь на showoverlay(), но при использовании в модальном всплывающем окне, поскольку всплывающее окно отсутствует в элементе DOM, отображается ошибка, поскольку showoverlay() не является функцией.

1 Ответ

0 голосов
/ 12 мая 2018

Сначала добавьте Viewchild в свой календарь, чтобы вы могли манипулировать им, чтобы открыть его программным способом.

Затем, внутри вашего метода, который открывает всплывающее окно, вызовите метод showOverlay для вашего объекта календаря.чтобы открыть его.

Наконец, заключите в последнюю строку кода setTimout, чтобы отложить его вызов.

HTML 

<p-dialog header="Title" [(visible)]="display" [width]="500" [height]="500">
    <div class="row" style="height:300px;">
        Select a date
        <p-calendar #myCalendar [(ngModel)]="value"></p-calendar>
    </div>
</p-dialog>

<button type="text" (click)="showDialog()" pButton icon="fa-external-link-square" label="Choose date"></button>

Ts 

@ViewChild('myCalendar') calendar;

display: boolean = false;

showDialog() {
    this.display = true;
    setTimeout(() => {
      this.calendar.showOverlay(this.calendar.nativeElement);
    }, 0);
}

См. StackBlitz

...