p:calendar onselect/onchange not fired

Question

I am trying to have two Javascript functions that are being called as soon as a user selects a date from a p:calendar.

Unfortunately, the onchange event is only being processed if the user types a date manually in the text field and tabs forward. The onselect event is not being fired at all.

The xhtml is as follows:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    xmlns:p="http://primefaces.org/ui">
<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <h:outputScript library="js" name="custom.js" target="body" />
</h:head>
<h:body>
    <p:log />
    <h:form id="someForm">
        <p:panelGrid columns="2">
            <p:outputLabel for="myCalendar" value="Date: " />
            <p:calendar id="myCalendar" onchange="alertDateSelected()" onselect="alertSelectEvent()" showOn="button" />
        </p:panelGrid>
    </h:form>
</h:body>
</html>

The Javascript code for the onselect and onchange events:

function alertDateSelected() {
    PrimeFaces.info('Selected date from p:calendar');
}

function alertSelectEvent() {
    PrimeFaces.info('Clicked p:calendar date selection button');
}

Is there a possibility to hook to the onchange/onselect event on p:calendar; e.g. if the user selects a date from the calendar panel or via the "Today" button? If so, what am I doing incorrectly?

Are you sure your javascript is in the proper location and hence being properly loaded? You should be looking in your javascript console for clues — kolossus, Feb 17 '15 at 21:41
@kolossus Yes, I am sure. If you add ``, the onchange event gets fired and you can see the expected output in the PrimeFaces log. After adding a breakpoint to the function, the reported behaviour is confirmed: script stops if you deal with a `p:inputText` but does not stop if you deal with a `p:calendar`. Please let me know how to get clues from the console if the event does not get fired. Where am I to look for hints on that? — fatdevelops, Feb 18 '15 at 07:32

score 3 · Answer 1 · answered Feb 16 '15 at 15:37

3

Try it with ajax event lister. For example something like that:

        <p:calendar id="myCalendar">
            <p:ajax event="dateSelect" listener="alertDateSelected" global="false" />
        </p:calendar>

answered Feb 16 '15 at 15:37

Gatschet

1,337
24
38

Thanks, but I would like to have a quick dialog pop-up and do some basic CSS styling in the Javascript code. I would prefer to avoid doing this with some backing beans. How about that? – fatdevelops Feb 16 '15 at 16:33

score 3 · Answer 2 · answered Jan 16 '17 at 11:10

As of today, it's still not working in PrimeFaces 6.0.

The following approach uses the AJAX event instead. It calls the JavaScript method (PF('ordersTable').filter() in this case) when it starts and cancels it instantly via return false. This way it only executes the JavaScript code, but does not really send the AJAX request.

<p:calendar onchange="PF('ordersTable').filter()" onselect="PF('ordersTable').filter()">
    <!-- The JS onchange and onselect events don't work. We "misuse" an AJAX event instead. -->
    <p:ajax event="dateSelect" onstart="PF('ordersTable').filter();return false;" global="false" />
</p:calendar>

score 0 · Answer 3 · answered May 01 '18 at 17:09

<p:ajax event="dateSelect" oncomplete="clickButton('searchFormRegUser:searchButton')" />

The problem was that I kept onchange event defined inside p:calendar and also this one (it remained because I was trying out a few things and forgot to delete another one). When I deleted onchange from p:calendar, this worked. I know this is old, but maybe someone else has a similar problem, so I'm posting.

score 0 · Answer 4 · edited Dec 20 '20 at 12:57

0

Use onSelect instead of onChanged.

edited Dec 20 '20 at 12:57

double-beep

5,031
17
33
41

answered Dec 20 '20 at 12:40

Yael

9

p:calendar onselect/onchange not fired

4 Answers4