How to update model on change / date select of p:calendar [duplicate] - jsf

Question

I'm try to use the primefaces calendar with popup in this way:
<p:calendar pattern="yyyy-MMM-dd" value="#{controller.beginDate}" mask="true" navigator="true">
<f:ajax event="valueChange" listener="#{controller.onChange}" />
</p:calendar>
And here is the relative controller:
#ManagedBean
public class Controller {
private Date beginDate;
public Date getBeginDate() {
return beginDate;
}
public void setBeginDate(Date beginDate) {
this.beginDate = beginDate;
}
public void onChange() {
// do somethings
}
}
The problem: if I change the value from the input field, the event will be execute, but if I change it from the popup, the event will NOT execute.
Can anyone help me?

Answer 1

The valueChange event is only triggered by HTML DOM change event. This is indeed not triggered when the input value is manipulated by JavaScript means.
You need the dateSelect event instead. And, in PrimeFaces components, you'd better use <p:ajax> instead of <f:ajax>.
<p:calendar ...>
<p:ajax event="valueChange" listener="#{controller.onChange()}" />
<p:ajax event="dateSelect" listener="#{controller.onChange()}" />
</p:calendar>
See also:
PrimeFaces Users Guide

Answer 2

Try using the PrimeFaces dateSelect event.
From PrimeFaces documentation:
Calendar provides a dateSelect ajax behavior event to execute an instant ajax selection whenever a date is selected. If you define a method as a listener, it will be invoked by passing an org.primefaces.event.SelectEvent instance.
<p:calendar value="#{calendarBean.date}">
<p:ajax event="dateSelect" listener="#{bean.handleDateSelect}" />
</p:calendar>