Manually closing the p-calendar datepicker

Question

I am using PrimeNg <p-calendar> and have [touchUI]="true" and [showTime]="true"

This brings up a datePicker with an overlay blocking out the rest of the webpage. All this works fine. Except after a date and time are picked the only way to close the datePicker and remove the overlay is to click outside of the datePicker. What I need is a place for the user to click to close the datePicker and remove the overlay.

I have a button by including <p-footer> I was also able to use a @ViewChild decorator to access to the overlayVisible property and manually set it to false.

This does close the datePicker, but unfortunately it leaves the overlay blocking the entire page until it is refreshed.

I'm sure this is a simple fix, but it has me stumped.

In my component

@ViewChild('myCalendar') datePicker;

close() {
  this.datePicker.overlayVisible = false;
}

html

<p-calendar #myCalendar
  formControlName="tsClockIn"
  [showIcon]="true"
  [touchUI]="true"
  [showTime]="true">
  <p-footer>
    <button pButton type="button" label="Close" (click)="close()"></button>
  </p-footer>
</p-calendar>

Answer 1

was facing the same issue and tried all the suggestions mentioned, but none worked for me. After hacking around, the following worked for me :)

        <p-calendar monthNavigator="true" showTime="true"
                    [minDate]="minDate"
                    [readonlyInput]="true"
                    [showIcon]="true"
                    formControlName="departDate"
                    touchUI=true
                    #calendar
                    required>
            <p-footer>
                <button pButton type="button" label="Close" 
                   (click)="calendar.hideOverlay()">
                </button>
            </p-footer>
        </p-calendar>