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
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.
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.
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