Primeng: Visible property to calendar

[chrillewoodz]

I'm submitting a ... (check one with "x")

[ ] bug report => Search github for a similar issue or PR before submitting
[x ] feature request => Please check if request is not on the roadmap already https://github.com/primefaces/primeng/wiki/Roadmap
[ ] support request => Please do not submit support request here, instead see http://forum.primefaces.org/viewforum.php?f=35

Expected behavior
Provide an input/method for closing the calendar upon selecting a date.

What is the motivation / use case for changing the behavior?
Especially on mobile devices it's horrible UX since the datepicker takes up so much space on the screen. It's hard to close it manually.

[upmauro]

Now the calendar close after the date is selected. I tried and worked here.

Look https://github.com/primefaces/primeng/blob/master/components/calendar/calendar.ts#L463
and https://github.com/primefaces/primeng/blob/master/components/calendar/calendar.ts#L816 and https://github.com/primefaces/primeng/blob/master/components/calendar/calendar.ts#L1163

[VictorDeBlas]

And if I want to close the calendar manually? For example, when a resize event succeeds.

Thanks.

[alejandrohn]

How close the calendar manually? When calendar is inside a pop up not close when a date is selected?

[cagataycivici]

We can expose overlayVisible

[timvl]

You can create a viewchild and set the 'overlayVisible' property manually:

In your template add a template reference variable:

<p-calendar #myCalendar ... 

In your controller access the overlayVisible property:

@ViewChild('myCalendar') datePicker;

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

[SSTPIERRE2]

Did this used to work or was it just not tested with selectionMode="range"? There is a bug where if you use this property to "programmatically hide" the calendar, the overlay stays open and you can't click anything on the page (due to its z-index). See my stackblitz demo: https://vbwilqlo.github.stackblitz.io I will open an issue...