Dialog on PrimeFaces does not update and calculate date difference - ajax

Question

Dialog on PrimeFaces does not update and calculate date difference in my dialog page.
Dialog page:
<p:dialog id="GrupoCreateDlg" widgetVar="GrupoCreateDialog" modal="true" resizable="false" appendTo="#(body)" header="#{bundle.CreateGrupoTitle}">
<h:form id="GrupoCreateForm">
<h:panelGroup id="display">
<p:panelGrid columns="2" rendered="#{grupoController.selected != null}">
<p:outputLabel value="#{bundle.CreateGrupoLabel_grupo}" for="grupo" />
<p:inputText id="grupo" value="#{grupoController.selected.grupo}" title="#{bundle.CreateGrupoTitle_grupo}" required="true" requiredMessage="#{bundle.CreateGrupoRequiredMessage_grupo}"/>
<p:outputLabel value="#{bundle.CreateGrupoLabel_usuario}" for="usuario" />
<p:inputText id="usuario" value="#{grupoController.selected.usuario}" title="#{bundle.CreateGrupoTitle_usuario}" required="true" requiredMessage="#{bundle.CreateGrupoRequiredMessage_usuario}"/>
<p:outputLabel value="#{bundle.CreateGrupoLabel_clave}" for="clave" />
<p:inputText id="clave" value="#{grupoController.selected.clave}" title="#{bundle.CreateGrupoTitle_clave}" required="true" requiredMessage="#{bundle.CreateGrupoRequiredMessage_clave}"/>
<p:outputLabel value="#{bundle.CreateGrupoLabel_detalle}" for="detalle" />
<p:inputText id="detalle" value="#{grupoController.selected.detalle}" title="#{bundle.CreateGrupoTitle_detalle}" />
<p:outputLabel value="#{bundle.CreateGrupoLabel_fechainicio}" for="fechainicio" />
<p:calendar id="fechainicio" pattern="dd/MM/yyyy" value="#{grupoController.selected.fechainicio}" title="#{bundle.EditGrupoTitle_fechainicio}"
locale="es" showOn="button" showButtonPanel="true"/>
<p:outputLabel value="#{bundle.CreateGrupoLabel_fechafin}" for="fechafin" />
<p:calendar id="fechafin" pattern="dd/MM/yyyy" value="#{grupoController.selected.fechafin}" title="#{bundle.EditGrupoTitle_fechafin}"
locale="es" showOn="button" showButtonPanel="true">
<p:ajax event="change" update="dias"/>
</p:calendar>
<p:outputLabel value="Dias"/>
<h:outputText id="dias" value="#{grupoController.calcularFechas()}">
<f:convertNumber type="number"/>
</h:outputText>
<p:outputLabel value="#{bundle.CreateGrupoLabel_incidencia}" for="incidencia" />
<p:selectBooleanCheckbox id="incidencia" value="#{grupoController.selected.incidencia}" />
<p:outputLabel value="#{bundle.CreateGrupoLabel_fechaincidencia}" for="fechaincidencia" />
<p:calendar id="fechaincidencia" pattern="dd/MM/yyyy" value="#{grupoController.selected.fechaincidencia}" title="#{bundle.EditGrupoTitle_fechaincidencia}"
locale="es" showOn="button" showButtonPanel="true"/>
<p:outputLabel value="#{bundle.CreateGrupoLabel_fechaavisocaducidad}" for="fechaavisocaducidad" />
<p:calendar id="fechaavisocaducidad" pattern="dd/MM/yyyy HH:mm:ss" value="#{grupoController.selected.fechaavisocaducidad}" title="#{bundle.EditGrupoTitle_fechaavisocaducidad}"
locale="es" showOn="button" showButtonPanel="true"/>
</p:panelGrid>
<p:commandButton actionListener="#{grupoController.create}" value="#{bundle.Save}" update="display,:GrupoListForm:datalist,:growl" oncomplete="handleSubmit(args,'GrupoCreateDialog');"/>
<p:commandButton value="#{bundle.Cancel}" onclick="GrupoCreateDialog.hide()"/>
</h:panelGroup>
</h:form>
</p:dialog>
Groupo controller:
public int calcularFechas() throws ParseException {
diasDuracion = 0;
try {
SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd");
Date fechaFinal = selected.getFechainicio();
Date fechaInicial = selected.getFechainicio();
diasDuracion = (int) ((fechaFinal.getTime() - fechaInicial.getTime()) / 86400000);
System.out.println("Hay " + diasDuracion + " dias de diferencia");
} catch (NullPointerException e) {
e.printStackTrace();
}
return diasDuracion;
}
The HTML must be show the difference between date initial and finish (on days) in the outputText.
What's wrong?
The outputText dias must be update without close the dialog page.

Answer 1

I copy and paste your stuff into my project and edit it like that:
Put the calcularFechas() into
<p:ajax event="change" update="dias" listener="#{grupoController.calcularFechas()"/>
and write a method
getCalcularFechas(){ ...
}
It worked for me like that because the listener was called after the event was fired.