How to close the p- calender after selecting date

Question

I have used prime ng calender, when i select the date, the calender is not closing How do i close the calender after selecting date.

HTML:

 <p-calendar [monthNavigator]="true" [yearNavigator]="true" yearRange="1910:2020" showButtonBar="true" showTime="true" dateFormat="mm-dd-yy"
              placeholder="mm-dd-yyyy" formControlName="End" [minDate]="yesterday" class="pull-left"></p-calendar>

For reference i am adding link

https://stackblitz.com/edit/angular-vjupfn?file=src%2Fapp%2Fapp.module.ts

Answer 1

Since it is popup, inline is not set to true, it must close when date is picked. I'd remove one by one attribute for test. Check also the console in case some errors are logged.

---

update: you are missing some required modules for angular application. Console:

Please include either "BrowserAnimationsModule" or "NoopAnimationsModule" in your application.

This is not related to p-calendar. p-calendar is not rendered.

---

update2: you have primeng v6 and angular v7. They don't match. I'd try it with angular v6 or if there is primeng v7 for angular v7.

Answer 2

Example from primeng calendar demo works in your example, just add:

<div><p-calendar [(ngModel)]="date1"></p-calendar></div>

or, in your example:

<div><p-calendar [(ngModel)]="date1" showTime="true" hideOnDateTimeSelect="true" ></p-calendar></div>

So, since showTime property is used, you need hideOnDateTimeSelect="true" for the behaviour you've described.

Answer 3

I have the same problem with working prime ng controls version v7 angular 6

You can just add hideOnDateTimeSelect="true" in to your input code and automatically it will disappear after selection of date and time