The ICEfaces Tutorial
Table of Contents

Lesson: Using calendar component

How to Use the ICEfaces Calendar Component

Often applications require users to insert date, such as Date-of-Birth, Start Date of employment and so on. selectInputDate component allows programmers to offer user safe and convenient way of entering date without worrying about format, locale and other features, which may vary from place to place. This tutorial will show how to create a basic calendar object and also how to change it in order to adhere to corporate and architectural presentation standards. As all other ICEFaces components, selectInputDate is designed to use CSS styles. You will see how easy it can be to apply CSS to various parts of the component.

This tutorial will discuss the following topics related to the use of the selectInputDate component:


Creating a Simple Calendar

Creating a simple calendar must be very straightforward. Below is the presentation of the simple calendar. Please, note, that text fields above and below are not part of the calendar control

Basic dataTable Example

Download the demo:

In order to add a calendar on the page, you must include the following snippet of code:

	<ice:selectInputDate id="date1" value="#{dateSelect.date1}"/>

This is your first and very basic calendar. Selected value is stored in the backing bean as date1 property.


Creating a Popup Calendar

Sometimes developers do not have enough real estate on the screen to place full calendar. selectInputDate component declaration can be modified to show a popup version of the calendar, which looks like this

Popup Calendar Example

In order to create a popup calendar, you must insert the following statement into your page code:

	<ice:selectInputDate id="date2" value="#{dateSelect.date2}" renderAsPopup="true"/>

As you can see, basic calendar and popup calendar are in fact the same component. renderAsPopup attribute controls the way of how the component is displayed.

Download the demo:


Using Converters and Validators

This part of tutorial shows how to use converters and validators together with calendar control. If you are not familiar with basics of using a validator, you can refer to validators tutorial. Converter and validator can be added to both basic and popup calendar.

Converter is used in selectInputDate component in order to change the representation of date. We will use a common North American date presentation of MM/dd/yyyy

	<ice:selectInputDate id="date1" value="#{dateSelect.date1}">
		<f:convertDateTime pattern="MM/dd/yyyy" timeZone="#{dateSelect.timeZone}"/>

In this example, we chose the pattern of how the date will be presented and we also chose time zone using standard java TimeZone class. If you create a corporate web site for the workers in the different time zones, this feature may be very handy.

Often programmers need to restrict users on which dates they can insert. If it's a birthday it must be in the past, if this is a flight it must be in the future, and so on. While users are on their own at the time of selection, the programmers can restrict the use of the improper dates by using validators.

	<ice:selectInputDate id="date1" value="#{dateSelect.date1}">
		<f:convertDateTime pattern="MM/dd/yyyy" timeZone="#{dateSelect.timeZone}"/>
		<f:validator validatorId="dateRangeValidator" />

Validator also requires additional setup in faces-config.xml, where we tie validatorId with actual class.

The snippet of java code is the actual code of the validator, used in the sample. Value parameter of validate() method is a date object. If you decide that dates, not passing validation, must stop form from submitting, just throw a ValidatorException
	public void validate(FacesContext context, UIComponent component, Object value)
			throws ValidatorException {
		Date myDate = (Date)value;
		Date today = new Date();
		if (myDate.before(today)) {
            FacesMessage message = new FacesMessage();
            message.setDetail("Date is in the past");
            message.setSummary("Date is in the past");
            throw new ValidatorException(message);


Customizing Calendar Style

selectInputDate is easily customised. First of all, it makes use of ICEFaces themes to define its appearance. You may also use internal parameters of the component to change its appearance