CODEWITHSUNDEEP
datejsfprimefaces
Dimitri Dewaele
Dimitri Dewaele

Reputation: 10659

JSF form needs to update a field

I have a JSF form with 2 dates. Start Date is required.

2 things I would need:

How can this be done in JSF?

enter image description here

My form:

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

My Bean:

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

Upvotes: 2

Views: 1164

Answers (3)

Magnilex
Magnilex

Reputation: 11958

I would rather go with the built-in Primefaces way of doing this. There is an event called dateSelect which will fire when the date has changed:

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.

Using this, endDate would look like (ignoring the date format property, which seems wrong):

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

This would register a listener to be called once a new date is selected. It would call your backing bean, and then re-render the days input field to display the new value.

In DateBean you would then implement this method to perform the logic to happen upon date selection:

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

For the days tag, I would use p:event to trigger an event on change, that is when the value in the field changes:

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

And add the following method in DateBean to perform the logic:

public void handleDaysChange() {
    calculateToDateIfStartDateIsFilled();
}

Upvotes: 5

Jordi Castilla
Jordi Castilla

Reputation: 26961

Use Javascript onchange event and just update the field with the desired result.

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

To calculate days between 2 dates in javascript

To get date + days in javascript

Upvotes: 2

drgPP
drgPP

Reputation: 936

One suggestion would be to use JSTL format library

It may guide you to your requirments, so you can do something like this:

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

And set your field value as: (Update via jQuery/javascript triggering the change on the End Date field)

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

Upvotes: -2

Related Questions