CODEWITHSUNDEEP
angulartypescriptprimengprimeng-calendarprimeng-dialog
Newbie007
Newbie007

Reputation: 169

Programmatically open PrimeNG calendar in modal popup

How to make PrimeNG calendar at open state by default in modal popup ? Or how to trigger click event to open PrimeNG calendar which is in modal popup by typescript ?

If I used in HTML itself, it triggers the click event to open calendar by showoverlay(), but when using in modal popup, since popup is not in DOM element, it shows error as showoverlay() is not a function.

Upvotes: 2

Views: 4877

Answers (1)

Antikhippe
Antikhippe

Reputation: 6665

First, add a Viewchild to your calendar so that you can manipulate it to open it programmatically.

Then, inside your method which opens the popup, call the showOverlay method on your calendar object to open it.

Finally, surround this last line of code with a setTimout to delay its call.

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);
}

See StackBlitz

Upvotes: 4

Related Questions