Disabling Past And Future Dates in Date Picker ADF

Hi All,

In this post I am going to show you how you can disable the past dates and future dates in date picker in ADF.

To disable the past date for af:inputDate component we have one property "minValue". If you want to disable all the dates before current date then you can do the following.

First of all write a method in your bean which will return you the current date in the format "yyyy-MM-dd" as shown below.


  public Date getCurrentSystemDate() {
    try {
    Calendar now = Calendar.getInstance();
    java.util.Date date = now.getTime();
    DateFormat formatter = new SimpleDateFormat("yyyy-MM-dd");
    String currentDate = formatter.format(date);
    return formatter.parse(currentDate);
    } catch (Exception e) {
    return null;
    }
    } 

Now bind this method to minValue property of af:inputDate component.


 <af:inputDate value="#{bindings.HireDate.inputValue}"
                      label="#{bindings.HireDate.hints.label}"
                      required="#{bindings.HireDate.hints.mandatory}"
                      shortDesc="#{bindings.HireDate.hints.tooltip}" id="id1"
                      minValue="#{backingBeanScope.TestBean.currentSystemDate}">
          <f:validator binding="#{bindings.HireDate.validator}"/>
          <af:convertDateTime pattern="#{bindings.HireDate.format}"/>
 </af:inputDate>


For disbling future dates do the same thing for the property maxValue.

once you run the page you can see that the past dates are disabled as shown below:





Happy Coding :)

Comments

  1. satishMay 19, 2015

    hi kunal...it is very helpful..

    ReplyDelete
  2. AnonymousMay 29, 2015

    Hi Kunal,

    Thanks for this info. I've a specific requirement to disable few selected days only. Like based on a parameter value, I wish to disable only Fridays or Wednesday. Kindly suggest if you're aware of any such solution.

    Sid

    ReplyDelete
  3. AnonymousSeptember 30, 2015

    Thanks Kunal. It is really helpful..

    ReplyDelete
  4. UnknownJune 29, 2016

    HI Kunal,
    I have tried the same.
    My requirement was to disable al dates prior to sysdate.
    But when I select the current date (say 06/28/2016), it prompts saying please enter a date equal to or greater than 28/06/2016.
    eg . 06/29/2016

    So the issue is that using the minValue property, I was able to disable past dates on the datepicker, but the date field validator does not allow the sysdate to be entered. Only a date after sysdate is allowed.
    Even though themessage suggests enter current date or a future one.

    Did you encounter this issue.

    Kindly help.

    Thanks,
    Ratnadeep

    ReplyDelete
  5. AnonymousNovember 08, 2019

    Hi Ratnadeep,

    Use the same format it will work.

    ReplyDelete

Post a Comment

Popular posts from this blog

Setting up the environment for Angular2 and Hello World Example in Angular2

Image
Hi All, In this post I am going you to show you how you can set up the environment for Angular2. You may want to run your application in different servers. So here I am going to show you how you can run your Angular2 application in the following two servers: 1. lite-server (static server) 2. Weblogic Server 10.3 Lets do the setup for lite server.  First of all go to any directory in your computer and create a folder in that directory with name "angular2-example". You can do it by the command line also by typing the following command. mkdir  angular2-example Now once the directory is created you need to create three files. 1. tsconfig.json 2. typings.json 3. package.json 1.  tsconfig.json This file is TypeScript compiler configuration file. It guides the compiler to generate JavaScript files after compilation. The content of this file will be as follows: {   "compilerOptions": {     "target": "es6",     "modu...
Read more

Build a Simple ReactJS application using react-cli

Image
Hi All, In this blog we will see how we can create a sample application using react-cli.  It is a command line interface tool that seeks to automate some tasks when working on a React.js project. To starts with you have to install it globally by running following command: npm install -g react-cli The you have to run the following command in command window: npm install -g create-react-app  Now once it is installed you can create any directory where you want to create you sample ReactJS application. I have created a folder with name "TestApp" in my local drive. Now you have to run the following command to create the sample application. create-react-app testapp  While it is creating application and downloading all the artifacts related to this you can see the following things in command line as shown below: So it will create a ReactJS application with name "testapp" under folder "TestApp" as you can see in the above screenshot. On...
Read more

Customizing the ReactJS sample application created using react-cli

Some time you may want to create the react.js application using react-cli and you may also want to customize it according to your requirements. react-cli command always get the latest version of all the libraries. for instance if you look at the package.json file then you will see the following contents: package.json ======================================================================== {   "name": "testapp",   "version": "0.1.0",   "private": true,   "dependencies": {     "react": "^15.6.1",     "react-dom": "^15.6.1"   },   "devDependencies": {     "react-scripts": "1.0.10"   },   "scripts": {     "start": "react-scripts start",     "build": "react-scripts build",     "test": "react-scripts test --env=jsdom",     "eject": "react-scripts eject"   } } =======...
Read more