0

i use the component Calender of PrimeNG version 6. Angular Version 9. Is there a function if, for example, I click on the datepicker from the name-input-field from there and the date field opens and I click the focus on Name again, the datepicker closes? Focusout only works when I'm in the date input field. I would like to close the datepicker when another field has focus. I already use the focusout.

(focusout)="close()"
chan dee
  • 1
  • 2

1 Answers1

0

see the methods of Calendar

You find toggle method, so the only is call this method. For this, from the .html you can use a template reference variable and use,e.g.

<p-calendar #myvariable inputId="basic" [(ngModel)]="date1"></p-calendar>

<button (click)="myvariable.toggle()">click</button>

Is you want to do from code, you use ViewChild to "get" the p-calendar

@ViewChild('myvariable') calendar:any;
//and in any place
this.calendar.toggle()

Update we can check if is open using some like

<input (focus)="myvariable.overlayVisible && myvariable.toggle()">

See the stackblitz

Eliseo
  • 50,109
  • 4
  • 29
  • 67
  • click Event only works if data-input was clicked. I would like to close the datepicker when another field has focus. If i click another inputfield, – chan dee Aug 26 '21 at 08:11
  • @chandee, don't work some like ``? see a [simple stackblitz](https://stackblitz.com/edit/primeng-calendar-demo-9xbkcv?file=src%2Fapp%2Fapp.component.html) – Eliseo Aug 26 '21 at 08:38
  • toggle is not supported for primeNG version 6. – chan dee Aug 26 '21 at 09:51
  • try `hideOverlay()` to hide and `showOverLay()` to show it – Eliseo Aug 26 '21 at 10:27