Question

如何在模态弹出窗口中默认将PrimeNG日历设置为打开状态？或者如何触发点击事件以打开由打字稿进行模态弹出的PrimeNG日历？

如果我在HTML本身使用，它会触发click事件以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日历

1 个答案: