[FIXED] Open PrimeNG calendar programmatically


I’m using the PrimeNG components w/Angular 4 but I’m running into an issue – that is how do I display the calendar when my button is clicked?

See Plunker

selector: 'my-app',
  template: `
      <h2>Hello {{name}}</h2>
      <button pButton type="button" (click)="openCalendar($event)" label="Open Calendar"></button>
      <p-calendar #calendar [(ngModel)]="value"></p-calendar>
export class App {
  name: string;
  value: Date;

  calendar: any;

  constructor() {
    this.name = `Angular! v${VERSION.full}`

  openCalendar(event: any) {

I have tried getting the template element reference using @ViewChild('calendar'). I have also tried applying focus using @ViewChild('calendar#inputfield') but that doesn’t work.

Any idea how to click a button to programmatically open the calendar?


You can use showOverlay method on primeng calendar

openCalendar(event: any) {

Modified Plunker

Answered By – yurzui

Answer Checked By – Laura B. (Easybugfix Admin)

Leave a Reply

(*) Required, Your email will not be published