PrimeFaces - Date Ranger Picker

This example shows how to select date range in a popup dialog using PrimeFaces calendar component.

JSF page

src/main/webapp/index.xhtml

<h:body>
    <h2>Primefaces Date Range Picker example</h2>
    <p>
        <p:outputLabel for="dateSelectBtn" value="#{dateRange.dateRangeString}"/>
    </p>
    <p:commandButton id="dateSelectBtn" value="Select new date range" type="button"
                     onclick="PF('dateRangeDlg').show();"/>

    <p:dialog closable="false"
              header="Date Range Picker" resizable="false"
              widgetVar="dateRangeDlg" minHeight="40" modal="true">
        <p:outputPanel>
            <h:form>
                <p:calendar id="idStartDate" binding="#{startDate}"
                            value="#{dateRange.startDate}">
                </p:calendar>
                <p:calendar id="idEndDate" value="#{dateRange.endDate}">
                    <f:validator validatorId="dateRangeValidator"/>
                    <f:attribute name="startDateAttr" value="#{startDate}"/>
                </p:calendar>
                <br/>
                <p:messages id="messages" showDetail="true"
                            autoUpdate="true"/>
                <br/>
                <p:commandButton value="Save" icon="ui-icon-check"/>
                <p:commandButton value="Cancel" icon="ui-icon-close"
                                 immediate="true"
                                 onclick="PF('dateRangeDlg').hide()"/>
            </h:form>
        </p:outputPanel>
    </p:dialog>
</h:body>

The manage bean

@ManagedBean(name = "dateRange")
@SessionScoped
public class DateRangeBean {
    private Date startDate;
    private Date endDate;
    private DateFormat formatter = new SimpleDateFormat("MM-dd-yyyy");

    public DateRangeBean() {
        Calendar c1 = Calendar.getInstance();
        endDate = c1.getTime();
        Calendar c2 = Calendar.getInstance();
        c2.set(Calendar.YEAR, c1.get(Calendar.YEAR));
        c2.set(Calendar.DAY_OF_YEAR, 1);
        startDate = c2.getTime();
    }

    public Date getStartDate() {
        return startDate;
    }

    public void setStartDate(Date startDate) {
        this.startDate = startDate;
    }

    public Date getEndDate() {
        return endDate;
    }

    public void setEndDate(Date endDate) {
        this.endDate = endDate;
    }

    public String getDateRangeString() {
        return String.format("From: %s To: %s%n",
                formatter.format(startDate), formatter.format(endDate));
    }
}

The validator for date range

@FacesValidator(value = "dateRangeValidator")
public class DateRangeValidator implements Validator {
    @Override
    public void validate(FacesContext context,
                         UIComponent uiComponent, Object o) throws ValidatorException {
        UIInput startDateInput = (UIInput) uiComponent.getAttributes().get("startDateAttr");
        Date startDate = (Date) startDateInput.getValue();
        Date endDate = (Date) o;

        if (endDate.before(startDate)) {
            FacesMessage msg =
                    new FacesMessage(FacesMessage.SEVERITY_ERROR,
                            "Invalid start/end dates.",
                            "Start date cannot be after end date.");
            throw new ValidatorException(msg);
        } else {
            RequestContext c = RequestContext.getCurrentInstance();
            c.execute("PF('dateRangeDlg').hide();");
            c.execute("location.reload();");
        }
    }
}

mvn tomcat7:run-war

Output

On invalid start/end dates selection:

Example Project

Dependencies and Technologies Used:

• primefaces 6.1 primefaces
• jsf-api 2.2.14: This is the master POM file for Oracle's Implementation of the JSF 2.2 Specification.
• jsf-impl 2.2.14: This is the master POM file for Oracle's Implementation of the JSF 2.2 Specification.
• datafactory 0.8: Library to generate data for testing.
• JDK 1.8
• Maven 3.3.9