我试图让用户从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>