OverlayPanel + Calendar + Primefaces

Question

I am using primefaces 3.4, I have a p:calendar inside a p:overlaypanel. When I select a date the overlaypanel closes (when using Google Chrome) and when using Firefox when I click 'close' in the calendar the overlaypanel closes too.

What can I do to solve this?

My code is like this:

<p:overlayPanel for="btnOP" hideEffect="fade">

    <p:panel id="panelTest">

      <p:calendar id="calendarOne"  pattern="dd/MM/yyyy HH:mm"
          value="#{bean.value}" showOn="button" validator="dateValidator">
      </p:calendar> 

    </p:panel>

</p:overlayPanel>

the <p:overlayPanel> is between the form.. I realize that when I click in any part of the calendar that is off of the overlaypanel, this happens.. cause when I click to show calendar, a part of the calendar is showed off of the overlaypanel (it's ok so far, but when I click in a date in that part, the overlaypanel closes).. — jpntsmrtns

Ricardo Barato Ricardo Barato · Accepted Answer · 2013-09-16T18:21:22

this probably must be solved by now but anyway this was my approach when faced with the same issue. My markup is almost identical (with only an extra <div> around the overlayPanel) and with some digging I found this: on the overlayPanel component you unbind the mouse click so it won't close natively:

onShow="$(document.body).unbind('mousedown.ui-overlay')"

(Source: Don't hide OverlayPanel on click)

Then, I wrote some custom Javascript to check what element the click event is targeting and if the calendar component is visible, follows:

$(document).click(
    function(e) {
        var target = e.target;

        if (!$(target).parents().is('div#overlay-panel') && !$('div#ui-datepicker-div').is(':visible')) {
            $('div.overlay-panel-classname').hide('fade', 100);
        }

    });

This turned out working smoothly (with some other improvements that I made on my side but essentially this is it).

EDIT:

On the hide event, I've added a toggleClass statement so this won't mess with the trigger button behavior:

$('div.verlay-panel-classname').hide('fade', 300, function() {
     $(this).toggleClass('ui-overlay-hidden ui-overlay-visible');
});

OverlayPanel + Calendar + Primefaces

1 Answers