JSF 表单需要更新一个字段

Question

我有一个包含 2 个日期的 JSF 表单。开始日期是必需的。

2 个我需要的东西：

填写完结束日期-->然后计算并填写天数。
填写天数时（例如：31）-->然后填写结束日期。

如何在 JSF 中完成此操作？

我的表格：

<h:form id="date">

    <h:panelGrid columns="3">
        <p:outputLabel for="startDate" value="Start Date"/>
        <p:calendar id="startDate" value="#{dateBean.startDate}" required="true" pattern="d MMM yyyy"/>
        <p:message for="startDate"/>

        <p:outputLabel for="endDate" value="End Date"/>
        <p:calendar id="endDate" value="#{dateBean.endDate}" pattern="d MMM yyyy"/>
        <p:message for="endDate"/>

        <p:outputLabel for="days" value="Days"/>
        <p:inputText id="days" value="#{dateBean.days}"/>
        <p:message for="days"/>
    </h:panelGrid>

</h:form>

我的豆子：

@Named(value = "dateBean")
@SessionScoped
public class DateBean implements Serializable {

    private static final long serialVersionUID = 1L;

    private Date startDate;
    private Date endDate;
    private Integer days;

    //getters and setters
    ...

Answer 1

一个建议是使用 JSTL format library

它可能会引导您达到您的要求，因此您可以这样做：

<fmt:parseNumber
    value="${(dateBean.endDate - dateBean.startDate) / (1000*60*60*24) }"
    integerOnly="true" var="daysDifference"/>

并将您的字段值设置为：（通过 jQuery/javascript 触发结束日期字段的更改进行更新）

<p:inputText id="days" value="#{daysDifference}"/>

Answer 2

使用 Javascript onchange 事件并用所需结果更新字段。

<p:calendar id="endDate" value="#{dateBean.endDate}" onchange="alertDateSelected()"/>

To calculate days between 2 dates in javascript

To get date + days in javascript

Answer 3

我宁愿使用内置的 Primefaces 方式来执行此操作。有一个名为 dateSelect 的 ajax 事件，它将在日期更改时触发：

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.

使用这个，endDate 看起来像（忽略日期格式属性，这似乎是错误的）：

<p:calendar id="endDate" value="#{dateBean.endDate}">
    <p:ajax event="dateSelect" listener="#{dateBean.handleDateSelect}" update="days" />
</p:calendar>

这将注册一个侦听器，一旦选择了新日期，就会调用该侦听器。它会调用您的辅助 bean，然后重新呈现 days 输入字段以显示新值。

在 DateBean 中，您将实现此方法以执行在选择日期时发生的逻辑：

public void handleDateSelect(SelectEvent event) {
    Date date = (Date) event.getObject();
    // the below method would calculate the difference in days between the dates
    calculateDaysIfStartDateIsFilled(date);
}

对于 days 标签，我将使用 p:event 在 change 上触发事件，即字段中的值发生变化时：

<p:inputText id="days" value="#{dateBean.days}">
    <p:ajax event="change" update="endDate" listener="#{dateBean.handleDaysChange}" />
</p:inputText>

并在DateBean中添加如下方法执行逻辑：

public void handleDaysChange() {
    calculateToDateIfStartDateIsFilled();
}

JSF 表单需要更新一个字段

JSF form needs to update a field

jsf

date

primefaces