PrimeFaces - Date Ranger Picker

[Updated: Jun 14, 2017, Created: Jun 13, 2017]

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

JSF page


    <h2>Primefaces Date Range Picker example</h2>
        <p:outputLabel for="dateSelectBtn" value="#{dateRange.dateRangeString}"/>
    <p:commandButton id="dateSelectBtn" value="Select new date range" type="button"

    <p:dialog closable="false"
              header="Date Range Picker" resizable="false"
              widgetVar="dateRangeDlg" minHeight="40" modal="true">
                <p:calendar id="idStartDate" binding="#{startDate}"
                <p:calendar id="idEndDate" value="#{dateRange.endDate}">
                    <f:validator validatorId="dateRangeValidator"/>
                    <f:attribute name="startDateAttr" value="#{startDate}"/>
                <p:messages id="messages" showDetail="true"
                <p:commandButton value="Save" icon="ui-icon-check"/>
                <p:commandButton value="Cancel" icon="ui-icon-close"

The manage bean

@ManagedBean(name = "dateRange")
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 {
  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();

To try examples, run embedded tomcat (configured in pom.xml of example project below):

mvn tomcat7:run-war


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

Date Range Picker Example Project Select All Download
  • date-range-selection
    • src
      • main
        • java
          • com
            • logicbig
              • example
        • webapp

See Also