在模式弹出窗口中以编程方式打开 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