Blog Archives

How to Disable Specific Dates in af:inputDate Component

Environment (JDeveloper 11.1.2.3.0,ADF Faces)

The inputDate component creates a text field for entering dates and (optionally) a glyph which opens a popup for picking dates from a calendar. However  in some cases we need to prevent the user from picking a specific days from the calender. In this post I will explain how to do this use case.

1- Create a simple JSF page and drag and drop af:inputDate component from the component palette into the newly created page.

2- Create a java class which implements org.apache.myfaces.trinidad.model.DateListProvider interface. This interface is used for providing a list of  individual dates within a given range.

3- Override the getDateList method, This method will generate a List of individual Date objects which will be rendered as disabled in a datePicker component.  An example is shown below.

import java.text.ParseException;

import java.text.SimpleDateFormat;

import java.util.ArrayList;
import java.util.Calendar;
import java.util.Collections;
import java.util.Date;
import java.util.List;

import javax.faces.context.FacesContext;

import org.apache.myfaces.trinidad.model.DateListProvider;

public class DaysBean
  implements DateListProvider
{
  public DaysBean()
  {
    super();
  }

  @Override
  public List getDateList(FacesContext facesContext, Calendar calendar, Date date, Date date2)
  {
    ArrayList disabledDates= new ArrayList();
    SimpleDateFormat sdf = new SimpleDateFormat("dd/MM/yyyy");
    try
    {
      disabledDates.add(sdf.parse("01/01/2013"));
      disabledDates.add(sdf.parse("25/12/2013"));
    }
    catch (ParseException e)
    {
      e.printStackTrace();
      return Collections.emptyList();
    }
    return disabledDates;
  }
}

4-Register the Java Class as Managed Bean in adfc-config.xml file.

       Register Java Class as Managed Bean in adfc-config.xml file

5- Go to the JSF page and select the inputDate component, from the property inspector select the DisabledDays property and bind it to the manged bean defined in the previous step.

<af:document title="Test.jsf" id="d1">
<af:form id="f1">
<af:inputDate label="Date" id="id1" disabledDays="#{daysBean}"/>
</af:form>
</af:document>

Note:

 this binding requires periodic roundtrips. If you just want to disable certain weekdays (e.g. Saturday and Sunday), use the disabledDaysOfWeek attribute!

6- Run the page, and check that the date is disabled.

01/01/2013 is Disabled

Moreover, if the user enters the date manually without using the date picker, an error message will be shown to the user.

Error Message When the date is Entered Manually

download the sample application TestDisableDays.rar

Please change the file extension to .zip or .rar after download.

Leave a comment

January 24, 2013 · 10:59 am