Pages

Tuesday, December 6, 2016

How to specify min/max date value for an inputDate component.

Very often in projects, you get a requirement to restrict an user from selecting a date value before today's date and sometimes restrict an user from selecting a date value beyond today's date. In this blog post, I will explain you with simple steps how to achieve this feature using min and max values of an inputDate component.

1. minValue attribute: the minimum value allowed for a date value.
You can use this attribute to disable past dates before today's date by following below steps.

Step1: Drag and drop an inputDate component on a page.

Step2:  Define a managed bean variable minDate and override the getter of this variable as mentioned below. Here we are setting the minDate date variable to current date.

    public Date getMinDate() {
        try {
            Calendar cal = Calendar.getInstance();
            java.util.Date date = cal.getTime();
            DateFormat formatter = new SimpleDateFormat("yyyy-MM-dd");
            String currentDate = formatter.format(date);
            maxDate = formatter.parse(currentDate);
            return formatter.parse(currentDate);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }
Step3: Go to inputDate component and set the minValue attribute to the managed bean variable created in step 2.

                <af:inputDate label="Min Value" id="id1"
                            value=""
                            minValue="#{pageFlowScope.TestBean.minDate}"
                            autoSubmit="true">
                </af:inputDate>

Run the page and see that all the past dates before today's date(6th Dec, 2016) are disabled.  

2. maxValue attribute: the maximum value allowed for a date value.
You can use this attribute to disable future dates after today's date by following below steps.

Step1: Drag and drop an inputDate component on a page.

Step2:  Define a managed bean variable maxDate and override the getter of this variable as mentioned below. Here we are setting the maxDate date variable to current date.

    public Date getMaxDate() {
        try {
            Calendar cal = Calendar.getInstance();
            java.util.Date date = cal.getTime();
            DateFormat formatter = new SimpleDateFormat("yyyy-MM-dd");
            String currentDate = formatter.format(date);
            maxDate = formatter.parse(currentDate);
            return formatter.parse(currentDate);
        } catch (Exception e) {
            e.printStackTrace();
        }
        return null;
    }
Step3: Go to inputDate component and set the maxValue attribute to the managed bean variable created in step 2.

                <af:inputDate label="Min Value" id="id1"
                            value=""
                            maxValue="#{pageFlowScope.TestBean.maxDate}"
                            autoSubmit="true">
                </af:inputDate>

Run the page and see that all the future dates after today's date(6th Dec, 2016) are disabled.  

5 comments:

  1. Hi,

    I want to have two drop down calendar as Start Date and End Date. When select start date, end date will be automatically assign to start date value on drop down. how can I get this done.

    Thanks.

    ReplyDelete
  2. Nice article. It's very helpful to me. Thank you for share with us. Can you please check my Top logo color hex code collection.

    ReplyDelete
  3. Hi,

    Is there a way to define the min and max values globaly in the application so that whenever I have an input date component the default min and max would be applied?

    Thank You

    ReplyDelete