Value Change listener not working in primefaces calendar

Question

I am using primefaces 3.2 and JSF 2.0

My scenario is I have file date, last date and next date in my form. When user enters file date I need to update file date valu

Answer 1

In more recent versions of PrimeFaces, SelectEvent should be usedsee the following code snippet

<p:calendar id="event" value="#{calendarView.date4}">
    <p:ajax event="dateSelect" listener="#{calendarView.onDateSelect}" update="msgs" />
</p:calendar>

public void onDateSelect(SelectEvent event) {
    FacesContext facesContext = FacesContext.getCurrentInstance();
    SimpleDateFormat format = new SimpleDateFormat("dd/MM/yyyy");
    facesContext.addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Date Selected", format.format(event.getObject())));
}

In older primefaces versions use DateSelectEvent

<p:ajax event="dateSelect" listener="#{caseUitility.dateChange}"/>

public void dateChange(DateSelectEvent event) {
    Date date = event.getDate();
    System.out.println("File Date: " + date);
    System.out.println("Hello... I am in DateChange");
}

Answer 2

You can use onstart and oncomplete (does not appear in primefaces doc).

I solved with that:

<p:calendar
      id="fromDate"
      value="#{reportBean.fromDate}"
      pattern="dd/MM/yyyy"
      locale="es"
      maxdate="#{reportBean.untilDate}">
      <p:ajax event="dateSelect" 
          onstart="openModal();" 
          oncomplete="closeModal();"  
          update="untilDate div_report"/>
</p:calendar>

Javascript:

function openModal(){
    $('#mdlLoading').modal('open');
}
function closeModal(){
    $('#mdlLoading').modal('close');
}

Hope this help someone!

Answer 3

My solution:

<p:ajax event="change" listener="#{caseUitility.dateChange}"/>

And in the bean:

public void dateChange(SelectEvent event) 
{   
      date = (Date)event.getObject();
}

Answer 4

I think you must consider doing this:

<p:calendar id="fileDate" value="#{caseUitility.caseMaster.fileDate}" navigator="true" effect="slideDown" mindate="#{caseUitility.today}" readOnlyInputText="true" pattern="dd/MM/yyyy HH:mm" required="true"  showOn="button" autocomplete="false">
    <p:ajax event="focus" listener="#{caseUitility.dateChange}" update="lastDate" />
</p:calendar>

public void dateChange()  {
     System.out.println("File Date: " + caseMaster.getFileDate());
}

If you use the "focus" event, it will be triggered on change or dateSelect for calendar primefaces control.

Answer 5

You should add an update to your p:ajax. I had problems when selecting a date with the datepicker and when manually typing it in the field. The change event was not triggerd both ways. Therefore I used an p:ajax and a f:ajax with different events.

<p:calendar value="#{caseUitility.caseMaster.fileDate}" id="fileDate" effect="fadeIn" pattern="dd/MM/yyyy" readOnlyInputText="true">
    <p:ajax event="dateSelect" listener="#{caseUitility.dateSelect}" update="lastDate"/>
    <f:ajax event="change" execute="@this" render="lastDate" listener="#{caseUitility.dateChange}"/>
</p:calendar>

And in the bean

public void dateSelect(DateSelectEvent event) {
    caseMaster.setFileDate(event.getDate());
    System.out.println("File Date: " + caseMaster.getFileDate());
    System.out.println("Hello... I am in DateChange");
}

public void dateChange(AjaxBehaviorEvent event) throws MWSException {
    System.out.println("File Date: " + caseMaster.getFileDate());
    System.out.println("Hello... I am in DateChange");
}

Hope this helps

Answer 6

Use ajax event as dateSelect like

<p:calendar value="#{caseUitility.caseMaster.fileDate}" id="fileDate" effect="fadeIn" pattern="dd/MM/yyyy" readOnlyInputText="true">
        <p:ajax event="dateSelect" process="@this" update="lastDate" listener="#{caseUitility.dateChange}"/>
</p:calendar>   
<p:calendar value="#{caseUitility.caseMaster.lastDate}" required="true" id="lastDate" effect="fadeIn" pattern="dd/MM/yyyy" readOnlyInputText="true" mindate="#{caseUitility.caseMaster.fileDate}" >
</p:calendar>

Listener,

public void dateChange(SelectEvent event) {
    System.out.println("File Date: " + (Date) event.getObject());
    System.out.println("Hello... I am in DateChange");
}

but keep in mind that, you should not use any other component id in process (means only @this is allowed in process) otherwise listener will not work.