我试图让用户从p:calendar选择日期后立即调用两个Javascript函数。

不幸的是,仅当用户在文本字段中手动输入日期并向前移动标签时,才会处理onchange事件。完全不触发onselect事件。

xhtml如下:

<!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>

onselect和onchange事件的Javascript代码:
function alertDateSelected() {
    PrimeFaces.info('Selected date from p:calendar');
}

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

是否有可能挂接到p:calendar上的onchange / onselect事件;例如用户是从日历面板还是通过“今天”按钮选择日期?如果是这样,那我做错了什么?

最佳答案

尝试使用ajax事件监听器。例如这样的:

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

09-25 19:15