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