Requirement: I have an af:inputDate component. Also, I have a list of holidays defined in a Managed Bean. Now I want to disable and highlight all the holidays in Red Color.
Solution: For the solution of the above requirement follow the steps as shown below:
Step 1: Create an ADF Fusion Web Application.
Step 2: Create a demo.jspx page.
Drag and drop af:panelBox inside the demo.jspx page and set text=”Show Holidays as Disabled and Highlighted” and showDisclosure=”false”
Drag and drop af:inputDate inside the af:panelBox and set label=”Select Date” and disabledDays=”#{pageFlowScope.MyBean}”
Thus, the complete code for the demo.jspx page is shown below:
<?xml version='1.0' encoding='UTF-8'?>
<jsp:root xmlns:jsp="" version="2.1" xmlns:f=""
xmlns:af="">
<jsp:directive.page contentType="text/html;charset=UTF-8"/>
<f:view>
<af:document title="demo.jspx" id="d1">
<af:form id="f1">
<af:panelBox text="Show Holidays as Disabled and Highlighted" id="pb1" showDisclosure="false">
<af:inputDate label="Select Date" id="id1" disabledDays="#{pageFlowScope.MyBean}"/>
<f:facet name="toolbar"/>
</af:panelBox>
</af:form>
</af:document>
</f:view>
</jsp:root>And the complete code for the MyBean.Java class is shown below. The MyBean.java implements DateListProvider, and in the Overridden method I have defined a list that contains dates of holidays that I want to disable in the af:inputDate component.
package susantotech.com;
import java.util.ArrayList;
import java.util.Calendar;
import java.util.Date;
import java.util.List;
import javax.faces.context.FacesContext;
import org.apache.myfaces.trinidad.model.DateListProvider;
public class MyBean implements DateListProvider {
public MyBean() {
}
@Override
public List<Date> getDateList(FacesContext facesContext, Calendar calendar, Date date, Date date2) {
List<java.util.Date> holiDay = new ArrayList();
holiDay.add(new Date("24-Jan-2021"));
holiDay.add(new Date("25-Jan-2021"));
holiDay.add(new Date("10-Feb-2021"));
holiDay.add(new Date("26-Feb-2021"));
holiDay.add(new Date("04-Mar-2021"));
holiDay.add(new Date("20-Apr-2021"));
holiDay.add(new Date("23-Apr-2021"));
holiDay.add(new Date("24-Apr-2021"));
holiDay.add(new Date("25-Apr-2021"));
return holiDay;
}
}Now, save all and run the application. Thus, the ran application is shown below:
Here we can see the dates 20, 23, 24,and 25 as disabled. Now, we will highlight these disabled dates with red color.
For this, let me create a skin1.css file in the ViewController Project and write the below code.
@charset "UTF-8";
/**ADFFaces_Skin_File / DO NOT REMOVE**/
@namespace af "";
@namespace dvt "";
af|chooseDate::regular-day:disabled {
background-color: red;
color: ButtonFace;
}Now, save all and run the application. Thus, the ran application is shown below:
Hence, the solution to our requirement.
If you like the post please comment, share, and do join me on Facebook. Please subscribe to my YouTube Channel for video tutorials.
Thanks & Regards,
Susanto Paul
945 total views, 2 views today