使用showTime选择日期后如何隐藏PrimeNG日历

Question

I am facing issue with PrimeNG Calendar. I have searched lot but not find any clue and this question already asked in StackOverflow but not proper answer given.

When I select date after that calendar is not hide.

my html code:

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

and just bind formControl Start with this calendar.

Please, help me to solve this issue.

Answer 1

you have to make below changes it will work for you,

in your component, import ViewChild from @angular/core and Calendar from primeng/primeng

@ViewChild('myStartCalendar') startCalendar: Calendar;

ngOnInit() {
    this.calendarOnDateSelectHandler = this.startCalendar.onDateSelect;
    this.startCalendar.onDateSelect = ((event: any, dateMeta: any) => { 
    this.onStartDateSelectExtention(event, dateMeta); });
 }

private onStartDateSelectExtention(event: any, dateMeta: any): void {
    this.calendarOnDateSelectHandler.call(this.startCalendar, event, dateMeta);
    if (this.startCalendar.isSingleSelection()) {
        this.startCalendar.overlayVisible = false;
    }
}

then put the myStartCalendar in your primeng calendar in html as like below code:

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