在模式弹出窗口中以编程方式打开 PrimeNG 日历

Question

如何让PrimeNG日历在模态弹窗中默认打开状态？或者如何触发点击事件以通过打字稿打开模态弹出窗口中的 PrimeNG 日历？

如果我在 HTML 本身使用，它会触发单击事件以通过 showoverlay() 打开日历，但是在模态弹出窗口中使用时，由于弹出窗口不在 DOM 元素中，它显示错误，因为 showoverlay() 不是函数。

Answer 1

首先，将 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

在模式弹出窗口中以编程方式打开 PrimeNG 日历

Programmatically open PrimeNG calendar in modal popup

typescript

primeng

angular

primeng-dialog

primeng-calendar