2

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.

Antikhippe
  • 6,316
  • 2
  • 28
  • 43
Newbie007
  • 169
  • 1
  • 5
  • 13

1 Answers1

4

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

Antikhippe
  • 6,316
  • 2
  • 28
  • 43
  • When using p-dialog, had an error that p-dialog is not known element, when analysed, it needs to upgrade my angular-cli version, but if i did that, it affected some other components. So can you tell me that how to achieve the Programmatically open PrimeNG calendar in modal popup in ngx-bootstrap or else is there any way to use p-dialog without upgrade?. – Newbie007 May 15 '18 at 10:56
  • Have you imported `DialogModule` in your `AppModule` file ? Which version of PrimeNG do you use ? – Antikhippe May 15 '18 at 11:07
  • yes, imported but missed to add in imports, it works now. Thank you! – Newbie007 May 15 '18 at 11:54