值更改侦听器在 primefaces 日历中不起作用

Posted 2023-02-23

【中文标题】值更改侦听器在 primefaces 日历中不起作用

【英文标题】：Value Change listener not working in primefaces calendar

【发布时间】：2012-12-15 11:42:26

【问题描述】：

我正在使用 primefaces 3.2 和 JSF 2.0

我的情况是我的表格中有文件日期、最后日期和下一个日期。 当用户输入文件日期时，我需要更新 bean 中的文件日期值，以便它的值可以用作属性 mindate 的最后日期中的最小日期，因此在下一个日期选择中。

据我所知，值更改侦听器可以在表单提交时执行，所以我不能使用它。我用过 p:ajax。但我仍然无法设置文件日期。由于未设置文件日期，它允许用户选择文件日期之前的最后日期和下一个日期。

caseMaster.xhtml

<p:calendar value="#caseUitility.caseMaster.fileDate" id="fileDate" effect="fadeIn" pattern="dd/MM/yyyy" readOnlyInputText="true">
    <p:ajax event="change" 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>

CaseUitility.java

public void dateChange(ActionEvent ae) 
    System.out.println("File Date: " + caseMaster.getFileDate());
    System.out.println("Hello... I am in DateChange");

谁能指导我在这里做错了什么？

【参考方案1】：

您可以使用onstart 和oncomplete（不会出现在 primefaces 文档中）。

我解决了这个问题：

<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');

希望这对某人有所帮助！

【参考方案2】：

在 PrimeFaces 的更新版本中，应该使用 SelectEvent 参见以下代码 sn-p

<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())));

在旧的 primefaces 版本中使用 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");

【讨论】：

非常感谢@Daniel....你救了我半天....再次感谢。你能告诉我如何知道/了解不同类型组件的 ajax 事件吗？作为primefaces不提供任何有关事件的帮助。

欢迎您，primefaces 确实提供了您需要的所有信息，在他们的用户指南中：primefaces.org/documentation.html

【参考方案3】：

我的解决方案：

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

在 bean 中：

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

【参考方案4】：

使用 ajax 事件作为 dateSelect 喜欢

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

听众，

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

但请记住，您不应在进程中使用任何其他组件 ID（意味着进程中仅允许使用 @this），否则侦听器将无法工作。

【参考方案5】：

我认为你必须考虑这样做：

<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());

如果您使用“焦点”事件，它将在更改或日期选择时触发，用于日历素面控件。

【参考方案6】：

您应该为您的 p:ajax 添加更新。使用日期选择器选择日期以及在字段中手动输入日期时遇到问题。更改事件不是双向触发的。因此我使用了一个 p:ajax 和一个 f:ajax 来处理不同的事件。

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

在豆子里

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");

希望对你有帮助

【讨论】：

使用 2 个不同的 ajax 标签的原因是什么，一个 p:ajax 和一个 f:ajax。为什么不同时使用 p:ajax ？

@Chris，根据他的说法，我猜 涵盖了用户点击日历并选择日期，但不是什么时候通过更改文本来更改日期。在这种情况下， 涵盖了用户手动更改文本字段中的文本的情况。

@pixelstix true