1

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

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

4

1 回答 1

3

首先，将 a 添加Viewchild到您的日历中，以便您可以操作它以编程方式打开它。

然后，在打开弹出窗口的方法中，调用showOverlay日历对象上的方法来打开它。

最后，用 a 包围最后一行代码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

于 2018-05-12T06:51:57.247 回答