Question

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

我需要的两件事：

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

如何在JSF中完成？

enter image description here

我的表格：

<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

我宁愿选择内置的Primefaces方式来做这件事。有一个名为dateSelect的{{3}}事件会在日期发生变化时触发：

Calendar提供dateSelect ajax行为事件，以便在选择日期时执行即时ajax选择。如果将方法定义为侦听器，则将通过传递org.primefaces.event.SelectEvent实例来调用它。

使用它，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代码，我会使用ajax触发更改上的事件，即字段中的值发生变化时：

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

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

public void handleDaysChange() {
    calculateToDateIfStartDateIsFilled();
}

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

一个建议是使用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}"/>

JSF表单需要更新字段

3 个答案: