RichFaces Showcase

Ajax Action

a4j:ajax

a4j:commandButton

a4j:commandLink

a4j:actionListener

a4j:jsFunction

a4j:poll

a4j:push

a4j:param

Ajax Queue

a4j:queue

a4j:attachQueue

Ajax Output/Containers

a4j:outputPanel

a4j:status

a4j:region

a4j:mediaOutput

a4j:log

Validation

Client Side Validation

rich:graphValidator

rich:message

rich:messages

rich:notify

Data Iteration

a4j:repeat

rich:dataTable

rich:extendedDataTable

rich:collapsibleSubTable

rich:dataScroller

rich:list

rich:dataGrid

Trees

rich:tree

Tree Adaptors

Output/Panels

rich:chart

rich:panel

rich:togglePanel

rich:tabPanel

rich:collapsiblePanel

rich:accordion

rich:popupPanel

rich:progressBar

rich:tooltip

Menus

rich:panelMenu

rich:toolbar

rich:contextMenu

rich:dropDownMenu

Inputs

rich:autocomplete

rich:calendar

rich:editor

rich:inputNumberSlider

rich:inputNumberSpinner

rich:inplaceInput

rich:fileUpload

Selects

rich:inplaceSelect

rich:select

rich:orderingList

rich:pickList

Drag and Drop

Miscellaneous

Standard elements skinning

rich:placeholder

RichFaces functions

rich:focus

rich:componentControl

rich:hashParam

rich:hotKey

rich:jQuery

VDL documentation
Component Reference

The rich:calendar component allows you to select a date using a monthly calendar widget. It is possible to use the component in a popup or inline mode. In popup mode the calendar is initially rendered as an input for date with a button on the right side to trigger the popup. For inline mode, the monthly calendar is rendered on the page initially. Calendar supports localization - month names are localized automatically but calendar labels require a message bundle. (Refer to the documentation.)

View Source

<!DOCTYPE html>
<ui:composition xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://java.sun.com/jsf/html"
    xmlns:f="http://java.sun.com/jsf/core" xmlns:ui="http://java.sun.com/jsf/facelets" xmlns:a4j="http://richfaces.org/a4j"
    xmlns:rich="http://richfaces.org/rich">
    <style type="text/css">
        .ecol1 {
            vertical-align: top;
            padding-right: 50px
        }

        .ecol2 {
            vertical-align: top;
            border-left: #ACBECE 1px solid;
            padding-left: 10px
        }

        .rich-calendar-tool-btn {
            font-family: Arial, Verdana;
        }
    </style>
    <h:form id="form">

        <h:panelGrid id="panel" columns="2" columnClasses="ecol1, ecol2">
            <a4j:outputPanel layout="block">
                <rich:calendar value="#{calendarBean.selectedDate}" id="calendar" locale="#{calendarBean.locale}"
                    popup="#{calendarBean.popup}" datePattern="#{calendarBean.pattern}"
                    showApplyButton="#{calendarBean.showApply}" style="width:200px"
                    disabled="#{calendarBean.disabled}">
                </rich:calendar>
            </a4j:outputPanel>
            <a4j:region>
                <h:panelGrid id="settings" columns="2">
                    <h:outputText value="Disabled:" />
                    <h:selectBooleanCheckbox value="#{calendarBean.disabled}">
                        <a4j:ajax event="click" render="calendar settings" />
                    </h:selectBooleanCheckbox>
                    <h:outputText value="Popup Mode:" />
                    <h:selectBooleanCheckbox value="#{calendarBean.popup}" >
                        <a4j:ajax event="click" render="calendar settings" />
                    </h:selectBooleanCheckbox>
                    <h:outputText value="Apply Button:" />
                    <h:selectBooleanCheckbox value="#{calendarBean.showApply}" disabled="#{!calendarBean.showApplyAvailable}">
                        <a4j:ajax event="click" render="calendar settings" />
                    </h:selectBooleanCheckbox>
                    <h:outputText value="Select Locale" />
                    <h:selectOneRadio value="en/US" valueChangeListener="#{calendarBean.selectLocale}">
                        <a4j:ajax event="click" render="calendar settings" />
                        <f:selectItem itemLabel="US" itemValue="en/US" />
                        <f:selectItem itemLabel="DE" itemValue="de/DE" />
                        <f:selectItem itemLabel="FR" itemValue="fr/FR" />
                        <f:selectItem itemLabel="RU" itemValue="ru/RU" />
                    </h:selectOneRadio>

                    <h:outputText value="Select Date Pattern:" />
                    <h:selectOneMenu value="#{calendarBean.pattern}" disabled="#{!calendarBean.patternAvailable}">
                        <a4j:ajax event="change" render="calendar settings" />
                        <f:selectItem itemLabel="d/M/yy HH:mm" itemValue="d/M/yy HH:mm" />
                        <f:selectItem itemLabel="dd/M/yy hh:mm a" itemValue="dd/M/yy hh:mm a" />
                        <f:selectItem itemLabel="d/MMM/y" itemValue="d/MMM/y" />
                        <f:selectItem itemLabel="MMM d, yyyy" itemValue="MMM d, yyyy" />
                    </h:selectOneMenu>

                </h:panelGrid>
            </a4j:region>
        </h:panelGrid>
    </h:form>
</ui:composition>